Fix Regression where variables passed in graphql HOC options were not merged with mutation variables

Changelog.md

@@ -61,6 +61,9 @@
   [@olistic](https://github.com/olistic) in [#2190](https://github.com/apollographql/react-apollo/pull/2190)
 - Import `lodash/flowRight` using ES import to allow for treeshaking. <br/>
   [@Pajn](https://github.com/Pajn) in [#2332](https://github.com/apollographql/react-apollo/pull/2332)
+- Fixed a regression where `variables` passed in `graphql` HOC `options` were
+  not merged with mutation `variables`. <br/>
+  [@samginn](https://github.com/samginn) in [#2216](https://github.com/apollographql/react-apollo/pull/2216)
 
 ## 2.1.11 (August 9, 2018)
 

src/Mutation.tsx

@@ -189,7 +189,9 @@ class Mutation<TData = any, TVariables = OperationVariables> extends React.Compo
       context = {},
       awaitRefetchQueries = false,
     } = this.props;
-    let refetchQueries = options.refetchQueries || this.props.refetchQueries;
+    const mutateOptions = { ...options };
+
+    let refetchQueries = mutateOptions.refetchQueries || this.props.refetchQueries;
     // XXX this will be removed in the 3.0 of Apollo Client. Currently, we
     // support refectching of named queries which just pulls the latest
     // variables to match. This forces us to either a) keep all queries around
@@ -204,18 +206,21 @@ class Mutation<TData = any, TVariables = OperationVariables> extends React.Compo
           return this.context.operations.get(x) || x;
         return x;
       });
-      delete options.refetchQueries;
+      delete mutateOptions.refetchQueries;
     }
 
+    const mutateVariables = Object.assign({}, variables, mutateOptions.variables);
+    delete mutateOptions.variables;
+
     return this.client.mutate({
       mutation,
-      variables,
       optimisticResponse,
       refetchQueries,
       awaitRefetchQueries,
       update,
       context,
-      ...options,
+      variables: mutateVariables,
+      ...mutateOptions,
     });
   };
 

test/client/graphql/mutations/index.test.tsx

@@ -168,4 +168,45 @@ describe('graphql(mutation)', () => {
       </ApolloProvider>,
     );
   });
+
+  it('can execute a mutation with variables from BOTH options and arguments', done => {
+    const queryWithVariables = gql`
+      mutation addPerson($first: Int!, $second: Int!) {
+        allPeople(first: $first) {
+          people {
+            name
+          }
+        }
+      }
+    `;
+    client = createClient(expectedData, queryWithVariables, { first: 1, second: 2 });
+
+    interface Props {}
+
+    const Container = graphql<Props>(queryWithVariables, {
+      options: () => ({
+        variables: { first: 1 },
+      }),
+    })(
+      class extends React.Component<ChildProps<Props>> {
+        componentDidMount() {
+          this.props.mutate!({
+            variables: { second: 2 },
+          }).then(result => {
+            expect(stripSymbols(result && result.data)).toEqual(expectedData);
+            done();
+          });
+        }
+        render() {
+          return null;
+        }
+      },
+    );
+
+    renderer.create(
+      <ApolloProvider client={client}>
+        <Container />
+      </ApolloProvider>,
+    );
+  });
 });