Add support for the filter parameter in the @connection directive

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Change log
 
 ### vNEXT
+- Add the `filter` argument to the `@connection` directive so that custom store keys can include query arguments [PR #1862](https://github.com/apollographql/apollo-client/pull/1862)
 - Add support for flow typecheck to work out of the box (without any configuration) [PR #1820](https://github.com/apollographql/apollo-client/pull/1820)
 - Remove the dependency on the query and mutation store from the data reducer. Apollo actions sent to Redux now contain additional information that was originally pulled from the query and mutation stores [PR #1845](https://github.com/apollographql/apollo-client/pull/1845)
 - Fix: Avoiding reprocessing of identical data when writing to the store [PR #1675](https://github.com/apollographql/apollo-client/pull/1675)

src/data/storeUtils.ts

@@ -105,7 +105,20 @@ export type Directives = {
 
 export function getStoreKeyName(fieldName: string, args?: Object, directives?: Directives): string {
   if (directives && directives['connection'] && directives['connection']['key']) {
-    return directives['connection']['key'];
+    if (directives['connection']['filter'] && (directives['connection']['filter'] as string[]).length > 0) {
+      const filterKeys = directives['connection']['filter'] ? (directives['connection']['filter'] as string[]) : [];
+      filterKeys.sort();
+
+      const queryArgs = args as {[key: string]: any};
+      const filteredArgs = {} as {[key: string]: any};
+      filterKeys.forEach((key) => {
+        filteredArgs[key] = queryArgs[key];
+      });
+
+      return `${directives['connection']['key']}(${JSON.stringify(filteredArgs)})`;
+    } else {
+      return directives['connection']['key'];
+    }
   }
 
   if (args) {

test/client.ts

@@ -2810,6 +2810,52 @@ it('should run a query with the connection directive and write the result to the
     });
   });
 
+  it('should run a query with the connection directive and filter arguments and write the result to the correct store key', () => {
+    const query = gql`
+      query books($order: string) {
+        books(skip: 0, limit: 2, order: $order) @connection(key: "abc", filter: ["order"]) {
+          name
+          __typename
+        }
+      }`;
+
+    const result = {
+      'books': [
+        {
+          'name': 'abcd',
+          '__typename': 'Book',
+        },
+      ],
+    };
+
+    const variables = {order: 'popularity'};
+
+    const networkInterface = mockNetworkInterface({
+      request: { query: query, variables },
+      result: { data: result },
+    });
+
+    const client = new ApolloClient({
+      networkInterface,
+    });
+
+    return client.query({ query, variables }).then((actualResult) => {
+      assert.deepEqual(actualResult.data, result);
+      assert.deepEqual(client.store.getState().apollo.data, {
+        'ROOT_QUERY.abc({"order":"popularity"}).0': { name: 'abcd', __typename: 'Book' },
+        'ROOT_QUERY': {
+          'abc({"order":"popularity"})': [
+            {
+              'generated': true,
+              'id': 'ROOT_QUERY.abc({"order":"popularity"}).0',
+              'type': 'id',
+            },
+          ],
+        },
+      });
+    });
+  });
+
 function clientRoundtrip(
   query: DocumentNode,
   data: ExecutionResult,