fix: avoid loading application menu data using useLazyQuery, update t…

…o apollo `3.5.10` (#2511)

.changeset/moody-cougars-lay.md

@@ -0,0 +1,7 @@
+---
+'merchant-center-application-template-starter': patch
+'@commercetools-frontend/application-shell': patch
+'@commercetools-frontend/application-shell-connectors': patch
+---
+
+Avoid using `useLazyQuery` to load application menu data. This allows us to update the `@apollo/client` version to `>3.5.7`, as the [issue](https://github.com/apollographql/apollo-client/issues/9375) with `useLazyQuery` and `fetchPolicy` does not seem to be fixed by Apollo any time soon.

application-templates/starter/package.json

@@ -19,7 +19,7 @@
     "versions:uikit": "manypkg upgrade @commercetools-uikit"
   },
   "dependencies": {
-    "@apollo/client": "3.5.7",
+    "@apollo/client": "3.5.10",
     "@commercetools-frontend/actions-global": "21.0.0",
     "@commercetools-frontend/application-components": "21.2.0",
     "@commercetools-frontend/application-shell": "21.2.0",

packages/application-shell-connectors/package.json

@@ -35,7 +35,7 @@
     "prop-types": "15.8.1"
   },
   "devDependencies": {
-    "@apollo/client": "3.5.7",
+    "@apollo/client": "3.5.10",
     "@testing-library/react": "12.1.2",
     "react": "17.0.2"
   },

packages/application-shell/package.json

@@ -103,7 +103,7 @@
     "uuid": "8.3.2"
   },
   "devDependencies": {
-    "@apollo/client": "3.5.7",
+    "@apollo/client": "3.5.10",
     "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
     "msw": "0.36.5",

packages/application-shell/src/hooks/use-applications-menu/use-applications-menu.ts

@@ -10,10 +10,10 @@ import type {
   TFetchApplicationsMenuQueryVariables,
 } from '../../types/generated/proxy';
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useApolloClient } from '@apollo/client';
 import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
-import { useMcLazyQuery } from '../../hooks/apollo-hooks';
+import { useMcQuery } from '../../hooks/apollo-hooks';
 import FetchApplicationsMenu from './fetch-applications-menu.proxy.graphql';
 
 const supportedLocales = ['en', 'de', 'es', 'fr-FR', 'zh-CN', 'ja'];
@@ -153,18 +153,25 @@ function useApplicationsMenu<Key extends MenuKey>(
     (context) => context.environment.mcProxyApiUrl
   );
 
+  const [hasWrittenToCache, setHasWrittenToCache] = useState(false);
+
   // Fetch all menu links from the GraphQL API in the Merchant Center Proxy.
   // For local development, we don't fetch data from the remote server but use
   // only the configuration for the menu links defined for the application.
   // To do so, we manually write the data in the Apollo cache and use the
   // `fetchPolicy: cache-only` to instruct Apollo to read the data from the cache.
-  // NOTE: we lazily execute the query to ensure that (for development) we can
-  // write the data into the cache BEFORE the query attempts to read from it.
-  // If not, Apollo throws an error like `Can't find field 'applicationMenu' on ROOT_QUERY object`.
-  const [executeQuery, { data: menuQueryResult, called }] = useMcLazyQuery<
+  // NOTE: In development, we skip the query as long as the data hasn't been written
+  // into the cache. If not, Apollo throws an error like
+  // `Can't find field 'applicationMenu' on ROOT_QUERY object`.
+  const { data: menuQueryResult } = useMcQuery<
     TFetchApplicationsMenuQuery,
     TFetchApplicationsMenuQueryVariables
   >(FetchApplicationsMenu, {
+    skip: config.environment.servedByProxy
+      ? // Production environment
+        false
+      : // Development environment
+        !hasWrittenToCache,
     onError: config.queryOptions?.onError,
     fetchPolicy: config.environment.servedByProxy
       ? 'cache-first'
@@ -183,7 +190,8 @@ function useApplicationsMenu<Key extends MenuKey>(
       config.environment.__DEVELOPMENT__ &&
       (config.environment.__DEVELOPMENT__.menuLinks ||
         // @ts-expect-error: the `accountLinks` is not explicitly typed as it's only used by the account app.
-        config.environment.__DEVELOPMENT__.accountLinks)
+        config.environment.__DEVELOPMENT__.accountLinks) &&
+      !hasWrittenToCache
     ) {
       const applicationMenu = mapApplicationMenuConfigToGraqhQLQueryResult(
         config.environment
@@ -192,13 +200,11 @@ function useApplicationsMenu<Key extends MenuKey>(
         query: FetchApplicationsMenu,
         data: applicationMenu,
       });
-    }
 
-    if (!called) {
-      executeQuery();
+      setHasWrittenToCache(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Make sure to run this effect only once, otherwise we might end up in an infinite loop!
+  }, [hasWrittenToCache]); // Only subscribe to state changes.
 
   if (menuQueryResult && menuQueryResult.applicationsMenu) {
     return menuQueryResult.applicationsMenu[menuKey] as MenuLoaderResult<Key>;

yarn.lock

@@ -24,9 +24,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@apollo/client@npm:3.5.7":
-  version: 3.5.7
-  resolution: "@apollo/client@npm:3.5.7"
+"@apollo/client@npm:3.5.10":
+  version: 3.5.10
+  resolution: "@apollo/client@npm:3.5.10"
   dependencies:
     "@graphql-typed-document-node/core": ^3.0.0
     "@wry/context": ^0.6.0
@@ -42,14 +42,17 @@ __metadata:
     zen-observable-ts: ^1.2.0
   peerDependencies:
     graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    graphql-ws: ^5.5.5
     react: ^16.8.0 || ^17.0.0
     subscriptions-transport-ws: ^0.9.0 || ^0.11.0
   peerDependenciesMeta:
+    graphql-ws:
+      optional: true
     react:
       optional: true
     subscriptions-transport-ws:
       optional: true
-  checksum: ddecf62b4bf402948892bf993d58933432fc743b6859ef557fcd137e9b9398c081279dce75e037396f9b22fd54bf578cb88819b4b55bd5e2c30428f100c519b6
+  checksum: 0228b9de82e1f25b4d63439944f81675579db2fc33eead06c62c603f3d48e8b6dae7d41232a754b03b3b8290b13ca8cdcea9962948cc1991ccefe4d16d942e7f
   languageName: node
   linkType: hard
 
@@ -2256,7 +2259,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@commercetools-frontend/application-shell-connectors@workspace:packages/application-shell-connectors"
   dependencies:
-    "@apollo/client": 3.5.7
+    "@apollo/client": 3.5.10
     "@babel/runtime": ^7.16.7
     "@babel/runtime-corejs3": ^7.16.8
     "@commercetools-frontend/constants": 21.0.0
@@ -2281,7 +2284,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@commercetools-frontend/application-shell@workspace:packages/application-shell"
   dependencies:
-    "@apollo/client": 3.5.7
+    "@apollo/client": 3.5.10
     "@babel/runtime": ^7.16.7
     "@babel/runtime-corejs3": ^7.16.8
     "@commercetools-frontend/actions-global": 21.0.0
@@ -22817,7 +22820,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "merchant-center-application-template-starter@workspace:application-templates/starter"
   dependencies:
-    "@apollo/client": 3.5.7
+    "@apollo/client": 3.5.10
     "@commercetools-frontend/actions-global": 21.0.0
     "@commercetools-frontend/application-components": 21.2.0
     "@commercetools-frontend/application-shell": 21.2.0