Pipeline Graph Structural Update: Unify Apollo Providers

app/assets/javascripts/pipelines/components/header_component.vue

@@ -8,6 +8,7 @@ import cancelPipelineMutation from '../graphql/mutations/cancel_pipeline.mutatio
 import deletePipelineMutation from '../graphql/mutations/delete_pipeline.mutation.graphql';
 import retryPipelineMutation from '../graphql/mutations/retry_pipeline.mutation.graphql';
 import getPipelineQuery from '../graphql/queries/get_pipeline_header_data.query.graphql';
+import { getQueryHeaders } from './graph/utils';
 
 const DELETE_MODAL_ID = 'pipeline-delete-modal';
 const POLL_INTERVAL = 10000;
@@ -34,7 +35,9 @@ export default {
     [DEFAULT]: __('An unknown error occurred.'),
   },
   inject: {
-    // Receive `fullProject` and `pipelinesPath`
+    graphqlResourceEtag: {
+      default: '',
+    },
     paths: {
       default: {},
     },
@@ -47,6 +50,9 @@ export default {
   },
   apollo: {
     pipeline: {
+      context() {
+        return getQueryHeaders(this.graphqlResourceEtag);
+      },
       query: getPipelineQuery,
       variables() {
         return {

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -7,6 +7,7 @@ import { reportToSentry } from './components/graph/utils';
 import TestReports from './components/test_reports/test_reports.vue';
 import GraphBundleMixin from './mixins/graph_pipeline_bundle_mixin';
 import createDagApp from './pipeline_details_dag';
+import { apolloProvider } from './pipeline_shared_client';
 import createTestReportsStore from './stores/test_reports';
 
 Vue.use(Translate);
@@ -80,7 +81,7 @@ const createTestDetails = () => {
 
 export default async function initPipelineDetailsBundle() {
   createTestDetails();
-  createDagApp();
+  createDagApp(apolloProvider);
 
   const canShowNewPipelineDetails =
     gon.features.graphqlPipelineDetails || gon.features.graphqlPipelineDetailsUsers;
@@ -93,7 +94,7 @@ export default async function initPipelineDetailsBundle() {
         /* webpackChunkName: 'createPipelinesDetailApp' */ './pipeline_details_graph'
       );
 
-      createPipelinesDetailApp(SELECTORS.PIPELINE_GRAPH, dataset);
+      createPipelinesDetailApp(SELECTORS.PIPELINE_GRAPH, apolloProvider, dataset);
     } catch {
       Flash(__('An error occurred while loading the pipeline.'));
     }
@@ -111,7 +112,7 @@ export default async function initPipelineDetailsBundle() {
     const { createPipelineHeaderApp } = await import(
       /* webpackChunkName: 'createPipelineHeaderApp' */ './pipeline_details_header'
     );
-    createPipelineHeaderApp(SELECTORS.PIPELINE_HEADER);
+    createPipelineHeaderApp(SELECTORS.PIPELINE_HEADER, apolloProvider, dataset.graphqlResourceEtag);
   } catch {
     Flash(__('An error occurred while loading a section of this page.'));
   }

app/assets/javascripts/pipelines/pipeline_details_dag.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import createDefaultClient from '~/lib/graphql';
 import Dag from './components/dag/dag.vue';
 
 Vue.use(VueApollo);
 
-const apolloProvider = new VueApollo({
-  defaultClient: createDefaultClient(),
-});
-
-const createDagApp = () => {
+const createDagApp = (apolloProvider) => {
   const el = document.querySelector('#js-pipeline-dag-vue');
 
   if (!el) {

app/assets/javascripts/pipelines/pipeline_details_graph.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import createDefaultClient from '~/lib/graphql';
 import { GRAPHQL } from './components/graph/constants';
 import PipelineGraphWrapper from './components/graph/graph_component_wrapper.vue';
 import { reportToSentry } from './components/graph/utils';
 
 Vue.use(VueApollo);
 
-const apolloProvider = new VueApollo({
-  defaultClient: createDefaultClient(
-    {},
-    {
-      useGet: true,
-    },
-  ),
-});
-
 const createPipelinesDetailApp = (
   selector,
+  apolloProvider,
   { pipelineProjectPath, pipelineIid, metricsPath, graphqlResourceEtag } = {},
 ) => {
   // eslint-disable-next-line no-new

app/assets/javascripts/pipelines/pipeline_details_header.js

 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
-import createDefaultClient from '~/lib/graphql';
 import pipelineHeader from './components/header_component.vue';
 
 Vue.use(VueApollo);
 
-const apolloProvider = new VueApollo({
-  defaultClient: createDefaultClient(),
-});
-
-export const createPipelineHeaderApp = (elSelector) => {
+export const createPipelineHeaderApp = (elSelector, apolloProvider, graphqlResourceEtag) => {
   const el = document.querySelector(elSelector);
 
   if (!el) {
@@ -27,6 +22,7 @@ export const createPipelineHeaderApp = (elSelector) => {
     provide: {
       paths: {
         fullProject: fullPath,
+        graphqlResourceEtag,
         pipelinesPath,
       },
       pipelineId,

app/assets/javascripts/pipelines/pipeline_shared_client.js

+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+
+export const apolloProvider = new VueApollo({
+  defaultClient: createDefaultClient(
+    {},
+    {
+      useGet: true,
+    },
+  ),
+});