Support for @skip and @include

CHANGELOG.md

@@ -4,6 +4,7 @@ Expect active development and potentially significant breaking changes in the `0
 
 ### vNEXT
 - Added name fragment support within mutations [Issue #273](https://github.com/apollostack/apollo-client/issues/273) and [PR #274](https://github.com/apollostack/apollo-client/pull/274)
+- Added support for `@skip` and `@include` directives - see [Issue #237](https://github.com/apollostack/apollo-client/issues/237) and [PR #275](https://github.com/apollostack/apollo-client/pull/275)
 - Now sending the operation name along with the query to the server [Issue #259](https://github.com/apollostack/apollo-client/issues/259) and [PR #282](https://github.com/apollostack/apollo-client/pull/282)
 
 ### v0.3.13

src/QueryManager.ts

@@ -399,6 +399,8 @@ export class QueryManager {
           let resultFromStore;
           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 = readSelectionSetFromStore({
               store: this.getApolloState().data,
               rootId: querySS.id,

src/data/diffAgainstStore.ts

@@ -32,6 +32,10 @@ import {
   FragmentMap,
 } from '../queries/getFromAST';
 
+import {
+  shouldInclude,
+} from '../queries/directives';
+
 export interface DiffResult {
   result: any;
   isMissing?: 'true';
@@ -120,6 +124,7 @@ export function diffSelectionSetAgainstStore({
   selectionSet.selections.forEach((selection) => {
     // Don't push more than one missing field per field in the query
     let missingFieldPushed = false;
+
     function pushMissingField(missingField: Selection) {
       if (!missingFieldPushed) {
         missingFields.push(missingField);
@@ -128,21 +133,26 @@ export function diffSelectionSetAgainstStore({
     }
 
     if (isField(selection)) {
-      const {
-        result: fieldResult,
-        isMissing: fieldIsMissing,
-      } = diffFieldAgainstStore({
-        field: selection,
-        throwOnMissingField,
-        variables,
-        rootId,
-        store,
-        fragmentMap,
-      });
+        const includeField = shouldInclude(selection, variables);
+        const {
+          result: fieldResult,
+          isMissing: fieldIsMissing,
+        } = diffFieldAgainstStore({
+          field: selection,
+          throwOnMissingField,
+          variables,
+          rootId,
+          store,
+          fragmentMap,
+          included: includeField,
+        });
 
       if (fieldIsMissing) {
+        // even if the field is not included, we want to keep it in the
+        // query that is sent to the server. So, we push it into the set of
+        // fields that is missing.
         pushMissingField(selection);
-      } else {
+      } else if (includeField) {
         const resultFieldKey = resultKeyNameFromField(selection);
 
         result[resultFieldKey] = fieldResult;
@@ -231,19 +241,24 @@ function diffFieldAgainstStore({
   rootId,
   store,
   fragmentMap,
+  included,
 }: {
   field: Field,
   throwOnMissingField: boolean,
   variables: Object,
   rootId: string,
   store: NormalizedCache,
   fragmentMap?: FragmentMap,
+  included?: Boolean,
 }): FieldDiffResult {
   const storeObj = store[rootId] || {};
   const storeFieldKey = storeKeyNameFromField(field, variables);
+  if (included === undefined) {
+    included = true;
+  }
 
   if (! has(storeObj, storeFieldKey)) {
-    if (throwOnMissingField) {
+    if (throwOnMissingField && included) {
       throw new Error(`Can't find field ${storeFieldKey} on object ${storeObj}.`);
     }
 

src/data/writeToStore.ts

@@ -33,6 +33,10 @@ import {
   IdGetter,
 } from './extensions';
 
+import {
+  shouldInclude,
+} from '../queries/directives';
+
 // import {
 //   printAST,
 // } from './debug';
@@ -130,24 +134,32 @@ export function writeSelectionSetToStore({
     //to us for the fragments.
     fragmentMap = {};
   }
+
   selectionSet.selections.forEach((selection) => {
     if (isField(selection)) {
       const resultFieldKey: string = resultKeyNameFromField(selection);
       const value: any = result[resultFieldKey];
+      const included = shouldInclude(selection, variables);
 
-      if (isUndefined(value)) {
+      if (isUndefined(value) && included) {
         throw new Error(`Can't find field ${resultFieldKey} on result object ${dataId}.`);
       }
 
-      writeFieldToStore({
-        dataId,
-        value,
-        variables,
-        store,
-        field: selection,
-        dataIdFromObject,
-        fragmentMap,
-      });
+      if (!isUndefined(value) && !included) {
+        throw new Error(`Found extra field ${resultFieldKey} on result object ${dataId}.`);
+      }
+
+      if (!isUndefined(value)) {
+        writeFieldToStore({
+          dataId,
+          value,
+          variables,
+          store,
+          field: selection,
+          dataIdFromObject,
+          fragmentMap,
+        });
+      }
     } else if (isInlineFragment(selection)) {
       // XXX what to do if this tries to write the same fields? Also, type conditions...
       writeSelectionSetToStore({

src/queries/directives.ts

@@ -0,0 +1,65 @@
+// Provides the methods that allow QueryManager to handle
+// the `skip` and `include` directives within GraphQL.
+import {
+  Selection,
+  Variable,
+  BooleanValue,
+} from 'graphql';
+
+
+export function shouldInclude(selection: Selection, variables?: { [name: string]: any }): Boolean {
+  if (!variables) {
+    variables = {};
+  }
+
+  if (!selection.directives) {
+    return true;
+  }
+
+  let res: Boolean = true;
+  selection.directives.forEach((directive) => {
+    // TODO should move this validation to GraphQL validation once that's implemented.
+    if (directive.name.value !== 'skip' && directive.name.value !== 'include') {
+      throw new Error(`Directive ${directive.name.value} not supported.`);
+    }
+
+    //evaluate the "if" argument and skip (i.e. return undefined) if it evaluates to true.
+    const directiveArguments = directive.arguments;
+    const directiveName = directive.name.value;
+    if (directiveArguments.length !== 1) {
+      throw new Error(`Incorrect number of arguments for the @${directiveName} directive.`);
+    }
+
+
+    const ifArgument = directive.arguments[0];
+    if (!ifArgument.name || ifArgument.name.value !== 'if') {
+      throw new Error(`Invalid argument for the @${directiveName} directive.`);
+    }
+
+    const ifValue = directive.arguments[0].value;
+    let evaledValue: Boolean = false;
+    if (!ifValue || ifValue.kind !== 'BooleanValue') {
+      // means it has to be a variable value if this is a valid @skip or @include directive
+      if (ifValue.kind !== 'Variable') {
+        throw new Error(`Invalid argument value for the @${directiveName} directive.`);
+      } else {
+        evaledValue = variables[(ifValue as Variable).name.value];
+        if (evaledValue === undefined) {
+          throw new Error(`Invalid variable referenced in @${directiveName} directive.`);
+        }
+      }
+    } else {
+      evaledValue = (ifValue as BooleanValue).value;
+    }
+
+    if (directiveName === 'skip') {
+      evaledValue = !evaledValue;
+    }
+
+    if (!evaledValue) {
+      res = false;
+    }
+  });
+
+  return res;
+}

src/store.ts

@@ -72,21 +72,29 @@ export function createApolloStore({
   reduxRootKey = 'apollo',
   initialState,
   config = {},
+  reportCrashes,
 }: {
   reduxRootKey?: string,
   initialState?: any,
   config?: ApolloReducerConfig,
+  reportCrashes?: boolean,
 } = {}): ApolloStore {
   const enhancers = [];
 
+  if (reportCrashes === undefined) {
+    reportCrashes = true;
+  }
+
   if (typeof window !== 'undefined') {
     const anyWindow = window as any;
     if (anyWindow.devToolsExtension) {
       enhancers.push(anyWindow.devToolsExtension());
     }
   }
 
-  enhancers.push(applyMiddleware(crashReporter));
+  if (reportCrashes) {
+    enhancers.push(applyMiddleware(crashReporter));
+  }
 
   return createStore(
     combineReducers({ [reduxRootKey]: createApolloReducer(config) }),

test/client.ts

@@ -27,6 +27,14 @@ import {
   applyMiddleware,
 } from 'redux';
 
+import {
+  createApolloStore,
+} from '../src/store';
+
+import {
+  QueryManager,
+} from '../src/QueryManager';
+
 import {
   createNetworkInterface,
   HTTPNetworkInterface,
@@ -710,6 +718,88 @@ describe('client', () => {
     });
   });
 
+  describe('directives', () => {
+    it('should be able to send a query with a skip directive true', (done) => {
+      const query = gql`
+        query {
+          fortuneCookie @skip(if: true)
+        }`;
+      const result = {};
+      const networkInterface = mockNetworkInterface(
+        {
+          request: { query },
+          result: { data: result },
+        }
+      );
+      const client = new ApolloClient({
+        networkInterface,
+      });
+      client.query({ query }).then((actualResult) => {
+        assert.deepEqual(actualResult.data, result);
+        done();
+      });
+    });
+
+    it('should be able to send a query with a skip directive false', (done) => {
+      const query = gql`
+        query {
+          fortuneCookie @skip(if: false)
+        }`;
+      const result = {
+        fortuneCookie: 'result',
+      };
+      const networkInterface = mockNetworkInterface(
+        {
+          request: { query },
+          result: { data: result },
+        }
+      );
+      const client = new ApolloClient({
+        networkInterface,
+      });
+      client.query({ query }).then((actualResult) => {
+        assert.deepEqual(actualResult.data, result);
+        done();
+      });
+    });
+
+    it('should reject the query promise if skipped data arrives in the result', (done) => {
+      const query = gql`
+        query {
+          fortuneCookie @skip(if: true)
+          otherThing
+        }`;
+      const result = {
+        fortuneCookie: 'you will go far',
+        otherThing: 'false',
+      };
+      const networkInterface = mockNetworkInterface(
+        {
+          request: { query },
+          result: { data: result },
+        }
+      );
+      const client = new ApolloClient({
+        networkInterface,
+      });
+      // we need this so it doesn't print out a bunch of stuff we don't need
+      // when we're trying to test an exception.
+      client.store = createApolloStore({ reportCrashes: false });
+      client.queryManager = new QueryManager({
+        networkInterface,
+        store: client.store,
+        reduxRootKey: 'apollo',
+      });
+
+      client.query({ query }).then(() => {
+        // do nothing
+      }).catch((error) => {
+        assert.include(error.message, 'Found extra field');
+        done();
+      });
+    });
+  });
+
   it('should send operationName along with the query to the server', (done) => {
     const query = gql`
       query myQueryName {