1 files changed, 33 insertions, 1 deletions
diff --git a/app/assets/javascripts/repository/graphql.js b/app/assets/javascripts/repository/graphql.js
index febfcce780c..c64d16ef02a 100644
--- a/app/assets/javascripts/repository/graphql.js
+++ b/app/assets/javascripts/repository/graphql.js
@@ -1,10 +1,42 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
 import createDefaultClient from '~/lib/graphql';
+import introspectionQueryResultData from './fragmentTypes.json';
 
 Vue.use(VueApollo);
 
-const defaultClient = createDefaultClient({});
+// We create a fragment matcher so that we can create a fragment from an interface
+// Without this, Apollo throws a heuristic fragment matcher warning
+const fragmentMatcher = new IntrospectionFragmentMatcher({
+  introspectionQueryResultData,
+});
+
+const defaultClient = createDefaultClient(
+  {},
+  {
+    cacheConfig: {
+      fragmentMatcher,
+      dataIdFromObject: obj => {
+        // eslint-disable-next-line no-underscore-dangle
+        switch (obj.__typename) {
+          // We need to create a dynamic ID for each entry
+          // Each entry can have the same ID as the ID is a commit ID
+          // So we create a unique cache ID with the path and the ID
+          case 'TreeEntry':
+          case 'Submodule':
+          case 'Blob':
+            return `${obj.flatPath}-${obj.id}`;
+          default:
+            // If the type doesn't match any of the above we fallback
+            // to using the default Apollo ID
+            // eslint-disable-next-line no-underscore-dangle
+            return obj.id || obj._id;
+        }
+      },
+    },
+  },
+);
 
 export default new VueApollo({
   defaultClient,