From 59287732d1cd18b440626a6d8eb7b504c500ba7b Mon Sep 17 00:00:00 2001 From: Charles Dang Date: Sun, 26 Apr 2020 21:36:46 +1100 Subject: [PATCH] Admin UI: cleaned up and simplified ApolloClient initialization --- .changeset/clean-snails-teach.md | 5 + packages/app-admin-ui/client/apolloClient.js | 106 +++++-------------- packages/app-admin-ui/client/index.js | 4 +- packages/app-admin-ui/client/public.js | 4 +- packages/app-admin-ui/package.json | 3 +- yarn.lock | 27 +---- 6 files changed, 39 insertions(+), 110 deletions(-) create mode 100644 .changeset/clean-snails-teach.md diff --git a/.changeset/clean-snails-teach.md b/.changeset/clean-snails-teach.md new file mode 100644 index 00000000000..252afb6006d --- /dev/null +++ b/.changeset/clean-snails-teach.md @@ -0,0 +1,5 @@ +--- +'@keystonejs/app-admin-ui': patch +--- + +Cleaned up and simplified ApolloClient initialization. The `cross-fetch` dependency was also updated to 3.0.4. diff --git a/packages/app-admin-ui/client/apolloClient.js b/packages/app-admin-ui/client/apolloClient.js index 9e5e807b69a..3dff49bd1ef 100644 --- a/packages/app-admin-ui/client/apolloClient.js +++ b/packages/app-admin-ui/client/apolloClient.js @@ -1,10 +1,10 @@ -import { ApolloLink, Observable } from 'apollo-link'; +import { ApolloClient } from 'apollo-client'; +import { ApolloLink } from 'apollo-link'; import { createUploadLink } from 'apollo-upload-client'; -import { withClientState } from 'apollo-link-state'; import { onError } from 'apollo-link-error'; - import { InMemoryCache, IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'; -import ApolloClient from 'apollo-client'; + +import fetch from 'cross-fetch'; // This shouldn't be necessary, but it silences an annoying error from Apollo // Client: https://github.com/apollographql/apollo-client/issues/3397#issuecomment-421433032 @@ -16,78 +16,26 @@ const fragmentMatcher = new IntrospectionFragmentMatcher({ }, }); -const fetch = require('cross-fetch'); - -// Ejected from apollo-boost v0.1.4: -// https://github.com/apollographql/apollo-client/tree/4e2b2b90b181d9c1927a721de4e26e4ed3c86637/packages/apollo-boost -// (with Typescriptyness removed) -// Then modified to replace apollo-link-http with apollo-upload-client: -// https://github.com/jaydenseric/apollo-upload-client - -class BoostClientWithUpload extends ApolloClient { - constructor(config) { - const cache = - config && config.cacheRedirects - ? new InMemoryCache({ fragmentMatcher, cacheRedirects: config.cacheRedirects }) - : new InMemoryCache({ fragmentMatcher }); - - const stateLink = - config && config.clientState ? withClientState({ ...config.clientState, cache }) : false; - - const errorLink = - config && config.onError - ? onError(config.onError) - : onError(({ graphQLErrors, networkError }) => { - if (graphQLErrors) { - graphQLErrors.map(({ message, locations, path }) => - console.log( - `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}` - ) - ); - } - if (networkError) { - console.log(`[Network error]: ${networkError}`); - } - }); - - const requestHandler = - config && config.request - ? new ApolloLink( - (operation, forward) => - new Observable(observer => { - let handle: any; - Promise.resolve(operation) - .then(oper => config.request(oper)) - .then(() => { - handle = forward(operation).subscribe({ - next: observer.next.bind(observer), - error: observer.error.bind(observer), - complete: observer.complete.bind(observer), - }); - }) - .catch(observer.error.bind(observer)); - - return () => { - if (handle) { - return handle.unsubscribe; - } - }; - }) - ) - : false; - - const httpLink = createUploadLink({ - uri: (config && config.uri) || '/graphql', - fetch, // support mocking `fetch` in Cypress tests. See https://github.com/cypress-io/cypress/issues/687#issuecomment-384953881 - fetchOptions: (config && config.fetchOptions) || {}, - credentials: 'same-origin', - }); - - const link = ApolloLink.from([errorLink, requestHandler, stateLink, httpLink].filter(x => x)); - - // super hacky, we will fix the types eventually - super({ cache, link }); - } -} - -export default BoostClientWithUpload; +export const initApolloClient = ({ uri }) => { + const errorLink = onError(({ graphQLErrors, networkError }) => { + if (graphQLErrors) { + graphQLErrors.map(({ message, locations, path }) => + console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`) + ); + } + if (networkError) { + console.log(`[Network error]: ${networkError}`); + } + }); + + const httpLink = createUploadLink({ + uri, + fetch, // support mocking `fetch` in Cypress tests. See https://github.com/cypress-io/cypress/issues/687#issuecomment-384953881 + credentials: 'same-origin', + }); + + return new ApolloClient({ + link: ApolloLink.from([errorLink, httpLink]), + cache: new InMemoryCache({ fragmentMatcher }), + }); +}; diff --git a/packages/app-admin-ui/client/index.js b/packages/app-admin-ui/client/index.js index 389b521cfe1..0b232fe4d85 100644 --- a/packages/app-admin-ui/client/index.js +++ b/packages/app-admin-ui/client/index.js @@ -7,7 +7,7 @@ import { Global } from '@emotion/core'; import { globalStyles } from '@arch-ui/theme'; -import ApolloClient from './apolloClient'; +import { initApolloClient } from './apolloClient'; import Nav from './components/Nav'; import ScrollToTop from './components/ScrollToTop'; import ConnectivityListener from './components/ConnectivityListener'; @@ -36,7 +36,7 @@ export const KeystoneAdminUI = () => { hooks, } = useAdminMeta(); - const apolloClient = useMemo(() => new ApolloClient({ uri: apiPath }), [apiPath]); + const apolloClient = useMemo(() => initApolloClient({ uri: apiPath }), [apiPath]); const routes = [ ...pages diff --git a/packages/app-admin-ui/client/public.js b/packages/app-admin-ui/client/public.js index 395dbed3db3..1b4bc696725 100644 --- a/packages/app-admin-ui/client/public.js +++ b/packages/app-admin-ui/client/public.js @@ -7,7 +7,7 @@ import { Global } from '@emotion/core'; import { globalStyles } from '@arch-ui/theme'; -import ApolloClient from './apolloClient'; +import { initApolloClient } from './apolloClient'; import ConnectivityListener from './components/ConnectivityListener'; import { AdminMetaProvider, useAdminMeta } from './providers/AdminMeta'; @@ -27,7 +27,7 @@ import SigninPage from './pages/Signin'; const Keystone = () => { const { authStrategy, apiPath, signoutPath, hooks } = useAdminMeta(); - const apolloClient = useMemo(() => new ApolloClient({ uri: apiPath }), [apiPath]); + const apolloClient = useMemo(() => initApolloClient({ uri: apiPath }), [apiPath]); return ( diff --git a/packages/app-admin-ui/package.json b/packages/app-admin-ui/package.json index b9869b11724..acbdfa8acd4 100644 --- a/packages/app-admin-ui/package.json +++ b/packages/app-admin-ui/package.json @@ -49,7 +49,6 @@ "apollo-client": "^2.6.8", "apollo-link": "^1.2.13", "apollo-link-error": "^1.1.12", - "apollo-link-state": "^0.4.2", "apollo-upload-client": "^12.1.0", "apply-ref": "^0.2.0", "babel-loader": "^8.0.5", @@ -57,7 +56,7 @@ "babel-preset-react-app": "^9.0.2", "clipboard-copy": "^3.0.0", "compression": "^1.7.4", - "cross-fetch": "^2.2.0", + "cross-fetch": "^3.0.4", "css-loader": "^3.2.0", "express": "^4.17.1", "express-history-api-fallback": "^2.2.1", diff --git a/yarn.lock b/yarn.lock index a2b187ecd1b..8e1fb80baa0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4692,14 +4692,6 @@ apollo-link-http@^1.3.2: apollo-link-http-common "^0.2.11" tslib "^1.9.3" -apollo-link-state@^0.4.2: - version "0.4.2" - resolved "https://registry.yarnpkg.com/apollo-link-state/-/apollo-link-state-0.4.2.tgz#ac00e9be9b0ca89eae0be6ba31fe904b80bbe2e8" - integrity sha512-xMPcAfuiPVYXaLwC6oJFIZrKgV3GmdO31Ag2eufRoXpvT0AfJZjdaPB4450Nu9TslHRePN9A3quxNueILlQxlw== - dependencies: - apollo-utilities "^1.0.8" - graphql-anywhere "^4.1.0-alpha.0" - apollo-link-ws@1.0.8: version "1.0.8" resolved "https://registry.yarnpkg.com/apollo-link-ws/-/apollo-link-ws-1.0.8.tgz#ac1de8f29e92418728479a9a523af9f75b9ccc8b" @@ -4840,7 +4832,7 @@ apollo-utilities@1.3.3, apollo-utilities@^1.3.3: ts-invariant "^0.4.0" tslib "^1.10.0" -apollo-utilities@^1.0.1, apollo-utilities@^1.0.25, apollo-utilities@^1.0.8, apollo-utilities@^1.2.1: +apollo-utilities@^1.0.1, apollo-utilities@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.2.1.tgz#1c3a1ebf5607d7c8efe7636daaf58e7463b41b3c" integrity sha512-Zv8Udp9XTSFiN8oyXOjf6PMHepD4yxxReLsl6dPUy5Ths7jti3nmlBzZUOxuTWRwZn0MoclqL7RQ5UEJN8MAxg== @@ -7523,7 +7515,7 @@ cross-fetch@2.2.2: node-fetch "2.1.2" whatwg-fetch "2.0.4" -cross-fetch@3.0.4: +cross-fetch@3.0.4, cross-fetch@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.4.tgz#7bef7020207e684a7638ef5f2f698e24d9eb283c" integrity sha512-MSHgpjQqgbT/94D4CyADeNoYh52zMkCX4pcJvPP5WqPsLFMKjr2TCMg381ox5qI0ii2dPwaLx/00477knXqXVw== @@ -7531,14 +7523,6 @@ cross-fetch@3.0.4: node-fetch "2.6.0" whatwg-fetch "3.0.0" -cross-fetch@^2.2.0: - version "2.2.3" - resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-2.2.3.tgz#e8a0b3c54598136e037f8650f8e823ccdfac198e" - integrity sha512-PrWWNH3yL2NYIb/7WF/5vFG3DCQiXDOVf8k3ijatbrtnwNuhMWLC7YF7uqf53tbTFDzHIUD8oITw4Bxt8ST3Nw== - dependencies: - node-fetch "2.1.2" - whatwg-fetch "2.0.4" - cross-spawn@5.1.0, cross-spawn@^5.0.1, cross-spawn@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449" @@ -11756,13 +11740,6 @@ graphiql@^0.11.2: codemirror-graphql "^0.6.11" markdown-it "^8.4.0" -graphql-anywhere@^4.1.0-alpha.0: - version "4.1.22" - resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-4.1.22.tgz#1c831ba3c9e5664a0dd24d10d23a9e9512d92056" - integrity sha512-qm2/1cKM8nfotxDhm4J0r1znVlK0Yge/yEKt26EVVBgpIhvxjXYFALCGbr7cvfDlvzal1iSPpaYa+8YTtjsxQA== - dependencies: - apollo-utilities "^1.0.25" - graphql-compose@^6.3.2: version "6.3.5" resolved "https://registry.yarnpkg.com/graphql-compose/-/graphql-compose-6.3.5.tgz#019a5a4441293cdf15dbe0173438a2c997017e26"