Use the GQL cache for local state

client/src/graphql/client.js

@@ -1,11 +1,13 @@
 import {InMemoryCache} from 'apollo-cache-inmemory/lib/index'
-import {HttpLink} from 'apollo-link-http/lib/index'
-import {ApolloClient} from 'apollo-client/index'
+import {createHttpLink} from 'apollo-link-http'
+import {ApolloClient} from 'apollo-client'
 import {ApolloLink} from 'apollo-link'
 import fetch from 'unfetch'
+import {typeDefs} from '@/graphql/typedefs';
+import {resolvers} from '@/graphql/resolvers';
 
 export default function (uri) {
-  const httpLink = new HttpLink({
+  const httpLink = createHttpLink({
     // uri: process.env.NODE_ENV !== 'production' ? 'http://localhost:8000/api/graphql/' : '/api/graphql/',
     uri,
     credentials: 'include',
@@ -48,7 +50,8 @@ export default function (uri) {
         assignment: (_, args, {getCacheKey}) => getCacheKey({__typename: 'AssignmentNode', id: args.id}),
         objective: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ObjectiveNode', id: args.id}),
         objectiveGroup: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ObjectiveGroupNode', id: args.id}),
-        module: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ModuleNode', id: args.id}),
+        // todo: remove, the new client seems to cache this correctly by itself
+        // module: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ModuleNode', id: args.id}),
         projectEntry: (_, args, {getCacheKey}) => getCacheKey({__typename: 'ProjectEntryNode', id: args.id}),
       }
     }
@@ -66,11 +69,23 @@ export default function (uri) {
     }
   };
 
+  // we use the cache as our local state
+  cache.writeData({
+    data: {
+      scrollPosition: {
+        __typename: 'ScrollPosition',
+        scrollTo: ''
+      }
+    }
+  });
+
   // Create the apollo client
   return new ApolloClient({
     link: composedLink,
     // link: httpLink,
-    cache: cache,
-    connectToDevTools: true
+    cache,
+    connectToDevTools: true,
+    typeDefs,
+    resolvers
   })
 }

client/src/graphql/resolvers.js

@@ -0,0 +1,12 @@
+import SCROLL_POSITION from '@/graphql/gql/local/scrollPosition.gql';
+
+export const resolvers = {
+  Mutation: {
+    scrollTo: (_, {scrollTo}, {cache}) => {
+      const data = cache.readQuery({query: SCROLL_POSITION});
+      data.scrollPosition.scrollTo = scrollTo;
+      cache.writeQuery({query: SCROLL_POSITION, data});
+      return data.scrollPosition;
+    }
+  }
+};

client/src/graphql/typedefs.js

@@ -0,0 +1,11 @@
+import gql from 'graphql-tag';
+
+export const typeDefs = gql`
+  type ScrollPosition {    
+    scrollTo: String!
+  }
+  
+  type Mutation {
+    scrollTo(scrollTo: String!): ScrollPosition
+  }
+`;

client/src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex)
 
+// WARNING fixme todo: please do not use this anymore, use the local GraphQL cache
 export default new Vuex.Store({
   modules: {},