added update query (#193)

apollographql · Sep 6, 2016 · bbb85d8 · bbb85d8
1 parent e64bcef
commit bbb85d8
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 6 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -5,12 +5,15 @@ Expect active development and potentially significant breaking changes in the `0
 
 ### v0.5.0
 
+- Feature: Removed client as a prop and fixed warnings when not using ApolloProvider [#189](https://github.com/apollostack/react-apollo/pull/189)
+- Feature: Added updateQuery to data props
+
 - Bug: Fixed renderToStringWithData causing react warning [#169](https://github.com/apollostack/react-apollo/issues/169)
 - Bug: Fixed ssr fragment issue [#178](https://github.com/apollostack/react-apollo/pull/178)
-- Feature: Removed client as a prop and fixed warnings when not using ApolloProvider [#189](https://github.com/apollostack/react-apollo/pull/189)
 - Bug: Fixed loading state for skipped queries [#190](https://github.com/apollostack/react-apollo/pull/190)
 - Bug: Fixed loading state on remounted component with different variables
 
+
 ### v0.4.7
 
 - Bug: Fixed SSR issue with context [#165](https://github.com/apollostack/react-apollo/pull/165)

diff --git a/package.json b/package.json
@@ -48,10 +48,10 @@
   "peerDependencies": {
     "react": "0.14.x || 15.* || ^15.0.0",
     "redux": "^2.0.0 || ^3.0.0",
-    "apollo-client": "^0.4.0"
+    "apollo-client": "^0.4.12"
   },
   "devDependencies": {
-    "apollo-client": "^0.4.0",
+    "apollo-client": "0.4.13",
     "babel-jest": "^14.1.0",
     "babel-preset-react-native": "^1.9.0",
     "browserify": "^13.0.0",

diff --git a/src/graphql.tsx b/src/graphql.tsx
@@ -436,6 +436,7 @@ export default function graphql(
             fetchMore,
             startPolling,
             stopPolling,
+            updateQuery,
             oldData = {};
 
         const next = ({ data = oldData, loading, error }: any) => {
@@ -448,13 +449,14 @@ export default function graphql(
             'refetch' in data ||
             'fetchMore' in data ||
             'startPolling' in data ||
-            'stopPolling' in data
+            'stopPolling' in data ||
+            'updateQuery' in data
           );
 
           invariant(!resultKeyConflict,
             `the result of the '${graphQLDisplayName}' operation contains keys that ` +
             `conflict with the return object. 'errors', 'loading', ` +
-            `'startPolling', 'stopPolling', 'fetchMore', and 'refetch' cannot be ` +
+            `'startPolling', 'stopPolling', 'fetchMore', 'updateQuery', and 'refetch' cannot be ` +
             `returned keys`
           );
 
@@ -473,6 +475,7 @@ export default function graphql(
             stopPolling,
             fetchMore,
             error,
+            updateQuery,
           }, data);
 
           this.forceRenderChildren();
@@ -518,10 +521,13 @@ export default function graphql(
         fetchMore = createBoundRefetch((this.queryObservable as any).fetchMore);
         startPolling = (this.queryObservable as any).startPolling;
         stopPolling = (this.queryObservable as any).stopPolling;
+        updateQuery = (this.queryObservable as any).updateQuery;
 
         // XXX the tests seem to be keeping the error around?
         delete this.data.error;
-        this.data = assign(this.data, { refetch, startPolling, stopPolling, fetchMore, variables });
+        this.data = assign(this.data, {
+          refetch, startPolling, stopPolling, fetchMore, updateQuery, variables,
+        });
       }
 
       forceRenderChildren() {

diff --git a/test/react-web/client/graphql/queries.tsx b/test/react-web/client/graphql/queries.tsx
@@ -1127,4 +1127,59 @@ describe('queries', () => {
       </ProviderMock>);
   });
 
+  it('exposes updateQuery as part of the props api', (done) => {
+    const query = gql`query people { allPeople(first: 1) { people { name } } }`;
+    const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
+    const networkInterface = mockNetworkInterface({ request: { query }, result: { data } });
+    const client = new ApolloClient({ networkInterface });
+
+    @graphql(query)
+    class Container extends React.Component<any, any> {
+      componentWillReceiveProps({ data }) { // tslint:disable-line
+        expect(data.updateQuery).to.be.exist;
+        expect(data.updateQuery).to.be.instanceof(Function);
+        expect(data.updateQuery).to.not.throw;
+        done();
+      }
+      render() {
+        return null;
+      }
+    };
+
+    mount(<ProviderMock client={client}><Container /></ProviderMock>);
+  });
+
+  it('allows updating query results after query has finished', (done) => {
+    const query = gql`query people { allPeople(first: 1) { people { name } } }`;
+    const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } };
+    const data2 = { allPeople: { people: [ { name: 'Leia Skywalker' } ] } };
+    const networkInterface = mockNetworkInterface(
+      { request: { query }, result: { data } },
+      { request: { query }, result: { data: data2 } }
+    );
+    const client = new ApolloClient({ networkInterface });
+
+    let isUpdated;
+    @graphql(query)
+    class Container extends React.Component<any, any> {
+      componentWillReceiveProps(props) {
+        if (isUpdated) {
+          expect(props.data.allPeople).to.deep.equal(data2.allPeople);
+          done();
+          return;
+        } else {
+          isUpdated = true;
+          props.data.updateQuery((prev) => {
+            return data2;
+          });
+        }
+      }
+      render() {
+        return null;
+      }
+    };
+
+    mount(<ProviderMock client={client}><Container /></ProviderMock>);
+  });
+
 });