Fix cache bug

Fixes MS-507

client/src/components/toggle-menu/ToggleSolutionsForModule.vue

@@ -16,20 +16,20 @@
 
   export default {
     components: {
-      Checkbox
+      Checkbox,
     },
 
     apollo: {
       me: meQuery,
-      module: moduleQuery
+      module: moduleQuery,
     },
 
     data() {
       return {
         me: {
-          permissions: []
+          permissions: [],
         },
-        module: {}
+        module: {},
       };
     },
 
@@ -39,7 +39,7 @@
       },
       slug() {
         return this.$route.params.slug;
-      }
+      },
     },
 
     methods: {
@@ -50,20 +50,29 @@
           variables: {
             input: {
               slug,
-              enabled
+              enabled,
-            }
+            },
           },
           update(store, {data: {updateSolutionVisibility: {success, solutionsEnabled}}}) {
             if (success) {
-              const id = `ModuleNode:${slug}`;
+              // according to the documentation, this should be
+              // const id = `ModuleNode:${slug}`;
+              // see: https://www.apollographql.com/docs/react/caching/cache-interaction/#readfragment
+              // but in the actual cache, it's found like this
+              const id = `ModuleNode:{"slug":"${slug}"}`;
+              // there's an open issue on Stackoverflow here
+              // https://stackoverflow.com/questions/70264586/apollo-client-readfragment-with-custom-id-keyfields
               const fragment = MODULE_FRAGMENT;
-              const data = store.readFragment({fragment, id});
+              const module = store.readFragment({fragment, id});
-              data.solutionsEnabled = solutionsEnabled;
+              const data = {
+                solutionsEnabled,
+                ...module,
+              };
               store.writeFragment({fragment, data, id});
             }
-          }
+          },
         });
-      }
+      },
     },
   };
 </script>