From 2488d0790f078ca7cc9653d3b4ae45dc504c8aec Mon Sep 17 00:00:00 2001 From: Chloe Date: Thu, 26 May 2022 15:53:09 +0700 Subject: [PATCH 1/2] fix: primary shop query Signed-off-by: Chloe --- lib/apollo/apolloClient.js | 26 +++++++++++++------ lib/apollo/withApollo.js | 18 +------------ staticUtils/shop/fetchPrimaryShop.js | 13 +++++++--- .../shop/{primaryShop.js => primaryShop.gql} | 2 -- 4 files changed, 28 insertions(+), 31 deletions(-) rename staticUtils/shop/{primaryShop.js => primaryShop.gql} (97%) diff --git a/lib/apollo/apolloClient.js b/lib/apollo/apolloClient.js index c62d86f735..0c0291a111 100644 --- a/lib/apollo/apolloClient.js +++ b/lib/apollo/apolloClient.js @@ -9,10 +9,10 @@ import { omitTypenameLink } from "./omitVariableTypenameLink"; const STATUS_BAD_REQUEST = 400; /** -* Instantiate the Apollo client + * Instantiate the Apollo client * @returns {Object} a new Apollo Client instance */ -export default function createApolloClient() { +function createApolloClient() { // Config let graphqlUrl; @@ -35,7 +35,7 @@ export default function createApolloClient() { console.error(`[GraphQL error]: ${message}`, { locations, operationName: operation && operation.operationName, - path + path, }); }); } @@ -44,7 +44,9 @@ export default function createApolloClient() { const errorCode = networkError.response && networkError.response.status; if (errorCode !== STATUS_BAD_REQUEST) { // eslint-disable-next-line no-console - console.error(`Unable to access the GraphQL API. Is it running and accessible at ${graphqlUrl} from the Storefront UI server?`); + console.error( + `Unable to access the GraphQL API. Is it running and accessible at ${graphqlUrl} from the Storefront UI server?`, + ); } else { // eslint-disable-next-line no-console console.error(networkError); @@ -63,10 +65,18 @@ export default function createApolloClient() { // Check out https://github.com/zeit/next.js/pull/4611 if you want to use the AWSAppSyncClient return new ApolloClient({ ssrMode: false, - link: ApolloLink.from([omitTypenameLink, errorLink, typeof window === "undefined" ? serverLink : authLink, httpLink]), + link: ApolloLink.from([ + omitTypenameLink, + errorLink, + typeof window === "undefined" ? serverLink : authLink, + httpLink, + ]), cache: new InMemoryCache({ - typePolicies: { - } - }) + typePolicies: {}, + }), }); } + +const apolloClient = createApolloClient(); + +export default apolloClient; diff --git a/lib/apollo/withApollo.js b/lib/apollo/withApollo.js index 7fd36a762b..13a171f361 100644 --- a/lib/apollo/withApollo.js +++ b/lib/apollo/withApollo.js @@ -1,26 +1,10 @@ import React from "react"; import { ApolloProvider } from "@apollo/react-components"; import { ApolloProvider as NewApolloProvider } from "@apollo/client"; -import createApolloClient from "./apolloClient"; - -// On the client we store the apollo client in the following variable -// this prevents the client from reinitializing between page transitions. -let globalApolloClient = null; - - -const initApolloClient = () => { - // Reuse client on the client-side - if (!globalApolloClient) { - globalApolloClient = createApolloClient(); - } - - return globalApolloClient; -}; +import client from "./apolloClient"; export const withApollo = () => (PageComponent) => { const WithApollo = ({ ...pageProps }) => { - const client = initApolloClient(); - return ( diff --git a/staticUtils/shop/fetchPrimaryShop.js b/staticUtils/shop/fetchPrimaryShop.js index a0e072b567..d4a0d083ae 100644 --- a/staticUtils/shop/fetchPrimaryShop.js +++ b/staticUtils/shop/fetchPrimaryShop.js @@ -1,5 +1,5 @@ -import graphQLRequest from "staticUtils/graphQLRequest"; -import primaryShopQuery from "./primaryShop.js"; +import client from "../../lib/apollo/apolloClient"; +import primaryShopQuery from "./primaryShop.gql"; /** * Fetch the primary shop's information @@ -8,7 +8,12 @@ import primaryShopQuery from "./primaryShop.js"; * @returns {Object} The primary shop */ export default async function fetchPrimaryShop(language) { - const data = await graphQLRequest(primaryShopQuery, { language }); + const { data } = await client.query({ + query: primaryShopQuery, + variables: { + language, + }, + }); - return (data && data.primaryShop && { shop: data.primaryShop }) || { shop: null }; + return data?.primaryShop ? { shop: data.primaryShop } : { shop: null }; } diff --git a/staticUtils/shop/primaryShop.js b/staticUtils/shop/primaryShop.gql similarity index 97% rename from staticUtils/shop/primaryShop.js rename to staticUtils/shop/primaryShop.gql index b9179b904f..6f3786eb20 100644 --- a/staticUtils/shop/primaryShop.js +++ b/staticUtils/shop/primaryShop.gql @@ -1,4 +1,3 @@ -export default ` query primaryShop($language: String! = "en") { primaryShop { _id @@ -45,4 +44,3 @@ fragment NavigationItemFields on NavigationItemData { isUrlRelative shouldOpenInNewWindow } -`; From 137553a55dd80f26c8dbb266743325d3ba9cd4a7 Mon Sep 17 00:00:00 2001 From: Chloe Date: Thu, 26 May 2022 15:57:02 +0700 Subject: [PATCH 2/2] fix: eslint Signed-off-by: Chloe --- lib/apollo/apolloClient.js | 12 +++++------- lib/apollo/withApollo.js | 16 +++++++--------- staticUtils/shop/fetchPrimaryShop.js | 4 ++-- 3 files changed, 14 insertions(+), 18 deletions(-) diff --git a/lib/apollo/apolloClient.js b/lib/apollo/apolloClient.js index 0c0291a111..c017d5fb55 100644 --- a/lib/apollo/apolloClient.js +++ b/lib/apollo/apolloClient.js @@ -35,7 +35,7 @@ function createApolloClient() { console.error(`[GraphQL error]: ${message}`, { locations, operationName: operation && operation.operationName, - path, + path }); }); } @@ -44,9 +44,7 @@ function createApolloClient() { const errorCode = networkError.response && networkError.response.status; if (errorCode !== STATUS_BAD_REQUEST) { // eslint-disable-next-line no-console - console.error( - `Unable to access the GraphQL API. Is it running and accessible at ${graphqlUrl} from the Storefront UI server?`, - ); + console.error(`Unable to access the GraphQL API. Is it running and accessible at ${graphqlUrl} from the Storefront UI server?`); } else { // eslint-disable-next-line no-console console.error(networkError); @@ -69,11 +67,11 @@ function createApolloClient() { omitTypenameLink, errorLink, typeof window === "undefined" ? serverLink : authLink, - httpLink, + httpLink ]), cache: new InMemoryCache({ - typePolicies: {}, - }), + typePolicies: {} + }) }); } diff --git a/lib/apollo/withApollo.js b/lib/apollo/withApollo.js index 13a171f361..148ef25367 100644 --- a/lib/apollo/withApollo.js +++ b/lib/apollo/withApollo.js @@ -4,15 +4,13 @@ import { ApolloProvider as NewApolloProvider } from "@apollo/client"; import client from "./apolloClient"; export const withApollo = () => (PageComponent) => { - const WithApollo = ({ ...pageProps }) => { - return ( - - - - - - ); - }; + const WithApollo = ({ ...pageProps }) => ( + + + + + + ); // Set the correct displayName in development if (process.env.NODE_ENV !== "production") { diff --git a/staticUtils/shop/fetchPrimaryShop.js b/staticUtils/shop/fetchPrimaryShop.js index d4a0d083ae..ef0b7d09b4 100644 --- a/staticUtils/shop/fetchPrimaryShop.js +++ b/staticUtils/shop/fetchPrimaryShop.js @@ -11,8 +11,8 @@ export default async function fetchPrimaryShop(language) { const { data } = await client.query({ query: primaryShopQuery, variables: { - language, - }, + language + } }); return data?.primaryShop ? { shop: data.primaryShop } : { shop: null };