Fix: primaryShop query is not working

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;
 
@@ -63,10 +63,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;

lib/apollo/withApollo.js

@@ -1,34 +1,16 @@
 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 (
-      <ApolloProvider client={client}>
-        <NewApolloProvider client={client}>
-          <PageComponent {...pageProps} />
-        </NewApolloProvider>
-      </ApolloProvider>
-    );
-  };
+  const WithApollo = ({ ...pageProps }) => (
+    <ApolloProvider client={client}>
+      <NewApolloProvider client={client}>
+        <PageComponent {...pageProps} />
+      </NewApolloProvider>
+    </ApolloProvider>
+  );
 
   // Set the correct displayName in development
   if (process.env.NODE_ENV !== "production") {

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 };
 }

staticUtils/shop/primaryShop.js → 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
 }
-`;