Enable optimistic read of cache using client

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## vNext
 
+### Apollo Client (vNext)
+
+- Allow an `optimistic` param to be passed into `ApolloClient.readQuery` and
+  `ApolloClient.readFragment`, that when set to `true`, will allow
+  optimistic results to be returned. Is `false` by default.  <br/>
+  [@jay1337](https://github.com/jay1337) in [#2429](https://github.com/apollographql/apollo-client/pull/2429)
+
 ### Apollo Cache In-Memory (vNext)
 
 - Fix typo in `console.warn` regarding fragment matching error message.  <br/>

packages/apollo-cache-inmemory/src/__tests__/cache.ts

@@ -7,13 +7,15 @@ import { InMemoryCache, ApolloReducerConfig, NormalizedCache } from '..';
 disableFragmentWarnings();
 
 describe('Cache', () => {
-  function createCache({
-    initialState,
-    config,
-  }: {
-    initialState?: any;
-    config?: ApolloReducerConfig;
-  } = {}): ApolloCache<NormalizedCache> {
+  function createCache(
+    {
+      initialState,
+      config,
+    }: {
+      initialState?: any;
+      config?: ApolloReducerConfig;
+    } = {},
+  ): ApolloCache<NormalizedCache> {
     return new InMemoryCache(
       config || { addTypename: false },
       // XXX this is the old format. The tests need to be updated but since it is mapped down

packages/apollo-cache-inmemory/src/fragmentMatcher.ts

@@ -78,10 +78,10 @@ export class HeuristicFragmentMatcher implements FragmentMatcherInterface {
     // difference, so we warn the user, but still try to match it (backcompat).
     warnOnceInDevelopment(
       'You are using the simple (heuristic) fragment matcher, but your ' +
-      'queries contain union or interface types. Apollo Client will not be ' +
-      'able to accurately map fragments. To make this error go away, use ' +
-      'the `IntrospectionFragmentMatcher` as described in the docs: ' +
-      'https://www.apollographql.com/docs/react/recipes/fragment-matching.html',
+        'queries contain union or interface types. Apollo Client will not be ' +
+        'able to accurately map fragments. To make this error go away, use ' +
+        'the `IntrospectionFragmentMatcher` as described in the docs: ' +
+        'https://www.apollographql.com/docs/react/recipes/fragment-matching.html',
       'error',
     );
 

packages/apollo-cache-inmemory/src/writeToStore.ts

@@ -429,9 +429,7 @@ function writeFieldToStore({
       if (generated && !escapedId.generated && !typenameChanged) {
         throw new Error(
           `Store error: the application attempted to write an object with no provided id` +
-            ` but the store already contains an id of ${
-              escapedId.id
-            } for this object. The selectionSet` +
+            ` but the store already contains an id of ${escapedId.id} for this object. The selectionSet` +
             ` that was trying to be written is:\n` +
             print(field),
         );
@@ -440,9 +438,7 @@ function writeFieldToStore({
       if (hadTypename && !hasTypename) {
         throw new Error(
           `Store error: the application attempted to write an object with no provided typename` +
-            ` but the store already contains an object with typename of ${
-              escapedId.typename
-            } for the object of id ${escapedId.id}. The selectionSet` +
+            ` but the store already contains an object with typename of ${escapedId.typename} for the object of id ${escapedId.id}. The selectionSet` +
             ` that was trying to be written is:\n` +
             print(field),
         );

packages/apollo-client/benchmark/github-reporter.ts

@@ -26,29 +26,29 @@ export function collectAndReportBenchmarks(uploadToGithub: Boolean) {
   Promise.all(groupPromises)
     .then(() => {
       log('Running benchmarks.');
-      return new Promise<{ [name: string]: { mean: number; moe: number } }>(
-        resolve => {
-          const retMap: { [name: string]: { mean: number; moe: number } } = {};
+      return new Promise<{
+        [name: string]: { mean: number; moe: number };
+      }>(resolve => {
+        const retMap: { [name: string]: { mean: number; moe: number } } = {};
 
-          bsuite
-            .on('error', (error: any) => {
-              log('Error: ', error);
-            })
-            .on('cycle', (event: any) => {
-              retMap[event.target.name] = {
-                mean: event.target.stats.mean * 1000,
-                moe: event.target.stats.moe * 1000,
-              };
-              log('Mean time in ms: ', event.target.stats.mean * 1000);
-              log(String(event.target));
-              log('');
-            })
-            .on('complete', (_: any) => {
-              resolve(retMap);
-            })
-            .run({ async: false });
-        },
-      );
+        bsuite
+          .on('error', (error: any) => {
+            log('Error: ', error);
+          })
+          .on('cycle', (event: any) => {
+            retMap[event.target.name] = {
+              mean: event.target.stats.mean * 1000,
+              moe: event.target.stats.moe * 1000,
+            };
+            log('Mean time in ms: ', event.target.stats.mean * 1000);
+            log(String(event.target));
+            log('');
+          })
+          .on('complete', (_: any) => {
+            resolve(retMap);
+          })
+          .run({ async: false });
+      });
     })
     .then(res => {
       let message = '';
@@ -64,23 +64,21 @@ export function collectAndReportBenchmarks(uploadToGithub: Boolean) {
           } else {
             const normalizedMean = res[element].mean / res['baseline'].mean;
             if (normalizedMean > thresholds[element]) {
-              const perfDropMessage = `Performance drop detected for benchmark: "${element}", ${
-                res[element].mean
-              } / ${res['baseline'].mean} = ${normalizedMean} > ${
-                thresholds[element]
-              }`;
+              const perfDropMessage = `Performance drop detected for benchmark: "${element}", ${res[
+                element
+              ].mean} / ${res['baseline']
+                .mean} = ${normalizedMean} > ${thresholds[element]}`;
               console.error(perfDropMessage);
               if (message === '') {
                 message = `Performance drop detected for benchmark: "${element}"`;
                 pass = false;
               }
             } else {
               console.log(
-                `No performance drop detected for benchmark: "${element}", ${
-                  res[element].mean
-                } / ${res['baseline'].mean} = ${normalizedMean} <= ${
-                  thresholds[element]
-                }`,
+                `No performance drop detected for benchmark: "${element}", ${res[
+                  element
+                ].mean} / ${res['baseline']
+                  .mean} = ${normalizedMean} <= ${thresholds[element]}`,
               );
             }
           }

packages/apollo-client/src/ApolloClient.ts

@@ -294,11 +294,15 @@ export default class ApolloClient<TCacheShape> implements DataProxy {
    * GraphQL query without making a network request. This method will start at
    * the root query. To start at a specific id returned by `dataIdFromObject`
    * use `readFragment`.
+   *
+   * @param optimistic Set to `true` to allow `readQuery` to return
+   * optimisic results. Is `false` by default.
    */
   public readQuery<T, TVariables = OperationVariables>(
     options: DataProxy.Query<TVariables>,
+    optimistic: boolean = false,
   ): T | null {
-    return this.initProxy().readQuery<T>(options);
+    return this.initProxy().readQuery<T>(options, optimistic);
   }
 
   /**
@@ -311,11 +315,15 @@ export default class ApolloClient<TCacheShape> implements DataProxy {
    * with multiple fragments that represent what you are reading. If you pass
    * in a document with multiple fragments then you must also specify a
    * `fragmentName`.
+   *
+   * @param optimistic Set to `true` to allow `readFragment` to return
+   * optimisic results. Is `false` by default.
    */
   public readFragment<T, TVariables = OperationVariables>(
     options: DataProxy.Fragment<TVariables>,
+    optimistic: boolean = false,
   ): T | null {
-    return this.initProxy().readFragment<T>(options);
+    return this.initProxy().readFragment<T>(options, optimistic);
   }
 
   /**

packages/apollo-client/src/__tests__/ApolloClient.ts

@@ -2073,15 +2073,16 @@ describe('ApolloClient', () => {
           }
         `;
 
-        ['network-only', 'cache-and-network'].forEach(
-          (fetchPolicy: FetchPolicy) => {
-            const observable = client.watchQuery({
-              query,
-              fetchPolicy,
-            });
-            expect(observable.options.fetchPolicy).toEqual('cache-first');
-          },
-        );
+        [
+          'network-only',
+          'cache-and-network',
+        ].forEach((fetchPolicy: FetchPolicy) => {
+          const observable = client.watchQuery({
+            query,
+            fetchPolicy,
+          });
+          expect(observable.options.fetchPolicy).toEqual('cache-first');
+        });
       },
     );
 

packages/apollo-client/src/__tests__/client.ts

@@ -72,11 +72,9 @@ describe('client', () => {
     });
 
     expect(() => {
-      client.query(gql`
-        {
+      client.query(gql`{
           a
-        }
-      ` as any);
+        }` as any);
     }).toThrowError(
       'query option is required. You must specify your GraphQL document in the query option.',
     );
@@ -623,40 +621,43 @@ describe('client', () => {
     });
   });
 
-  xit('should pass a network error correctly on a query using an observable network interface with a warning', done => {
-    withWarning(() => {
-      const query = gql`
-        query people {
-          allPeople(first: 1) {
-            people {
-              name
+  xit(
+    'should pass a network error correctly on a query using an observable network interface with a warning',
+    done => {
+      withWarning(() => {
+        const query = gql`
+          query people {
+            allPeople(first: 1) {
+              people {
+                name
+              }
             }
           }
-        }
-      `;
+        `;
 
-      const networkError = new Error('Some kind of network error.');
+        const networkError = new Error('Some kind of network error.');
 
-      const link = ApolloLink.from([
-        () => {
-          return new Observable(_ => {
-            throw networkError;
-          });
-        },
-      ]);
+        const link = ApolloLink.from([
+          () => {
+            return new Observable(_ => {
+              throw networkError;
+            });
+          },
+        ]);
 
-      const client = new ApolloClient({
-        link,
-        cache: new InMemoryCache({ addTypename: false }),
-      });
+        const client = new ApolloClient({
+          link,
+          cache: new InMemoryCache({ addTypename: false }),
+        });
 
-      client.query({ query }).catch((error: ApolloError) => {
-        expect(error.networkError).toBeDefined();
-        expect(error.networkError!.message).toEqual(networkError.message);
-        done();
-      });
-    }, /deprecated/);
-  });
+        client.query({ query }).catch((error: ApolloError) => {
+          expect(error.networkError).toBeDefined();
+          expect(error.networkError!.message).toEqual(networkError.message);
+          done();
+        });
+      }, /deprecated/);
+    },
+  );
 
   it('should pass a network error correctly on a query with apollo-link network interface', done => {
     const query = gql`