optimistic response

Migrating changes over from PR #321
apollographql · Jul 1, 2016 · 51bc919 · 51bc919
1 parent 741b9d1
commit 51bc919
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,8 @@ Expect active development and potentially significant breaking changes in the `0
 - Deprecate `apollo-client/gql` for `graphql-tag` and show a meaningful warning when importing
   `apollo-client/gql`
 
+- Allow `client.mutate` to accept an `optimisticResponse` argument to update the cache immediately, then after the server responds replace the `optimisticResponse` with the real response.
+
 ### v0.3.22 + v0.3.23 + v0.3.24
 
 - Fix unintentional breaking change where `apollo-client/gql` import stopped working. [Issue #327](https://github.com/apollostack/apollo-client/issues/327)

diff --git a/src/QueryManager.ts b/src/QueryManager.ts
@@ -7,6 +7,7 @@ import {
 import forOwn = require('lodash.forown');
 import assign = require('lodash.assign');
 import isEqual = require('lodash.isequal');
+// import merge = require('lodash.merge');
 
 import {
   ApolloStore,
@@ -33,6 +34,10 @@ import {
   applyTransformerToOperation,
 } from './queries/queryTransform';
 
+import {
+  NormalizedCache,
+} from './data/store';
+
 import {
   GraphQLResult,
   Document,
@@ -202,11 +207,13 @@ export class QueryManager {
     variables,
     resultBehaviors,
     fragments = [],
+    optimisticResponse,
   }: {
     mutation: Document,
     variables?: Object,
     resultBehaviors?: MutationBehavior[],
     fragments?: FragmentDefinition[],
+    optimisticResponse?: Object,
   }): Promise<GraphQLResult> {
     const mutationId = this.generateQueryId();
 
@@ -240,6 +247,7 @@ export class QueryManager {
       variables,
       mutationId,
       fragmentMap: queryFragmentMap,
+      optimisticResponse,
     });
 
     return this.networkInterface.query(request)
@@ -249,6 +257,7 @@ export class QueryManager {
           result,
           mutationId,
           resultBehaviors,
+          optimisticResponse,
         });
 
         return result;
@@ -372,8 +381,9 @@ export class QueryManager {
                 queryStoreValue.networkError.stack);
             }
           } else {
+
             const resultFromStore = readSelectionSetFromStore({
-              store: this.getApolloState().data,
+              store: this.getApolloCacheData(),
               rootId: queryStoreValue.query.id,
               selectionSet: queryStoreValue.query.selectionSet,
               variables: queryStoreValue.variables,
@@ -440,6 +450,11 @@ export class QueryManager {
     return this.store.getState()[this.reduxRootKey];
   }
 
+  public getApolloCacheData(): NormalizedCache {
+    const state = this.getApolloState();
+    return assign({}, state.data, state.optimistic.data) as NormalizedCache;
+  }
+
   public addQueryListener(queryId: string, listener: QueryListener) {
     this.queryListeners[queryId] = listener;
   };

diff --git a/src/actions.ts b/src/actions.ts
@@ -79,6 +79,7 @@ export interface MutationInitAction {
   variables: Object;
   mutationId: string;
   fragmentMap: FragmentMap;
+  optimisticResponse: Object;
 }
 
 export function isMutationInitAction(action: ApolloAction): action is MutationInitAction {

diff --git a/src/index.ts b/src/index.ts
@@ -221,9 +221,10 @@ export default class ApolloClient {
 
   public mutate = (options: {
     mutation: Document,
-    resultBehaviors?: MutationBehavior[],
     variables?: Object,
+    resultBehaviors?: MutationBehavior[],
     fragments?: FragmentDefinition[],
+    optimisticResponse?: Object,
   }): Promise<GraphQLResult> => {
     this.initStore();
     return this.queryManager.mutate(options);

diff --git a/src/mutations/store.ts b/src/mutations/store.ts
@@ -68,3 +68,52 @@ export function mutations(
 
   return previousState;
 }
+
+export interface OptimisticStore {
+  data: Object;
+  mutationIds: Object;
+}
+
+const optimisticDefaultState = {
+  data: {},
+  mutationIds: {},
+};
+
+export function optimistic(
+  previousState = optimisticDefaultState,
+  action,
+  config
+): OptimisticStore {
+  if (isMutationInitAction(action) && action.optimisticResponse) {
+    const newState = {
+      data: assign({}, previousState.data),
+      mutationIds: assign({}, previousState.mutationIds),
+    };
+    const { dataIdFromObject } = config;
+    const dataId = dataIdFromObject(action.optimisticResponse);
+
+    newState.data[dataId] = action.optimisticResponse;
+    newState.mutationIds[dataId] = action.mutationId;
+
+    return newState;
+  } else if (isMutationResultAction(action) && action.optimisticResponse) {
+    let newState = previousState;
+    const { dataIdFromObject } = config;
+    const dataId = dataIdFromObject(action.optimisticResponse);
+    const lastMutationId = newState.mutationIds[dataId];
+
+    if (lastMutationId === action.mutationId) {
+      newState = {
+        data: assign({}, previousState.data),
+        mutationIds: assign({}, previousState.mutationIds),
+      };
+      delete newState.data[dataId];
+      delete newState.mutationIds[dataId];
+    }
+
+    return newState;
+  }
+
+  return previousState;
+}
+
diff --git a/src/store.ts b/src/store.ts
@@ -18,6 +18,8 @@ import {
 import {
   mutations,
   MutationStore,
+  optimistic,
+  OptimisticStore,
 } from './mutations/store';
 
 import {
@@ -36,6 +38,7 @@ export interface Store {
   data: NormalizedCache;
   queries: QueryStore;
   mutations: MutationStore;
+  optimistic: OptimisticStore;
 }
 
 // This is our interface on top of Redux to get types in our actions
@@ -66,6 +69,7 @@ export function createApolloReducer(config: ApolloReducerConfig): Function {
       // Note that we are passing the queries into this, because it reads them to associate
       // the query ID in the result with the actual query
       data: data(state.data, action, state.queries, state.mutations, config),
+      optimistic: optimistic(state.optimistic, action, config),
     };
 
     return newState;

diff --git a/test/client.ts b/test/client.ts
@@ -148,6 +148,10 @@ describe('client', () => {
           queries: {},
           mutations: {},
           data: {},
+          optimistic: {
+            data: {},
+            mutationIds: {},
+          },
         },
       }
     );
@@ -168,6 +172,10 @@ describe('client', () => {
           queries: {},
           mutations: {},
           data: {},
+          optimistic: {
+            data: {},
+            mutationIds: {},
+          },
         },
       }
     );
@@ -354,6 +362,10 @@ describe('client', () => {
             'allPeople({"first":1})': 'ROOT_QUERY.allPeople({"first":1})',
           },
         },
+        optimistic: {
+          data: {},
+          mutationIds: {},
+        },
       },
     };
 

diff --git a/test/store.ts b/test/store.ts
@@ -19,6 +19,10 @@ describe('createApolloStore', () => {
         queries: {},
         mutations: {},
         data: {},
+        optimistic: {
+          data: {},
+          mutationIds: {},
+        },
       }
     );
   });
@@ -34,6 +38,10 @@ describe('createApolloStore', () => {
         queries: {},
         mutations: {},
         data: {},
+        optimistic: {
+          data: {},
+          mutationIds: {},
+        },
       }
     );
   });
@@ -48,6 +56,10 @@ describe('createApolloStore', () => {
         data: {
           'test.0': true,
         },
+        optimistic: {
+          data: {},
+          mutationIds: {},
+        },
       },
     };