UpdateQuery in componentWillMount (#203)

* failing test for updateQuery in componentWillMount

* fix #202

Changelog.md

@@ -4,6 +4,10 @@ Expect active development and potentially significant breaking changes in the `0
 
 ### vNext
 
+### v0.5.3
+
+- Bug: Fixed issue with updateQuery not being present during componentWillMount [#203](https://github.com/apollostack/react-apollo/pull/203)
+
 ### v0.5.2
 
 - Feature: Allow optional variables by passing null value on behalf of the variable [#200](https://github.com/apollostack/react-apollo/pull/200)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-apollo",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "React data container for Apollo Client",
   "main": "index.js",
   "scripts": {

src/graphql.tsx

@@ -253,6 +253,7 @@ export default function graphql(
       // request / action storage
       private queryObservable: ObservableQuery | Object;
       private querySubscription: Subscription | Object;
+      private updateQueryMethod: any;
 
       // calculated switches to control rerenders
       private haveOwnPropsChanged: boolean;
@@ -350,6 +351,9 @@ export default function graphql(
           return this.client.query(opts);
         };
 
+        // XXX type this better
+        queryData.updateQuery = (mapFn: any) => this.updateQueryMethod = mapFn;
+
         if (!forceFetch) {
           try {
             const result = readQueryFromStore({
@@ -417,6 +421,9 @@ export default function graphql(
         const observableQuery = watchQuery(queryOptions);
         const { queryId } = observableQuery;
 
+        // bind any eariler set updateQuery method
+        if (this.updateQueryMethod) observableQuery.updateQuery(this.updateQueryMethod);
+
         // the shape of the query has changed
         if (previousQuery.queryId && previousQuery.queryId !== queryId) {
           this.data = assign(this.data, { loading: true });

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

@@ -1173,6 +1173,28 @@ describe('queries', () => {
     mount(<ProviderMock client={client}><Container /></ProviderMock>);
   });
 
+  it('exposes updateQuery as part of the props api during componentWillMount', (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> {
+      componentWillMount() { // tslint:disable-line
+        expect(this.props.data.updateQuery).to.be.exist;
+        expect(this.props.data.updateQuery).to.be.instanceof(Function);
+        expect(this.props.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' } ] } };