Merge branch '208800-step-2-2-remove-ide-gql-client-singleton' into 'master'

Step 2 - Defer IDE gql client creation

See merge request gitlab-org/gitlab!36406

app/assets/javascripts/ide/services/gql.js

+import { memoize } from 'lodash';
 import createGqClient, { fetchPolicies } from '~/lib/graphql';
 
-export default createGqClient(
-  {},
-  {
-    fetchPolicy: fetchPolicies.NO_CACHE,
-  },
+/**
+ * Returns a memoized client
+ *
+ * We defer creating the client so that importing this module does not cause any side-effects.
+ * Creating the client immediately caused issues with miragejs where the gql client uses the
+ * real fetch() instead of the shimmed one.
+ */
+const getClient = memoize(() =>
+  createGqClient(
+    {},
+    {
+      fetchPolicy: fetchPolicies.NO_CACHE,
+    },
+  ),
 );
+
+// eslint-disable-next-line import/prefer-default-export
+export const query = (...args) => getClient().query(...args);

app/assets/javascripts/ide/services/index.js

@@ -2,17 +2,15 @@ import axios from '~/lib/utils/axios_utils';
 import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
 import Api from '~/api';
 import getUserPermissions from '../queries/getUserPermissions.query.graphql';
-import gqClient from './gql';
+import { query } from './gql';
 
 const fetchApiProjectData = projectPath => Api.project(projectPath).then(({ data }) => data);
 
 const fetchGqlProjectData = projectPath =>
-  gqClient
-    .query({
-      query: getUserPermissions,
-      variables: { projectPath },
-    })
-    .then(({ data }) => data.project);
+  query({
+    query: getUserPermissions,
+    variables: { projectPath },
+  }).then(({ data }) => data.project);
 
 export default {
   getFileData(endpoint) {

spec/frontend/ide/services/index_spec.js

@@ -2,7 +2,7 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import services from '~/ide/services';
 import Api from '~/api';
-import gqClient from '~/ide/services/gql';
+import { query } from '~/ide/services/gql';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
 import getUserPermissions from '~/ide/queries/getUserPermissions.query.graphql';
 import { projectData } from '../mock_data';
@@ -207,12 +207,12 @@ describe('IDE services', () => {
         },
       };
       Api.project.mockReturnValue(Promise.resolve({ data: { ...projectData } }));
-      gqClient.query.mockReturnValue(Promise.resolve({ data: { project: gqlProjectData } }));
+      query.mockReturnValue(Promise.resolve({ data: { project: gqlProjectData } }));
 
       return services.getProjectData(TEST_NAMESPACE, TEST_PROJECT).then(response => {
         expect(response).toEqual({ data: { ...projectData, ...gqlProjectData } });
         expect(Api.project).toHaveBeenCalledWith(TEST_PROJECT_ID);
-        expect(gqClient.query).toHaveBeenCalledWith({
+        expect(query).toHaveBeenCalledWith({
           query: getUserPermissions,
           variables: {
             projectPath: TEST_PROJECT_ID,