Add etag caching for pipeline status in pipeline editor

We will use etag caching for the pipeline status so we don't have to
send full requests to get the updated pipeline status each time.

app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue

@@ -11,6 +11,7 @@ import commitCIFile from '../../graphql/mutations/commit_ci_file.mutation.graphq
 import getCommitSha from '../../graphql/queries/client/commit_sha.graphql';
 import getCurrentBranch from '../../graphql/queries/client/current_branch.graphql';
 import getIsNewCiConfigFile from '../../graphql/queries/client/is_new_ci_config_file.graphql';
+import getPipelineEtag from '../../graphql/queries/client/pipeline_etag.graphql';
 
 import CommitForm from './commit_form.vue';
 
@@ -94,10 +95,15 @@ export default {
           },
           update(store, { data }) {
             const commitSha = data?.commitCreate?.commit?.sha;
+            const pipelineEtag = data?.commitCreate?.commit?.commitPipelinePath;
 
             if (commitSha) {
               store.writeQuery({ query: getCommitSha, data: { commitSha } });
             }
+
+            if (pipelineEtag) {
+              store.writeQuery({ query: getPipelineEtag, data: { pipelineEtag } });
+            }
           },
         });
 

app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue

@@ -5,7 +5,11 @@ import { truncateSha } from '~/lib/utils/text_utility';
 import { s__ } from '~/locale';
 import getCommitSha from '~/pipeline_editor/graphql/queries/client/commit_sha.graphql';
 import getPipelineQuery from '~/pipeline_editor/graphql/queries/client/pipeline.graphql';
-import { toggleQueryPollingByVisibility } from '~/pipelines/components/graph/utils';
+import getPipelineEtag from '~/pipeline_editor/graphql/queries/client/pipeline_etag.graphql';
+import {
+  getQueryHeaders,
+  toggleQueryPollingByVisibility,
+} from '~/pipelines/components/graph/utils';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 const POLL_INTERVAL = 10000;
@@ -31,7 +35,13 @@ export default {
     commitSha: {
       query: getCommitSha,
     },
+    pipelineEtag: {
+      query: getPipelineEtag,
+    },
     pipeline: {
+      context() {
+        return getQueryHeaders(this.pipelineEtag);
+      },
       query: getPipelineQuery,
       variables() {
         return {

app/assets/javascripts/pipeline_editor/graphql/mutations/commit_ci_file.mutation.graphql

@@ -22,6 +22,7 @@ mutation commitCIFile(
     commit {
       sha
     }
+    commitPipelinePath
     errors
   }
 }

app/assets/javascripts/pipeline_editor/graphql/queries/client/pipeline_etag.graphql

+query getPipelineEtag {
+  pipelineEtag @client
+}

app/assets/javascripts/pipeline_editor/index.js

@@ -6,6 +6,7 @@ import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
 import { CODE_SNIPPET_SOURCE_SETTINGS } from './components/code_snippet_alert/constants';
 import getCommitSha from './graphql/queries/client/commit_sha.graphql';
 import getCurrentBranch from './graphql/queries/client/current_branch.graphql';
+import getPipelineEtag from './graphql/queries/client/pipeline_etag.graphql';
 import { resolvers } from './graphql/resolvers';
 import typeDefs from './graphql/typedefs.graphql';
 import PipelineEditorApp from './pipeline_editor_app.vue';
@@ -26,6 +27,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     // Add to apollo cache as it can be updated by future queries
     commitSha,
     initialBranchName,
+    pipelineEtag,
     // Add to provide/inject API for static values
     ciConfigPath,
     defaultBranch,
@@ -48,7 +50,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
   Vue.use(VueApollo);
 
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(resolvers, { typeDefs }),
+    defaultClient: createDefaultClient(resolvers, { typeDefs, useGet: true }),
   });
   const { cache } = apolloProvider.clients.defaultClient;
 
@@ -66,6 +68,13 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     },
   });
 
+  cache.writeQuery({
+    query: getPipelineEtag,
+    data: {
+      pipelineEtag,
+    },
+  });
+
   return new Vue({
     el,
     apolloProvider,

app/helpers/ci/pipeline_editor_helper.rb

@@ -9,14 +9,16 @@ module Ci
     end
 
     def js_pipeline_editor_data(project)
+      commit_sha = project.commit ? project.commit.sha : ''
       {
         "ci-config-path": project.ci_config_path_or_default,
-        "commit-sha" => project.commit ? project.commit.sha : '',
+        "commit-sha" => commit_sha,
         "default-branch" => project.default_branch,
         "empty-state-illustration-path" => image_path('illustrations/empty-state/empty-dag-md.svg'),
         "initial-branch-name": params[:branch_name],
         "lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
         "new-merge-request-path" => namespace_project_new_merge_request_path,
+        "pipeline_etag" => graphql_etag_pipeline_sha_path(project.commit.sha),
         "project-path" => project.path,
         "project-full-path" => project.full_path,
         "project-namespace" => project.namespace.full_path,

spec/helpers/ci/pipeline_editor_helper_spec.rb

@@ -45,6 +45,7 @@ RSpec.describe Ci::PipelineEditorHelper do
         "initial-branch-name": nil,
         "lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
         "new-merge-request-path" => '/mock/project/-/merge_requests/new',
+        "pipeline_etag" => graphql_etag_pipeline_sha_path(project.commit.sha),
         "project-path" => project.path,
         "project-full-path" => project.full_path,
         "project-namespace" => project.namespace.full_path,