Use GraphQL ETag caching on frontend

Use GraphQL ETag caching on frontend

app/assets/javascripts/lib/graphql.js

@@ -3,6 +3,7 @@ import { ApolloClient } from 'apollo-client';
 import { ApolloLink } from 'apollo-link';
 import { BatchHttpLink } from 'apollo-link-batch-http';
 import { createUploadLink } from 'apollo-upload-client';
+import { createHttpLink } from 'apollo-link-http';
 import { StartupJSLink } from '~/lib/utils/apollo_startup_js_link';
 import csrf from '~/lib/utils/csrf';
 import PerformanceBarService from '~/performance_bar/services/performance_bar_service';
@@ -48,7 +49,7 @@ export default (resolvers = {}, config = {}) => {
   const uploadsLink = ApolloLink.split(
     (operation) => operation.getContext().hasUpload || operation.getContext().isSingleRequest,
     createUploadLink(httpOptions),
-    new BatchHttpLink(httpOptions),
+    config.useGet ? createHttpLink(httpOptions) : new BatchHttpLink(httpOptions),
   );
 
   const performanceBarLink = new ApolloLink((operation, forward) => {

app/assets/javascripts/pipelines/components/graph/graph_component_wrapper.vue

@@ -38,6 +38,18 @@ export default {
   },
   apollo: {
     pipeline: {
+      context() {
+        return {
+          fetchOptions: {
+            method: 'GET',
+          },
+          headers: {
+            'X-GITLAB-GRAPHQL-FEATURE-CORRELATION': 'verify/ci/pipeline-graph',
+            'X-GITLAB-GRAPHQL-RESOURCE-ETAG': `pipelines/id/${this.pipelineIid}`,
+            'X-REQUESTED_WITH': 'XMLHttpRequest',
+          },
+        }
+      },
       query: getPipelineDetails,
       pollInterval: 10000,
       variables() {
@@ -49,7 +61,8 @@ export default {
       update(data) {
         return unwrapPipelineData(this.pipelineProjectPath, data);
       },
-      error() {
+      error(err) {
+        console.log(err);
         this.reportFailure(LOAD_FAILURE);
       },
     },

app/assets/javascripts/pipelines/components/graph/linked_pipelines_column.vue

@@ -72,6 +72,15 @@ export default {
       this.$apollo.addSmartQuery('currentPipeline', {
         query: getPipelineDetails,
         pollInterval: 10000,
+        context: {
+          fetchOptions: {
+            method: 'GET',
+          },
+          headers: {
+            'X-GITLAB-GRAPHQL-FEATURE-CORRELATION': 'verify/ci/pipeline-graph',
+            'X-GITLAB-GRAPHQL-RESOURCE-ETAG': 'pipelines/id/123',
+          },
+        },
         variables() {
           return {
             projectPath,

app/assets/javascripts/pipelines/pipeline_details_graph.js

@@ -11,7 +11,7 @@ const apolloProvider = new VueApollo({
   defaultClient: createDefaultClient(
     {},
     {
-      batchMax: 2,
+      useGet: true,
     },
   ),
 });

package.json

@@ -68,6 +68,7 @@
     "apollo-client": "^2.6.10",
     "apollo-link": "^1.2.14",
     "apollo-link-batch-http": "^1.2.14",
+    "apollo-link-http": "^1.5.17",
     "apollo-upload-client": "^13.0.0",
     "autosize": "^4.0.2",
     "aws-sdk": "^2.637.0",

yarn.lock

@@ -1977,6 +1977,15 @@ apollo-link-http-common@^0.2.14, apollo-link-http-common@^0.2.16:
     ts-invariant "^0.4.0"
     tslib "^1.9.3"
 
+apollo-link-http@^1.5.17:
+  version "1.5.17"
+  resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.5.17.tgz#499e9f1711bf694497f02c51af12d82de5d8d8ba"
+  integrity sha512-uWcqAotbwDEU/9+Dm9e1/clO7hTB2kQ/94JYcGouBVLjoKmTeJTUPQKcJGpPwUjZcSqgYicbFqQSoJIW0yrFvg==
+  dependencies:
+    apollo-link "^1.2.14"
+    apollo-link-http-common "^0.2.16"
+    tslib "^1.9.3"
+
 apollo-link@^1.0.0, apollo-link@^1.2.12, apollo-link@^1.2.14:
   version "1.2.14"
   resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.14.tgz#3feda4b47f9ebba7f4160bef8b977ba725b684d9"