Fixes refetchQueries with string using wrong variables

Changelog.md

@@ -23,6 +23,8 @@
 - Mutation errors are now properly returned as a render prop, when using 
   a default `errorPolicy` of `all`.  <br/>
   [@amacleay](https://github.com/amacleay) in [#2374](https://github.com/apollographql/react-apollo/pull/2374)
+- `<Mutation />` `refetchQueries` triggered by name (string) will now use the correct variables. <br/>
+  [@fracmal](https://github.com/fracmak) in [#2422](https://github.com/apollographql/react-apollo/pull/2422)
 
 ## 2.2.2 (September 28, 2018)
 

src/Query.tsx

@@ -286,18 +286,26 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
   private initializeQueryObservable(props: QueryProps<TData, TVariables>) {
     const opts = this.extractOptsFromProps(props);
     // save for backwards compat of refetcherQueries without a recycler
+    this.setOperations(opts);
+    this.queryObservable = this.client.watchQuery(opts);
+  }
+
+  private setOperations(props: QueryProps<TData, TVariables>) {
     if (this.context!.operations) {
       this.context!.operations!.set(this.operation!.name, {
-        query: opts.query,
-        variables: opts.variables,
+        query: props.query,
+        variables: props.variables,
       });
     }
-    this.queryObservable = this.client.watchQuery(opts);
   }
 
   private updateQuery(props: QueryProps<TData, TVariables>) {
     // if we skipped initially, we may not have yet created the observable
-    if (!this.queryObservable) this.initializeQueryObservable(props);
+    if (!this.queryObservable) {
+      this.initializeQueryObservable(props);
+    } else {
+      this.setOperations(props);
+    }
 
     this.queryObservable!.setOptions(this.extractOptsFromProps(props))
       // The error will be passed to the child container, so we don't

test/client/Mutation.test.tsx

@@ -911,6 +911,113 @@ it('allows a refetchQueries prop', done => {
   );
 });
 
+it('allows a refetchQueries prop as string and variables have updated', done => {
+  const query = gql`
+    query people($first: Int) {
+      allPeople(first: $first) {
+        people {
+          name
+        }
+      }
+    }
+  `;
+
+  const peopleData1 = {
+    allPeople: { people: [{ name: 'Luke Skywalker', __typename: 'Person' }], __typename: 'People' },
+  };
+  const peopleData2 = {
+    allPeople: { people: [{ name: 'Han Solo', __typename: 'Person' }], __typename: 'People' },
+  };
+  const peopleData3 = {
+    allPeople: { people: [{ name: 'Lord Vader', __typename: 'Person' }], __typename: 'People' },
+  };
+  const peopleMocks = [
+    ...mocks,
+    {
+      request: { query, variables: { first: 1 } },
+      result: { data: peopleData1 },
+    },
+    {
+      request: { query, variables: { first: 2 } },
+      result: { data: peopleData2 },
+    },
+    {
+      request: { query, variables: { first: 2 } },
+      result: { data: peopleData3 },
+    },
+  ];
+
+  const refetchQueries = ['people'];
+
+  let count = 0;
+  class Component extends React.Component {
+    state = {
+      variables: {
+        first: 1,
+      },
+    };
+    componentDidMount() {
+      setTimeout(() => {
+        this.setState({
+          variables: {
+            first: 2,
+          },
+        });
+      }, 50);
+    }
+    render() {
+      const { variables } = this.state;
+
+      return (
+        <Mutation mutation={mutation} refetchQueries={refetchQueries}>
+          {(createTodo, resultMutation) => (
+            <Query query={query} variables={variables}>
+              {resultQuery => {
+                if (count === 0) {
+                  // initial loading
+                  expect(resultQuery.loading).toBe(true);
+                } else if (count === 1) {
+                  // initial loaded
+                  expect(resultQuery.loading).toBe(false);
+                } else if (count === 2) {
+                  // first: 2 loading
+                  expect(resultQuery.loading).toBe(true);
+                } else if (count === 3) {
+                  // first: 2 loaded
+                  expect(resultQuery.loading).toBe(false);
+                  setTimeout(() => {
+                    createTodo();
+                  });
+                } else if (count === 4) {
+                  // mutation loading
+                  expect(resultMutation.loading).toBe(true);
+                } else if (count === 5) {
+                  // mutation loaded
+                  expect(resultMutation.loading).toBe(false);
+                } else if (count === 6) {
+                  // query refetched
+                  expect(resultQuery.loading).toBe(false);
+                  expect(resultMutation.loading).toBe(false);
+                  expect(stripSymbols(resultQuery.data)).toEqual(peopleData3);
+                  done();
+                }
+                count++;
+                return null;
+              }}
+            </Query>
+          )}
+        </Mutation>
+      );
+    }
+  }
+
+  mount(
+    <MockedProvider mocks={peopleMocks}>
+      <Component />
+    </MockedProvider>,
+  );
+});
+
 it('allows refetchQueries to be passed to the mutate function', done => {
   const query = gql`
     query getTodo {