Specifically handle the connection directive when selecting store keys, fix #1779

AUTHORS

@@ -41,6 +41,7 @@ Robert Dickert <robert.dickert@gmail.com>
 Robin Ricard <ricard.robin@gmail.com>
 Sashko Stubailo <s.stubailo@gmail.com>
 Sashko Stubailo <sashko@stubailo.com>
+Shadaj Laddad <shadaj@meteor.com>
 Simon Tucker <srtucker22@gmail.com>
 Slava Kim <imslavko@gmail.com>
 Slava Kim <slv@mit.edu>

CHANGELOG.md

@@ -5,6 +5,8 @@
 ### 1.5.0
 - `batchInterval` now has a default value of 10 ms [PR #1793](https://github.com/apollographql/apollo-client/pull/1793)
 - Added `batchMax` to allow you to limit the amount of queries in one batch. [PR #1659](https://github.com/apollographql/apollo-client/pull/1659)
+- the `@connection(key: ...)` directive can now be used to specify the key to use
+for the Apollo store and is removed by default when sending queries to the server [PR #1801](https://github.com/apollographql/apollo-client/pull/1801)
 
 ### 1.4.2
 - Improved error messages for writeToStore, readFragment and writeFragment [PR #1766](https://github.com/apollographql/apollo-client/pull/1766), [PR #1722](https://github.com/apollographql/apollo-client/pull/1722)

src/ApolloClient.ts

@@ -65,7 +65,7 @@ import {
 } from './core/watchQueryOptions';
 
 import {
-  storeKeyNameFromFieldNameAndArgs,
+  getStoreKeyName,
 } from './data/storeUtils';
 
 import {
@@ -222,7 +222,7 @@ export default class ApolloClient implements DataProxy {
     this.disableNetworkFetches = ssrMode || ssrForceFetchDelay > 0;
     this.dataId = dataIdFromObject = dataIdFromObject || defaultDataIdFromObject;
     this.dataIdFromObject = this.dataId;
-    this.fieldWithArgs = storeKeyNameFromFieldNameAndArgs;
+    this.fieldWithArgs = getStoreKeyName;
     this.queryDeduplication = queryDeduplication;
     this.ssrMode = ssrMode;
 

src/core/QueryManager.ts

@@ -1096,24 +1096,30 @@ export class QueryManager {
           }
 
           return result;
-        }).then(() => {
-
+        }).then((result) => {
           let resultFromStore: any;
-          try {
-            // ensure result is combined with data already in store
-            // this will throw an error if there are missing fields in
-            // the results if returnPartialData is false.
-            resultFromStore = readQueryFromStore({
-              store: this.getApolloState().data,
-              variables,
-              query: document,
-              config: this.reducerConfig,
-              fragmentMatcherFunction: this.fragmentMatcher.match,
-            });
-            // ensure multiple errors don't get thrown
-            /* tslint:disable */
-          } catch (e) {}
-          /* tslint:enable */
+
+          if (fetchMoreForQueryId) {
+            // XXX We don't write fetchMore results to the store because this would overwrite
+            // the original result in case an @connection directive is used.
+            resultFromStore = result.data;
+          } else {
+            try {
+              // ensure result is combined with data already in store
+              // this will throw an error if there are missing fields in
+              // the results if returnPartialData is false.
+              resultFromStore = readQueryFromStore({
+                store: this.getApolloState().data,
+                variables,
+                query: document,
+                config: this.reducerConfig,
+                fragmentMatcherFunction: this.fragmentMatcher.match,
+              });
+              // ensure multiple errors don't get thrown
+              /* tslint:disable */
+            } catch (e) {}
+            /* tslint:enable */
+          }
 
           const { reducerError } = this.getApolloState();
           if (reducerError && reducerError.queryId === queryId) {

src/data/readFromStore.ts

@@ -16,7 +16,7 @@ import {
 } from './storeUtils';
 
 import {
-  storeKeyNameFromFieldNameAndArgs,
+  getStoreKeyName,
 } from './storeUtils';
 
 import {
@@ -132,13 +132,13 @@ const readStoreResolver: Resolver = (
   idValue: IdValueWithPreviousResult,
   args: any,
   context: ReadStoreContext,
-  { resultKey }: ExecInfo,
+  { resultKey, directives }: ExecInfo,
 ) => {
   assertIdValue(idValue);
 
   const objId = idValue.id;
   const obj = context.store[objId];
-  const storeKeyName = storeKeyNameFromFieldNameAndArgs(fieldName, args);
+  const storeKeyName = getStoreKeyName(fieldName, args, directives);
   let fieldValue = (obj || {})[storeKeyName];
 
   if (typeof fieldValue === 'undefined') {

src/data/store.ts

@@ -69,7 +69,8 @@ export function data(
     // Ignore results from old requests
     // XXX this means that if you have a refetch interval which is shorter than your roundtrip time,
     // your query will be in the loading state forever!
-    if (action.requestId < queries[action.queryId].lastRequestId) {
+    // do not write to the store if this is for fetchMore
+    if (action.requestId < queries[action.queryId].lastRequestId || action.fetchMoreForQueryId) {
       return previousState;
     }
 

src/data/storeUtils.ts

@@ -74,19 +74,40 @@ export function valueToObjectRepresentation(argObj: any, name: NameNode, value:
 }
 
 export function storeKeyNameFromField(field: FieldNode, variables?: Object): string {
-  if (field.arguments && field.arguments.length) {
-    const argObj: Object = {};
+  let directivesObj: any = null;
+  if (field.directives) {
+    directivesObj = {};
+    field.directives.forEach((directive) => {
+      directivesObj[directive.name.value] = {};
+
+      if (directive.arguments) {
+        directive.arguments.forEach((({name, value}) => valueToObjectRepresentation(
+          directivesObj[directive.name.value], name, value, variables)));
+      }
+    });
+  }
 
+  let argObj: any = null;
+  if (field.arguments && field.arguments.length) {
+    argObj = {};
     field.arguments.forEach(({name, value}) => valueToObjectRepresentation(
       argObj, name, value, variables));
-
-    return storeKeyNameFromFieldNameAndArgs(field.name.value, argObj);
   }
 
-  return field.name.value;
+  return getStoreKeyName(field.name.value, argObj, directivesObj);
 }
 
-export function storeKeyNameFromFieldNameAndArgs(fieldName: string, args?: Object): string {
+export type Directives = {
+    [directiveName: string]: {
+        [argName: string]: any;
+    };
+};
+
+export function getStoreKeyName(fieldName: string, args?: Object, directives?: Directives): string {
+  if (directives && directives['connection'] && directives['connection']['key']) {
+    return directives['connection']['key'];
+  }
+
   if (args) {
     const stringifiedArgs: string = JSON.stringify(args);
 

src/queries/queryTransform.ts

@@ -51,6 +51,38 @@ function addTypenameToSelectionSet(
   }
 }
 
+function removeConnectionDirectiveFromSelectionSet(selectionSet: SelectionSetNode) {
+  if (selectionSet.selections) {
+    selectionSet.selections.forEach((selection) => {
+      if (selection.kind === 'Field' && selection as FieldNode && selection.directives) {
+        selection.directives = selection.directives.filter((directive) => {
+          const willRemove = directive.name.value === 'connection';
+          if (willRemove) {
+            if (!directive.arguments || !directive.arguments.some((arg) => arg.name.value === 'key')) {
+              console.warn('Removing an @connection directive even though it does not have a key. ' +
+                'You may want to use the key parameter to specify a store key.');
+            }
+          }
+
+          return !willRemove;
+        });
+      }
+    });
+
+    selectionSet.selections.forEach((selection) => {
+      if (selection.kind === 'Field') {
+        if (selection.selectionSet) {
+          removeConnectionDirectiveFromSelectionSet(selection.selectionSet);
+        }
+      } else if (selection.kind === 'InlineFragment') {
+        if (selection.selectionSet) {
+          removeConnectionDirectiveFromSelectionSet(selection.selectionSet);
+        }
+      }
+    });
+  }
+}
+
 export function addTypenameToDocument(doc: DocumentNode) {
   checkDocument(doc);
   const docClone = cloneDeep(doc);
@@ -62,3 +94,14 @@ export function addTypenameToDocument(doc: DocumentNode) {
 
   return docClone;
 }
+
+export function removeConnectionDirectiveFromDocument(doc: DocumentNode) {
+  checkDocument(doc);
+  const docClone = cloneDeep(doc);
+
+  docClone.definitions.forEach((definition: DefinitionNode) => {
+    removeConnectionDirectiveFromSelectionSet((definition as OperationDefinitionNode).selectionSet);
+  });
+
+  return docClone;
+}

src/transport/networkInterface.ts

@@ -17,6 +17,10 @@ import {
   BatchAfterwareInterface,
 } from './afterware';
 
+import {
+  removeConnectionDirectiveFromDocument,
+} from '../queries/queryTransform';
+
 /**
  * This is an interface that describes an GraphQL document to be sent
  * to the server.
@@ -192,6 +196,12 @@ export class HTTPFetchNetworkInterface extends BaseNetworkInterface {
     return this.applyMiddlewares({
       request,
       options,
+    }).then((rao) => {
+      if (rao.request.query) {
+        rao.request.query = removeConnectionDirectiveFromDocument(rao.request.query);
+      }
+
+      return rao;
     }).then( (rao) => this.fetchFromRemoteEndpoint.call(this, rao))
       .then(response => this.applyAfterwares({
         response: response as Response,

test/client.ts

@@ -2554,8 +2554,137 @@ describe('client', () => {
 
     return withWarning(() => client.query({ query }), /Missing field description/);
   });
+
+  it('runs a query with the connection directive and writes it to the store key defined in the directive', () => {
+    const query = gql`
+      {
+        books(skip: 0, limit: 2) @connection(key: "abc") {
+          name
+        }
+      }`;
+
+    const transformedQuery = gql`
+      {
+        books(skip: 0, limit: 2) @connection(key: "abc") {
+          name
+          __typename
+        }
+      }`;
+
+    const result = {
+      'books': [
+        {
+          'name': 'abcd',
+          '__typename': 'Book',
+        },
+      ],
+    };
+
+    const networkInterface = mockNetworkInterface({
+      request: { query: transformedQuery },
+      result: { data: result },
+    });
+
+    const client = new ApolloClient({
+      networkInterface,
+    });
+
+    return client.query({ query }).then((actualResult) => {
+      assert.deepEqual(actualResult.data, result);
+    });
+  });
+
+  it('should not remove the connection directive at the store level', () => {
+    const query = gql`
+      {
+        books(skip: 0, limit: 2) @connection {
+          name
+        }
+      }`;
+
+    const transformedQuery = gql`
+      {
+        books(skip: 0, limit: 2) @connection {
+          name
+          __typename
+        }
+      }`;
+
+    const result = {
+      'books': [
+        {
+          'name': 'abcd',
+          '__typename': 'Book',
+        },
+      ],
+    };
+
+    const networkInterface = mockNetworkInterface({
+      request: { query: transformedQuery },
+      result: { data: result },
+    });
+
+    const client = new ApolloClient({
+      networkInterface,
+    });
+
+    return client.query({ query }).then((actualResult) => {
+      assert.deepEqual(actualResult.data, result);
+    });
+  });
 });
 
+it('should run a query with the connection directive and write the result to the store key defined in the directive', () => {
+    const query = gql`
+      {
+        books(skip: 0, limit: 2) @connection(key: "abc") {
+          name
+        }
+      }`;
+
+    const transformedQuery = gql`
+      {
+        books(skip: 0, limit: 2) @connection(key: "abc") {
+          name
+          __typename
+        }
+      }`;
+
+    const result = {
+      'books': [
+        {
+          'name': 'abcd',
+          '__typename': 'Book',
+        },
+      ],
+    };
+
+    const networkInterface = mockNetworkInterface({
+      request: { query: transformedQuery },
+      result: { data: result },
+    });
+
+    const client = new ApolloClient({
+      networkInterface,
+    });
+
+    return client.query({ query }).then((actualResult) => {
+      assert.deepEqual(actualResult.data, result);
+      assert.deepEqual(client.store.getState().apollo.data, {
+        'ROOT_QUERY.abc.0': { name: 'abcd', __typename: 'Book' },
+        'ROOT_QUERY': {
+          abc: [
+            {
+              'generated': true,
+              'id': 'ROOT_QUERY.abc.0',
+              'type': 'id',
+            },
+          ],
+        },
+      });
+    });
+  });
+
 function clientRoundtrip(
   query: DocumentNode,
   data: ExecutionResult,