[WIP] Optimistic UI

.vscode/launch.json

@@ -11,7 +11,9 @@
         "lib/test/tests.js"
       ],
       "cwd": "${workspaceRoot}",
-      "runtimeExecutable": null
+      "runtimeExecutable": null,
+      "sourceMaps": true,
+      "outDir": "${workspaceRoot}/lib"
     }
   ]
 }

CHANGELOG.md

@@ -4,6 +4,8 @@ Expect active development and potentially significant breaking changes in the `0
 
 ### vNEXT
 
+- 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. [Issue #287](https://github.com/apollostack/apollo-client/issues/287) [PR #336](https://github.com/apollostack/apollo-client/pull/336)
+
 ### v0.4.0
 
 This release has a minor version bump, which means npm will not automatically update to this version. Consider the list of breaking changes below, then upgrade and update your app correspondingly.

ambient.d.ts

@@ -38,6 +38,11 @@ declare module 'lodash.assign' {
   export = main.assign;
 }
 
+declare module 'lodash.merge' {
+  import main = require('~lodash/index');
+  export = main.merge;
+}
+
 declare module 'lodash.includes' {
   import main = require('~lodash/index');
   export = main.includes;

package.json

@@ -10,7 +10,7 @@
     "pretest": "npm run compile",
     "test": "npm run testonly --",
     "posttest": "npm run lint",
-    "filesize": "npm run compile:browser && ./scripts/filesize.js --file=./dist/index.min.js --maxGzip=34",
+    "filesize": "npm run compile:browser && ./scripts/filesize.js --file=./dist/index.min.js --maxGzip=36",
     "compile": "tsc",
     "compile:browser": "rm -rf ./dist && mkdir ./dist && browserify ./lib/src/index.js -o=./dist/index.js && npm run minify:browser",
     "minify:browser": "uglifyjs --compress --mangle --screw-ie8 -o=./dist/index.min.js -- ./dist/index.js",
@@ -55,6 +55,8 @@
     "lodash.isstring": "^4.0.1",
     "lodash.isundefined": "^3.0.1",
     "lodash.mapvalues": "^4.4.0",
+    "lodash.merge": "^4.4.0",
+    "lodash.pick": "^4.2.0",
     "redux": "^3.3.1",
     "symbol-observable": "^0.2.4",
     "whatwg-fetch": "^1.0.0"

src/QueryManager.ts

@@ -10,6 +10,7 @@ import isEqual = require('lodash.isequal');
 import {
   ApolloStore,
   Store,
+  getDataWithOptimisticResults,
 } from './store';
 
 import {
@@ -32,6 +33,10 @@ import {
   applyTransformerToOperation,
 } from './queries/queryTransform';
 
+import {
+  NormalizedCache,
+} from './data/store';
+
 import {
   GraphQLResult,
   Document,
@@ -218,11 +223,13 @@ export class QueryManager {
     variables,
     resultBehaviors,
     fragments = [],
+    optimisticResponse,
   }: {
     mutation: Document,
     variables?: Object,
     resultBehaviors?: MutationBehavior[],
     fragments?: FragmentDefinition[],
+    optimisticResponse?: Object,
   }): Promise<ApolloQueryResult> {
     const mutationId = this.generateQueryId();
 
@@ -256,6 +263,8 @@ export class QueryManager {
       variables,
       mutationId,
       fragmentMap: queryFragmentMap,
+      optimisticResponse,
+      resultBehaviors,
     });
 
     return this.networkInterface.query(request)
@@ -312,7 +321,7 @@ export class QueryManager {
           }
         } else {
           const resultFromStore = readSelectionSetFromStore({
-            store: this.getApolloState().data,
+            store: this.getDataWithOptimisticResults(),
             rootId: queryStoreValue.query.id,
             selectionSet: queryStoreValue.query.selectionSet,
             variables: queryStoreValue.variables,
@@ -449,6 +458,10 @@ export class QueryManager {
     return this.store.getState()[this.reduxRootKey];
   }
 
+  public getDataWithOptimisticResults(): NormalizedCache {
+    return getDataWithOptimisticResults(this.getApolloState());
+  }
+
   public addQueryListener(queryId: string, listener: QueryListener) {
     this.queryListeners[queryId] = listener;
   };

src/actions.ts

@@ -79,6 +79,8 @@ export interface MutationInitAction {
   variables: Object;
   mutationId: string;
   fragmentMap: FragmentMap;
+  optimisticResponse: Object;
+  resultBehaviors?: MutationBehavior[];
 }
 
 export function isMutationInitAction(action: ApolloAction): action is MutationInitAction {

src/data/mutationResults.ts

@@ -118,11 +118,11 @@ function mutationResultArrayInsertReducer(state: NormalizedCache, {
   });
 
   // Step 3: insert dataId reference into storePath array
-  const dataIdOfObj = storePath.shift();
+  const [dataIdOfObj, ...restStorePath] = storePath;
   const clonedObj = cloneDeep(state[dataIdOfObj]);
   const array = scopeJSONToResultPath({
     json: clonedObj,
-    path: storePath,
+    path: restStorePath,
   });
 
   if (where === 'PREPEND') {
@@ -240,11 +240,11 @@ function mutationResultArrayDeleteReducer(state: NormalizedCache, {
     storePath,
   } = behavior as MutationArrayDeleteBehavior;
 
-  const dataIdOfObj = storePath.shift();
+  const [dataIdOfObj, ...restStorePath] = storePath;
   const clonedObj = cloneDeep(state[dataIdOfObj]);
   const array = scopeJSONToResultPath({
     json: clonedObj,
-    path: storePath,
+    path: restStorePath,
   });
 
   array.splice(array.indexOf(dataId), 1);

src/index.ts

@@ -228,9 +228,10 @@ export default class ApolloClient {
 
   public mutate = (options: {
     mutation: Document,
-    resultBehaviors?: MutationBehavior[],
     variables?: Object,
+    resultBehaviors?: MutationBehavior[],
     fragments?: FragmentDefinition[],
+    optimisticResponse?: Object,
   }): Promise<ApolloQueryResult> => {
     this.initStore();
     return this.queryManager.mutate(options);

src/optimistic-data/store.ts

@@ -0,0 +1,75 @@
+import {
+  ApolloAction,
+  isMutationInitAction,
+  isMutationResultAction,
+  isMutationErrorAction,
+} from '../actions';
+
+import {
+  data,
+  NormalizedCache,
+} from '../data/store';
+
+import {
+  getDataWithOptimisticResults,
+  Store,
+} from '../store';
+
+import assign = require('lodash.assign');
+import pick = require('lodash.pick');
+
+// a stack of patches of new or changed documents
+export type OptimisticStore = {
+  mutationId: string,
+  data: NormalizedCache,
+}[];
+
+const optimisticDefaultState = [];
+
+export function optimistic(
+  previousState = optimisticDefaultState,
+  action,
+  store,
+  config
+): OptimisticStore {
+  if (isMutationInitAction(action) && action.optimisticResponse) {
+    const fakeMutationResultAction = {
+      type: 'APOLLO_MUTATION_RESULT',
+      result: { data: action.optimisticResponse },
+      mutationId: action.mutationId,
+      resultBehaviors: action.resultBehaviors,
+    } as ApolloAction;
+
+    const fakeStore = assign({}, store, { optimistic: previousState }) as Store;
+    const optimisticData = getDataWithOptimisticResults(fakeStore);
+    const fakeDataResultState = data(
+      optimisticData,
+      fakeMutationResultAction,
+      store.queries,
+      store.mutations,
+      config
+    );
+
+    const changedKeys = Object.keys(fakeDataResultState).filter(
+      key => optimisticData[key] !== fakeDataResultState[key]);
+    const patch = pick(fakeDataResultState, changedKeys);
+
+    const optimisticState = {
+      data: patch,
+      mutationId: action.mutationId,
+    };
+
+    const newState = [...previousState, optimisticState];
+
+    return newState;
+  } else if ((isMutationErrorAction(action) || isMutationResultAction(action))
+               && previousState.some(change => change.mutationId === action.mutationId)) {
+    // throw away optimistic changes of that particular mutation
+    const newState = previousState.filter(
+      (change) => change.mutationId !== action.mutationId);
+
+    return newState;
+  }
+
+  return previousState;
+}

src/store.ts

@@ -20,6 +20,11 @@ import {
   MutationStore,
 } from './mutations/store';
 
+import {
+  optimistic,
+  OptimisticStore,
+} from './optimistic-data/store';
+
 import {
   ApolloAction,
 } from './actions';
@@ -32,10 +37,13 @@ import {
   MutationBehaviorReducerMap,
 } from './data/mutationResults';
 
+import assign = require('lodash.assign');
+
 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,8 +74,20 @@ 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: [],
     };
 
+    // Note, we need to have the results of the
+    // APOLLO_MUTATION_INIT action to simulate
+    // the APOLLO_MUTATION_RESULT action. That's
+    // why we pass in newState
+    newState.optimistic = optimistic(
+      state.optimistic,
+      action,
+      newState,
+      config
+    );
+
     return newState;
   };
 }
@@ -112,3 +132,8 @@ export interface ApolloReducerConfig {
   dataIdFromObject?: IdGetter;
   mutationBehaviorReducers?: MutationBehaviorReducerMap;
 }
+
+export function getDataWithOptimisticResults(store: Store): NormalizedCache {
+  const patches = store.optimistic.map(opt => opt.data);
+  return assign({}, store.data, ...patches) as NormalizedCache;
+}

test/QueryManager.ts

@@ -2195,6 +2195,7 @@ describe('QueryManager', () => {
         data: {},
         mutations: {},
         queries: {},
+        optimistic: [],
       };
 
       assert.deepEqual(currentState, expectedState);

test/client.ts

@@ -153,6 +153,7 @@ describe('client', () => {
           queries: {},
           mutations: {},
           data: {},
+          optimistic: [],
         },
       }
     );
@@ -173,6 +174,7 @@ describe('client', () => {
           queries: {},
           mutations: {},
           data: {},
+          optimistic: [],
         },
       }
     );
@@ -359,6 +361,7 @@ describe('client', () => {
             'allPeople({"first":1})': 'ROOT_QUERY.allPeople({"first":1})',
           },
         },
+        optimistic: [],
       },
     };