feat(apollo-cache-inmemory): support custom directives (apollographql…

…#2710) Before this change, using a custom directive corrupted the cache. It is now possible to safely use a custom directive without breaking it. Example of custom directives: https://github.com/smooth-code/graphql-directive
peggyrayzis · Jan 29, 2018 · de38f3c · de38f3c
1 parent 9265ac0
commit de38f3c
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 2 deletions.
diff --git a/packages/apollo-cache-inmemory/src/__tests__/readFromStore.ts b/packages/apollo-cache-inmemory/src/__tests__/readFromStore.ts
@@ -165,6 +165,38 @@ describe('reading from the store', () => {
     });
   });
 
+  it('runs a basic query with custom directives', () => {
+    const query = gql`
+      query {
+        id
+        firstName @include(if: true)
+        lastName @upperCase
+        birthDate @dateFormat(format: "DD-MM-YYYY")
+      }
+    `;
+
+    const store = defaultNormalizedCacheFactory({
+      ROOT_QUERY: {
+        id: 'abcd',
+        firstName: 'James',
+        'lastName@upperCase': 'BOND',
+        'birthDate@dateFormat({"format":"DD-MM-YYYY"})': '20-05-1940',
+      },
+    });
+
+    const result = readQueryFromStore({
+      store,
+      query,
+    });
+
+    expect(result).toEqual({
+      id: 'abcd',
+      firstName: 'James',
+      lastName: 'BOND',
+      birthDate: '20-05-1940',
+    });
+  });
+
   it('runs a basic query with default values for arguments', () => {
     const query = gql`
       query someBigQuery(

diff --git a/packages/apollo-cache-inmemory/src/__tests__/writeToStore.ts b/packages/apollo-cache-inmemory/src/__tests__/writeToStore.ts
@@ -221,6 +221,38 @@ describe('writing to the store', () => {
     });
   });
 
+  it('properly normalizes a query with custom directives', () => {
+    const query = gql`
+      query {
+        id
+        firstName @include(if: true)
+        lastName @upperCase
+        birthDate @dateFormat(format: "DD-MM-YYYY")
+      }
+    `;
+
+    const result: any = {
+      id: 'abcd',
+      firstName: 'James',
+      lastName: 'BOND',
+      birthDate: '20-05-1940',
+    };
+
+    const normalized = writeQueryToStore({
+      result,
+      query,
+    });
+
+    expect(normalized.toObject()).toEqual({
+      ROOT_QUERY: {
+        id: 'abcd',
+        firstName: 'James',
+        'lastName@upperCase': 'BOND',
+        'birthDate@dateFormat({"format":"DD-MM-YYYY"})': '20-05-1940',
+      },
+    });
+  });
+
   it('properly normalizes a nested object with an ID', () => {
     const query = gql`
       {

diff --git a/packages/apollo-client/AUTHORS b/packages/apollo-client/AUTHORS
@@ -89,3 +89,4 @@ Robert Simon <shock.shock@gmail.com>
 Sondre Maere Overskaug <sondremo@gmail.com>
 Tim Griesser <tgriesser10@gmail.com>
 Adam Tuttle <adamtuttlecodes@gmail.com>
+Greg Bergé <berge.greg@gmail.com>
diff --git a/packages/apollo-utilities/CHANGELOG.md b/packages/apollo-utilities/CHANGELOG.md
@@ -4,6 +4,9 @@
 ### vNext
 - Fix typo in error message for invalid argument being passed to @skip or @include directives [PR#2867](https://github.com/apollographql/apollo-client/pull/2867)
 
+### 1.1.0
+- update `getStoreKeyName` to support custom directives
+
 ### 1.0.5
 - package dependency updates
 

diff --git a/packages/apollo-utilities/src/storeUtils.ts b/packages/apollo-utilities/src/storeUtils.ts
@@ -164,6 +164,8 @@ export type Directives = {
   };
 };
 
+const KNOWN_DIRECTIVES: string[] = ['connection', 'include', 'skip'];
+
 export function getStoreKeyName(
   fieldName: string,
   args?: Object,
@@ -197,13 +199,25 @@ export function getStoreKeyName(
     }
   }
 
+  let completeFieldName: string = fieldName;
+
   if (args) {
     const stringifiedArgs: string = JSON.stringify(args);
+    completeFieldName += `(${stringifiedArgs})`;
+  }
 
-    return `${fieldName}(${stringifiedArgs})`;
+  if (directives) {
+    Object.keys(directives).forEach(key => {
+      if (KNOWN_DIRECTIVES.indexOf(key) !== -1) return;
+      if (directives[key] && Object.keys(directives[key]).length) {
+        completeFieldName += `@${key}(${JSON.stringify(directives[key])})`;
+      } else {
+        completeFieldName += `@${key}`;
+      }
+    });
   }
 
-  return fieldName;
+  return completeFieldName;
 }
 
 export function argumentsObjectFromField(