Merge branch...

Merge branch '198624-disable-apollo-cache-on-the-cases-where-apollo-client-is-used-within-vuex' into 'master'

Disable Apollo cache if Apollo Client is used within Vuex

Closes #198624

See merge request gitlab-org/gitlab!23768

app/assets/javascripts/lib/graphql.js

@@ -5,6 +5,14 @@ import { ApolloLink } from 'apollo-link';
 import { BatchHttpLink } from 'apollo-link-batch-http';
 import csrf from '~/lib/utils/csrf';
 
+export const fetchPolicies = {
+  CACHE_FIRST: 'cache-first',
+  CACHE_AND_NETWORK: 'cache-and-network',
+  NETWORK_ONLY: 'network-only',
+  NO_CACHE: 'no-cache',
+  CACHE_ONLY: 'cache-only',
+};
+
 export default (resolvers = {}, config = {}) => {
   let uri = `${gon.relative_url_root}/api/graphql`;
 
@@ -32,5 +40,10 @@ export default (resolvers = {}, config = {}) => {
     }),
     resolvers,
     assumeImmutableResults: config.assumeImmutableResults,
+    defaultOptions: {
+      query: {
+        fetchPolicy: config.fetchPolicy || fetchPolicies.CACHE_FIRST,
+      },
+    },
   });
 };

app/assets/javascripts/monitoring/stores/utils.js

 import { omit } from 'lodash';
-import createGqClient from '~/lib/graphql';
+import createGqClient, { fetchPolicies } from '~/lib/graphql';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 
-export const gqClient = createGqClient();
+export const gqClient = createGqClient(
+  {},
+  {
+    fetchPolicy: fetchPolicies.NO_CACHE,
+  },
+);
 
 export const uniqMetricsId = metric => `${metric.metric_id}_${metric.id}`;
 

ee/app/assets/javascripts/design_management/pages/design/index.vue

@@ -3,6 +3,7 @@ import { ApolloMutation } from 'vue-apollo';
 import Mousetrap from 'mousetrap';
 import { GlLoadingIcon, GlAlert } from '@gitlab/ui';
 import createFlash from '~/flash';
+import { fetchPolicies } from '~/lib/graphql';
 import allVersionsMixin from '../../mixins/all_versions';
 import Toolbar from '../../components/toolbar/index.vue';
 import DesignDiscussion from '../../components/design_notes/design_discussion.vue';
@@ -70,7 +71,7 @@ export default {
     },
     design: {
       query: getDesignQuery,
-      fetchPolicy: 'network-only',
+      fetchPolicy: fetchPolicies.NETWORK_ONLY,
       variables() {
         return this.designVariables;
       },
@@ -215,7 +216,7 @@ export default {
           @done="$router.push({ name: $options.DESIGNS_ROUTE_NAME })"
           @error="onDesignDeleteError"
         >
-          <template v-slot="{ mutate, loading, error }">
+          <template v-slot="{ mutate, loading }">
             <toolbar
               :id="id"
               :is-deleting="loading"

ee/app/assets/javascripts/epic/utils/epic_utils.js

@@ -3,13 +3,18 @@ import Cookies from 'js-cookie';
 
 import { __, s__, sprintf } from '~/locale';
 
-import createGqClient from '~/lib/graphql';
+import createGqClient, { fetchPolicies } from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import { dateInWords, parsePikadayDate } from '~/lib/utils/datetime_utility';
 
 import { dateTypes } from '../constants';
 
-const gqClient = createGqClient();
+const gqClient = createGqClient(
+  {},
+  {
+    fetchPolicy: fetchPolicies.NO_CACHE,
+  },
+);
 
 const triggerDocumentEvent = (eventName, eventParam) => {
   $(document).trigger(eventName, eventParam);

ee/app/assets/javascripts/related_items_tree/store/actions.js

@@ -75,10 +75,7 @@ export const receiveItemsFailure = ({ commit }, data) => {
   flash(s__('Epics|Something went wrong while fetching child epics.'));
   commit(types.RECEIVE_ITEMS_FAILURE, data);
 };
-export const fetchItems = (
-  { dispatch },
-  { parentItem, isSubItem = false, fetchPolicy = 'cache-first' },
-) => {
+export const fetchItems = ({ dispatch }, { parentItem, isSubItem = false }) => {
   const { iid, fullPath } = parentItem;
 
   dispatch('requestItems', {
@@ -90,7 +87,6 @@ export const fetchItems = (
     .query({
       query: epicChildren,
       variables: { iid, fullPath },
-      fetchPolicy,
     })
     .then(({ data }) => {
       const children = processQueryResponse(data.group);
@@ -458,7 +454,6 @@ export const createNewIssue = ({ state, dispatch }, { issuesEndpoint, title }) =
     .then(() =>
       dispatch('fetchItems', {
         parentItem,
-        fetchPolicy: 'network-only',
       }),
     )
     .catch(e => {

ee/app/assets/javascripts/related_items_tree/utils/epic_utils.js

 import { PathIdSeparator } from 'ee/related_issues/constants';
-import createGqClient from '~/lib/graphql';
+import createGqClient, { fetchPolicies } from '~/lib/graphql';
 
 import { ChildType } from '../constants';
 
-export const gqClient = createGqClient();
+export const gqClient = createGqClient(
+  {},
+  {
+    fetchPolicy: fetchPolicies.NO_CACHE,
+  },
+);
 
 /**
  * Returns a numeric representation of item

ee/app/assets/javascripts/roadmap/utils/epic_utils.js

 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { newDate, parsePikadayDate } from '~/lib/utils/datetime_utility';
-import createGqClient from '~/lib/graphql';
+import createGqClient, { fetchPolicies } from '~/lib/graphql';
 
-export const gqClient = createGqClient();
+export const gqClient = createGqClient(
+  {},
+  {
+    fetchPolicy: fetchPolicies.NO_CACHE,
+  },
+);
 
 /**
  * Updates provided `epic` object with necessary props

ee/spec/frontend/related_items_tree/utils/epic_utils_spec.js

@@ -9,8 +9,6 @@ import {
   mockIssue1,
 } from '../../../javascripts/related_items_tree/mock_data';
 
-jest.mock('~/lib/graphql', () => jest.fn());
-
 describe('RelatedItemsTree', () => {
   describe('epicUtils', () => {
     describe('sortChildren', () => {