Use standby fetchPolicy for recycled queries (#671)

* Add skeleton for failing refetchQueries testcase (WIP)

* Update test case for refetching recycled queries

* Update testcase assertions

* Use standby fetchPolicy for recycled queries

* Remove irrelevant comments

* Update apollo-client version

Changelog.md

@@ -3,6 +3,7 @@
 Expect active development and potentially significant breaking changes in the `0.x` track. We'll try to be diligent about releasing a `1.0` version in a timely fashion (ideally within 1 or 2 months), so that we can take advantage of SemVer to signify breaking changes from that point on.
 
 ### vNext
+- Fix: Use `standby` fetchPolicy for recycled queries [PR #671](https://github.com/apollographql/react-apollo/pull/671)
 
 ### 1.1.3
 - Perf: Removed unneeded usage of shouldComponentUpdate [PR #661](https://github.com/apollographql/react-apollo/pull/661) inspired by [PR #653](https://github.com/apollographql/react-apollo/pull/653)

package.json

@@ -129,7 +129,7 @@
     "uglify-js": "^2.6.2"
   },
   "dependencies": {
-    "apollo-client": "^1.0.2",
+    "apollo-client": "^1.1.2",
     "graphql-anywhere": "^3.0.0",
     "graphql-tag": "^2.0.0",
     "hoist-non-react-statics": "^1.2.0",

src/graphql.tsx

@@ -641,7 +641,7 @@ class ObservableQueryRecycler {
     // Stop the query from polling when we recycle. Polling may resume when we
     // reuse it and call `setOptions`.
     observableQuery.setOptions({
-      fetchPolicy: 'cache-only',
+      fetchPolicy: 'standby',
       pollInterval: 0,
     });
 

test/react-web/client/graphql/mutations.test.tsx

@@ -627,4 +627,141 @@ describe('mutations', () => {
     }, 5);
   }));
 
+  it('will run `refetchQueries` for a recycled queries', () => new Promise((resolve, reject) => {
+    const mutation = gql`
+      mutation createTodo {
+        createTodo { id, text, completed }
+      }
+    `;
+
+    const mutationData = {
+      createTodo: {
+        id: '99',
+        text: 'This one was created with a mutation.',
+        completed: true,
+      },
+    };
+
+    const query = gql`
+      query todos($id: ID!) {
+        todo_list(id: $id) {
+          id, title, tasks { id, text, completed }
+        }
+      }
+    `;
+
+    const data = {
+      todo_list: { id: '123', title: 'how to apollo', tasks: [] },
+    };
+
+    const updatedData = {
+      todo_list: { id: '123', title: 'how to apollo', tasks: [mutationData.createTodo] },
+    };
+
+    const networkInterface = mockNetworkInterface(
+      { request: { query, variables: { id: '123' } }, result: { data } },
+      { request: { query: mutation }, result: { data: mutationData } },
+      {
+        request: { query, variables: { id: '123' } },
+        result: { data: updatedData }
+      },
+    );
+    const client = new ApolloClient({ networkInterface, addTypename: false });
+
+    let mutate;
+
+    @graphql(mutation, {})
+    class Mutation extends React.Component<any, any> {
+      componentDidMount () {
+        mutate = this.props.mutate;
+      }
+
+      render () {
+        return null;
+      }
+    }
+
+    let queryMountCount = 0;
+    let queryUnmountCount = 0;
+    let queryRenderCount = 0;
+
+    @graphql(query)
+    class Query extends React.Component<any, any> {
+      componentWillMount () {
+        queryMountCount++;
+      }
+
+      componentWillUnmount () {
+        queryUnmountCount++;
+      }
+
+      render () {
+        try {
+          switch (queryRenderCount++) {
+            case 0:
+              expect(this.props.data.loading).toBe(true);
+              expect(this.props.data.todo_list).toBeFalsy();
+              break;
+            case 1:
+              expect(this.props.data.loading).toBe(false);
+              expect(this.props.data.todo_list).toEqual({
+                id: '123',
+                title: 'how to apollo',
+                tasks: [],
+              });
+              break;
+            case 2:
+              expect(queryMountCount).toBe(2);
+              expect(queryUnmountCount).toBe(1);
+              expect(this.props.data.todo_list).toEqual(updatedData.todo_list);
+              break;
+            case 3:
+              expect(queryMountCount).toBe(2);
+              expect(queryUnmountCount).toBe(1);
+              expect(this.props.data.todo_list).toEqual(updatedData.todo_list);
+              break;
+            default:
+              throw new Error('Rendered too many times');
+          }
+        } catch (error) {
+          reject(error);
+        }
+        return null;
+      }
+    }
+
+    const wrapperMutation = renderer.create(
+      <ApolloProvider client={client}>
+        <Mutation/>
+      </ApolloProvider>
+    );
+
+    const wrapperQuery1 = renderer.create(
+      <ApolloProvider client={client}>
+        <Query id="123"/>
+      </ApolloProvider>
+    );
+
+    setTimeout(() => {
+      wrapperQuery1.unmount();
+
+      mutate({ refetchQueries: ['todos'] })
+        .then((...args) => {
+          setTimeout(() => {
+            // This re-renders the recycled query that should have been refetched while recycled.
+            const wrapperQuery2 = renderer.create(
+              <ApolloProvider client={client}>
+                <Query id="123"/>
+              </ApolloProvider>
+            );
+            resolve();
+          }, 5);
+        })
+        .catch((error) => {
+          reject(error);
+          throw error;
+        });
+    }, 5);
+  }));
+
 });