add failing test case for #138 (#150)

* add failing test case for #138

* well this is odd

* add remount polling test

* verion bump

Changelog.md

@@ -2,6 +2,10 @@
 
 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.
 
+### v0.4.6
+
+- Bug: Fixed issue with variable merging after fetchMore [#150](https://github.com/apollostack/react-apollo/pull/150)
+
 ### v0.4.5
 
 - Feature: Allow options value to be an object instead of a method. [#144](https://github.com/apollostack/react-apollo/issues/144)

package.json

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

src/graphql.tsx

@@ -420,9 +420,9 @@ export default function graphql(
 
         const next = ({ data = oldData, loading, error }: any) => {
 
-          // XXX use passed loading after https://github.com/apollostack/apollo-client/pull/467
           const { queryId } = observableQuery;
-          let currentVariables = this.store.getState()[reduxRootKey].queries[queryId].variables;
+          let initialVariables = this.store.getState()[reduxRootKey].queries[queryId].variables;
+
           const resultKeyConflict: boolean = (
             'errors' in data ||
             'loading' in data ||
@@ -447,7 +447,7 @@ export default function graphql(
           // cache the changed data for next check
           oldData = assign({}, data);
           this.data = assign({
-            variables: currentVariables,
+            variables: this.data.variables || initialVariables,
             loading,
             refetch,
             startPolling,

test/mocks/mockNetworkInterface.ts

@@ -28,6 +28,7 @@ export interface MockedResponse {
   result?: GraphQLResult;
   error?: Error;
   delay?: number;
+  newData?: () => any;
 }
 
 export class MockNetworkInterface implements NetworkInterface {
@@ -63,7 +64,13 @@ export class MockNetworkInterface implements NetworkInterface {
         throw new Error('No more mocked responses for the query: ' + print(request.query));
       }
 
-      const { result, error, delay } = this.mockedResponsesByKey[key].shift() || {} as any;
+      const original = [...this.mockedResponsesByKey[key]];
+      const { result, error, delay, newData } = this.mockedResponsesByKey[key].shift() || {} as any;
+
+      if (newData) {
+        original[0].result = newData();
+        this.mockedResponsesByKey[key].push(original[0]);
+      }
 
       if (!result && !error) {
         throw new Error(`Mocked response should contain either result or error: ${key}`);

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

@@ -100,6 +100,43 @@ describe('queries', () => {
     mount(<ProviderMock client={client}><Container /></ProviderMock>);
   });
 
+  it('correctly rebuilds props on remount', (done) => {
+    const query = gql`query pollingPeople { allPeople(first: 1) { people { name } } }`;
+    const data = { allPeople: { people: [ { name: 'Darth Skywalker' } ] } };
+    const networkInterface = mockNetworkInterface(
+      { request: { query }, result: { data }, newData: () => ({
+        data: {
+          allPeople: { people: [ { name: `Darth Skywalker - ${Math.random()}` } ] },
+        }
+      }) }
+    );
+    const client = new ApolloClient({ networkInterface });
+    let wrapper, app, count = 0;
+
+    @graphql(query, { options: { pollInterval: 10 }})
+    class Container extends React.Component<any, any> {
+      componentWillReceiveProps(props) {
+        if (count === 1) { // has data
+          wrapper.unmount();
+          wrapper = mount(app);
+        }
+
+        if (count === 10) {
+          wrapper.unmount();
+          done();
+        }
+        count++;
+      }
+      render() {
+        return null;
+      }
+    };
+
+    app = <ProviderMock client={client}><Container /></ProviderMock>;
+
+    wrapper = mount(app);
+  });
+
   it('executes a query with two root fields', (done) => {
     const query = gql`query people {
       allPeople(first: 1) { people { name } }
@@ -557,6 +594,7 @@ describe('queries', () => {
           expect(props.data.loading).to.be.true;
           expect(props.data.allPeople).to.deep.equal(data.allPeople);
         } else if (count === 2) {
+          expect(props.data.variables).to.deep.equal(variables2);
           expect(props.data.loading).to.be.false;
           expect(props.data.allPeople.people).to.deep.equal(
             data.allPeople.people.concat(data1.allPeople.people)