Use slug to identify instruments on client

client/src/graphql/client.js

@@ -1,4 +1,4 @@
-import {InMemoryCache} from 'apollo-cache-inmemory/lib/index'
+import {InMemoryCache, defaultDataIdFromObject} from 'apollo-cache-inmemory/lib/index'
 import {createHttpLink} from 'apollo-link-http'
 import {ApolloClient} from 'apollo-client'
 import {ApolloLink} from 'apollo-link'
@@ -43,6 +43,14 @@ export default function (uri) {
   const composedLink = ApolloLink.from([createOmitTypenameLink, consoleLink, httpLink]);
 
   const cache = new InMemoryCache({
+    dataIdFromObject: obj => {
+      switch (obj.__typename) {
+        case 'InstrumentNode':
+          return `${obj.__typename}:${obj.slug}`;
+        default:
+          return defaultDataIdFromObject(obj);
+      }
+    },
     cacheRedirects: {
       Query: {
         contentBlock: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ContentBlockNode', id: args.id}),
@@ -51,9 +59,8 @@ export default function (uri) {
         objective: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ObjectiveNode', id: args.id}),
         objectiveGroup: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ObjectiveGroupNode', id: args.id}),
         // todo: remove, the new client seems to cache this correctly by itself
-        // module: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ModuleNode', id: args.id}),
+        // module: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ModuleNode', id: args.slug}),
         projectEntry: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ProjectEntryNode', id: args.id}),
-        instrument: (_, args, {getCacheKey}) => getCacheKey({__typename: 'InstrumentNode', id: args.id}),
       }
     }
   });

client/src/helpers/update-content-bookmark-mutation.js

@@ -1,11 +1,11 @@
 import UPDATE_CONTENT_BOOKMARK from '@/graphql/gql/mutations/updateContentBookmark.gql';
 import UPDATE_INSTRUMENT_BOOKMARK from '@/graphql/gql/mutations/updateInstrumentBookmark.gql';
 import CONTENT_BLOCK_QUERY from '@/graphql/gql/contentBlockQuery.gql';
-import INSTRUMENT_QUERY from '@/graphql/gql/instrumentQueryById.gql';
+import INSTRUMENT_FRAGMENT from '@/graphql/gql/fragments/instrumentParts.gql';
 
 export const constructContentComponentBookmarkMutation = (uuid, bookmarked, parent, root) => {
   let mutation = {};
-  console.log(uuid, bookmarked, parent, root);
+
   if (parent.__typename === 'ContentBlockNode') {
     mutation = {
       mutation: UPDATE_CONTENT_BOOKMARK,
@@ -68,14 +68,14 @@ export const constructContentComponentBookmarkMutation = (uuid, bookmarked, pare
         }
       },
       update: (store, response) => {
-        const query = INSTRUMENT_QUERY;
+        const fragment = INSTRUMENT_FRAGMENT;
-        const variables = {id: root};
+        const id = `InstrumentNode:${root}`;
-        const data = store.readQuery({
+        const data = store.readFragment({
-          query,
+          fragment,
-          variables
+          id
         });
 
-        const bookmarks = data.instrument.bookmarks;
+        const bookmarks = data.bookmarks;
 
         if (bookmarked) {
           bookmarks.push({
@@ -92,12 +92,12 @@ export const constructContentComponentBookmarkMutation = (uuid, bookmarked, pare
           }
         }
 
-        data.instrument.bookmarks = bookmarks;
+        data.bookmarks = bookmarks;
 
-        store.writeQuery({
+        store.writeFragment({
           data,
-          query,
+          fragment,
-          variables
+          id
         });
       },
       optimisticResponse: {

client/src/pages/instrument.vue

@@ -5,7 +5,7 @@
       <content-component v-for="component in instrument.contents"
                          :key="component.id"
                          :component="component"
-                         :root="instrument.id"
+                         :root="instrument.slug"
                          :parent="instrument"
                          :bookmarks="instrument.bookmarks"
                          :notes="instrument.notes"