Update content block optimistically

client/src/components/content-blocks/ContentComponent.vue

@@ -35,7 +35,7 @@
   import BookmarkActions from '@/components/notes/BookmarkActions';
 
   import UPDATE_CONTENT_BOOKMARK from '@/graphql/gql/mutations/updateContentBookmark.gql';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
+  import CONTENT_BLOCK_QUERY from '@/graphql/gql/contentBlockQuery.gql';
 
   export default {
     props: ['component', 'parent', 'bookmarks', 'notes', 'root'],
@@ -90,12 +90,44 @@
               bookmarked
             }
           },
-          refetchQueries: [{
+          update: (store, response) => {
-            query: MODULE_DETAILS_QUERY,
+            const query = CONTENT_BLOCK_QUERY;
-            variables: {
+            const variables = {id: this.root};
-              slug: this.$route.params.slug
+            const data = store.readQuery({
+              query,
+              variables
+            });
+
+            const bookmarks = data.contentBlock.bookmarks;
+
+            if (bookmarked) {
+              bookmarks.push({
+                note: null,
+                uuid: uuid,
+                __typename: 'ContentBlockBookmarkNode'
+              });
+            } else {
+              let index = bookmarks.findIndex(element => {
+                return element.uuid === uuid;
+              });
+              if (index > -1) {
+                bookmarks.splice(index, 1);
+              }
             }
-          }]
+
+            data.contentBlock.bookmarks = bookmarks;
+
+            store.writeQuery({
+              data,
+              query,
+              variables
+            });
+          },
+          optimisticResponse: {
+            note: null,
+            uuid: uuid,
+            __typename: 'ContentBlockBookmarkNode'
+          }
         });
       },
     }