Use slug to identify modules for the bookmark mutation

client/src/components/modules/Module.vue

@@ -39,7 +39,7 @@
   import UPDATE_MODULE_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateModuleBookmark.gql';
   import OBJECTIVE_QUERY from '@/graphql/gql/objectiveQuery.gql';
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
-  import MODULE_QUERY from '@/graphql/gql/moduleByIdQuery.gql';
+  import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql';
 
   import {withoutOwnerFirst} from '@/helpers/sorting';
   import BookmarkActions from '@/components/notes/BookmarkActions';
@@ -133,40 +133,36 @@
         })
       },
       bookmark(bookmarked) {
-        const id = this.module.id;
+        const slug = this.module.slug;
         this.$apollo.mutate({
           mutation: UPDATE_MODULE_BOOKMARK_MUTATION,
           variables: {
             input: {
-              module: id,
+              module: slug,
               bookmarked
             }
           },
           update: (store, response) => {
-            const query = MODULE_QUERY;
-            const variables = {id};
-            const data = store.readQuery({
-              query,
-              variables
+            const fragment = MODULE_FRAGMENT;
+            const id = `ModuleNode:${slug}`;
+            const data = store.readFragment({
+              fragment,
+              id
             });
 
-            const module = data.module;
-
             if (bookmarked) {
-              module.bookmark = {
+              data.bookmark = {
                 __typename: 'ModuleBookmarkNode',
                 note: null
               }
             } else {
-              module.bookmark = null;
+              data.bookmark = null;
             }
 
-            data.module = module;
-
-            store.writeQuery({
+            store.writeFragment({
               data,
-              query,
-              variables
+              fragment,
+              id
             });
           },
           optimisticResponse: {

client/src/graphql/client.js

@@ -46,6 +46,7 @@ export default function (uri) {
     dataIdFromObject: obj => {
       switch (obj.__typename) {
         case 'InstrumentNode':
+        case 'ModuleNode':
           return `${obj.__typename}:${obj.slug}`;
         default:
           return defaultDataIdFromObject(obj);

server/notes/mutations.py

@@ -155,7 +155,7 @@ class UpdateChapterBookmark(relay.ClientIDMutation):
 
 class UpdateModuleBookmark(relay.ClientIDMutation):
     class Input:
-        module = graphene.ID(required=True)
+        module = graphene.String(required=True)
         bookmarked = graphene.Boolean(required=True)
 
     success = graphene.Boolean()
@@ -163,10 +163,10 @@ class UpdateModuleBookmark(relay.ClientIDMutation):
     @classmethod
     def mutate_and_get_payload(cls, root, info, **kwargs):
         user = info.context.user
-        module_id = kwargs.get('module')
+        module_slug = kwargs.get('module')
         bookmarked = kwargs.get('bookmarked')
 
-        module = get_object(Module, module_id)
+        module = Module.objects.get(slug=module_slug)
 
         if bookmarked:
             ModuleBookmark.objects.create(