From 9a6d36154e802a4914ea17b85145b71a2063c282 Mon Sep 17 00:00:00 2001
From: Quentin Cuvillier <cuvillier.quentin@gmail.com>
Date: Sun, 29 Apr 2018 18:57:03 -0700
Subject: [PATCH 01/10] Mark Query context client as optional and always use
 props client over context client.

---
 src/Query.tsx              | 45 ++++++++++++++++++-------------
 test/client/Query.test.tsx | 55 +++++++++++++++++++++-----------------
 2 files changed, 57 insertions(+), 43 deletions(-)

diff --git a/src/Query.tsx b/src/Query.tsx
index c47d0ae910..97a12e33bd 100644
--- a/src/Query.tsx
+++ b/src/Query.tsx
@@ -116,7 +116,7 @@ export interface QueryProps<TData = any, TVariables = OperationVariables> {
 }
 
 export interface QueryContext {
-  client: ApolloClient<Object>;
+  client?: ApolloClient<Object>;
   operations?: Map<string, { query: DocumentNode; variables: any }>;
 }
 
@@ -124,11 +124,12 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
   QueryProps<TData, TVariables>
 > {
   static contextTypes = {
-    client: PropTypes.object.isRequired,
+    client: PropTypes.object,
     operations: PropTypes.object,
   };
 
   static propTypes = {
+    client: PropTypes.object,
     children: PropTypes.func.isRequired,
     fetchPolicy: PropTypes.string,
     notifyOnNetworkStatusChange: PropTypes.bool,
@@ -160,11 +161,7 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
   constructor(props: QueryProps<TData, TVariables>, context: QueryContext) {
     super(props, context);
 
-    this.client = props.client || context.client;
-    invariant(
-      !!this.client,
-      `Could not find "client" in the context of Query or as passed props. Wrap the root component in an <ApolloProvider>`,
-    );
+    this.client = this.getClient(props, context);
     this.initializeQueryObservable(props);
   }
 
@@ -208,26 +205,20 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
       return;
     }
 
-    const { client } = nextProps;
-    if (
-      shallowEqual(this.props, nextProps) &&
-      (this.client === client || this.client === nextContext.client)
-    ) {
+    const nextClient = this.getClient(nextProps, nextContext);
+
+    if (shallowEqual(this.props, nextProps) && this.client === nextClient) {
       return;
     }
 
-    if (this.client !== client && this.client !== nextContext.client) {
-      if (client) {
-        this.client = client;
-      } else {
-        this.client = nextContext.client;
-      }
+    if (this.client !== nextClient) {
+      this.client = nextClient;
       this.removeQuerySubscription();
       this.queryObservable = null;
       this.previousData = {};
-
       this.updateQuery(nextProps);
     }
+
     if (this.props.query !== nextProps.query) {
       this.removeQuerySubscription();
     }
@@ -351,6 +342,22 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
     Object.assign(this.queryObservable!, { lastError, lastResult });
   }
 
+  private getClient(
+    props: QueryProps<TData, TVariables>,
+    context: QueryContext,
+  ): ApolloClient<Object> {
+    const client = props.client || context.client;
+
+    invariant(
+      !!client,
+      'Could not find "client" in the context of Query or as passed props.',
+      'Wrap the root component in an <ApolloProvider>',
+    );
+
+    // fixme: TS doesn't infer that the type cannot be undefined after the invariant.
+    return client as ApolloClient<Object>;
+  }
+
   private updateCurrentData = () => {
     // force a rerender that goes through shouldComponentUpdate
     if (this.hasMounted) this.forceUpdate();
diff --git a/test/client/Query.test.tsx b/test/client/Query.test.tsx
index c4c76cfbcb..7eec945246 100644
--- a/test/client/Query.test.tsx
+++ b/test/client/Query.test.tsx
@@ -889,53 +889,60 @@ describe('Query component', () => {
     });
 
     it('if the client changes in the context', done => {
+      function newClient(data: Object) {
+        const link = mockSingleLink({
+          request: { query: allPeopleQuery },
+          result: { data },
+        });
+
+        return new ApolloClient({
+          link,
+          cache: new Cache({ addTypename: false }),
+        });
+      }
+
       const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-      const link1 = mockSingleLink({
-        request: { query: allPeopleQuery },
-        result: { data: data1 },
-      });
-      const client1 = new ApolloClient({
-        link: link1,
-        cache: new Cache({ addTypename: false }),
-      });
+      const client1 = newClient(data1);
 
       const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } };
-      const link2 = mockSingleLink({
-        request: { query: allPeopleQuery },
-        result: { data: data2 },
-      });
-      const client2 = new ApolloClient({
-        link: link2,
-        cache: new Cache({ addTypename: false }),
-      });
+      const client2 = newClient(data2);
+
+      const data3 = { allPeople: { people: [{ name: 'Frodo' }] } };
+      const client3 = newClient(data3);
 
       let count = 0;
+
       class Component extends React.Component {
         state = {
-          client: client1,
+          propClient: undefined,
+          providerClient: client1,
         };
 
         render() {
           return (
-            <ApolloProvider client={this.state.client}>
-              <Query query={allPeopleQuery}>
+            <ApolloProvider client={this.state.providerClient}>
+              <Query query={allPeopleQuery} client={this.state.propClient}>
                 {result => {
                   if (result.loading) {
                     return null;
                   }
+
                   catchAsyncError(done, () => {
                     if (count === 0) {
                       expect(stripSymbols(result.data)).toEqual(data1);
-                      setTimeout(() => {
-                        this.setState({
-                          client: client2,
-                        });
-                      }, 0);
+                      setTimeout(() => this.setState({ providerClient: client2 }), 0);
                     }
+
                     if (count === 1) {
                       expect(stripSymbols(result.data)).toEqual(data2);
+                      setTimeout(() => this.setState({ propClient: client3 }), 0);
+                    }
+
+                    if (count === 2) {
+                      expect(stripSymbols(result.data)).toEqual(data3);
                       done();
                     }
+
                     count++;
                   });
 

From a9512d179694545acc3aacd78110db303545cafd Mon Sep 17 00:00:00 2001
From: Quentin Cuvillier <cuvillier.quentin@gmail.com>
Date: Sun, 29 Apr 2018 21:37:24 -0700
Subject: [PATCH 02/10] write test as an array of steps

---
 test/client/Query.test.tsx | 75 ++++++++++++++++++++++----------------
 1 file changed, 44 insertions(+), 31 deletions(-)

diff --git a/test/client/Query.test.tsx b/test/client/Query.test.tsx
index 7eec945246..8f213b4504 100644
--- a/test/client/Query.test.tsx
+++ b/test/client/Query.test.tsx
@@ -889,61 +889,74 @@ describe('Query component', () => {
     });
 
     it('if the client changes in the context', done => {
-      function newClient(data: Object) {
+      function newClient(name: string) {
         const link = mockSingleLink({
           request: { query: allPeopleQuery },
-          result: { data },
+          result: { data: { allPeople: { people: [{ name }] } } },
         });
 
-        return new ApolloClient({
-          link,
-          cache: new Cache({ addTypename: false }),
-        });
+        return new ApolloClient({ link, cache: new Cache({ addTypename: false }) });
       }
 
-      const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
-      const client1 = newClient(data1);
-
-      const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } };
-      const client2 = newClient(data2);
+      const AckbarClient = newClient('Admiral Ackbar');
+      const LukeClient = newClient('Luke Skywalker');
+      const HanClient = newClient('Han Solo');
 
-      const data3 = { allPeople: { people: [{ name: 'Frodo' }] } };
-      const client3 = newClient(data3);
+      const steps = [
+        {
+          name: null,
+          nextState: { query: null, provider: AckbarClient },
+        },
+        {
+          name: 'Admiral Ackbar',
+          nextState: { query: null, provider: LukeClient },
+        },
+        {
+          name: 'Luke Skywalker',
+          nextState: { query: HanClient, provider: LukeClient },
+        },
+        {
+          name: 'Han Solo',
+          nextState: { query: null, provider: AckbarClient },
+        },
+        {
+          name: 'Admiral Ackbar',
+          nextState: null,
+        },
+      ];
 
       let count = 0;
 
-      class Component extends React.Component {
-        state = {
-          propClient: undefined,
-          providerClient: client1,
-        };
+      class Component extends React.Component<any, any> {
+        componentDidMount() {
+          this.setState(steps[0].nextState);
+        }
 
         render() {
+          if (!this.state) {
+            return null;
+          }
+
           return (
-            <ApolloProvider client={this.state.providerClient}>
-              <Query query={allPeopleQuery} client={this.state.propClient}>
+            <ApolloProvider client={this.state.provider}>
+              <Query query={allPeopleQuery} client={this.state.query}>
                 {result => {
                   if (result.loading) {
                     return null;
                   }
 
                   catchAsyncError(done, () => {
-                    if (count === 0) {
-                      expect(stripSymbols(result.data)).toEqual(data1);
-                      setTimeout(() => this.setState({ providerClient: client2 }), 0);
-                    }
+                    const step = steps[count++];
 
-                    if (count === 1) {
-                      expect(stripSymbols(result.data)).toEqual(data2);
-                      setTimeout(() => this.setState({ propClient: client3 }), 0);
+                    if (step.name) {
+                      expect(result.data.allPeople.people[0].name).toEqual(step.name);
                     }
 
-                    if (count === 2) {
-                      expect(stripSymbols(result.data)).toEqual(data3);
+                    if (step.nextState) {
+                      setTimeout(() => this.setState(step.nextState), 0);
+                    } else {
                       done();
                     }
-
-                    count++;
                   });
 
                   return null;

From 41cca48dee5b14ac4a04b4989a75cd831217c733 Mon Sep 17 00:00:00 2001
From: Quentin Cuvillier <cuvillier.quentin@gmail.com>
Date: Sat, 26 May 2018 02:58:36 -0700
Subject: [PATCH 03/10] better test

---
 test/client/Query.test.tsx | 98 +++++++++++++++++++-------------------
 1 file changed, 50 insertions(+), 48 deletions(-)

diff --git a/test/client/Query.test.tsx b/test/client/Query.test.tsx
index 8f213b4504..d3e7d164e7 100644
--- a/test/client/Query.test.tsx
+++ b/test/client/Query.test.tsx
@@ -8,6 +8,7 @@ import catchAsyncError from '../test-utils/catchAsyncError';
 import stripSymbols from '../test-utils/stripSymbols';
 import { DocumentNode } from 'graphql';
 import gql from 'graphql-tag';
+import { wrap } from 'module';
 
 const allPeopleQuery: DocumentNode = gql`
   query people {
@@ -888,7 +889,9 @@ describe('Query component', () => {
       );
     });
 
-    it('if the client changes in the context', done => {
+    it('use client from props or context', done => {
+      jest.useFakeTimers();
+
       function newClient(name: string) {
         const link = mockSingleLink({
           request: { query: allPeopleQuery },
@@ -898,76 +901,75 @@ describe('Query component', () => {
         return new ApolloClient({ link, cache: new Cache({ addTypename: false }) });
       }
 
-      const AckbarClient = newClient('Admiral Ackbar');
-      const LukeClient = newClient('Luke Skywalker');
-      const HanClient = newClient('Han Solo');
-
-      const steps = [
+      // simulate prop & context client changes
+      // and assert that the <Query /> component refresh correctly.
+      const propsChanges = [
         {
-          name: null,
-          nextState: { query: null, provider: AckbarClient },
+          propsClient: null,
+          contextClient: newClient('Admiral Ackbar'),
+          renderedResult: (result: any) =>
+            expect(result.data.allPeople.people[0].name).toEqual('Admiral Ackbar'),
         },
         {
-          name: 'Admiral Ackbar',
-          nextState: { query: null, provider: LukeClient },
+          propsClient: null,
+          contextClient: newClient('Luke Skywalker'),
+          renderedResult: (result: any) =>
+            expect(result.data.allPeople.people[0].name).toEqual('Luke Skywalker'),
         },
         {
-          name: 'Luke Skywalker',
-          nextState: { query: HanClient, provider: LukeClient },
+          propsClient: newClient('Han Solo'),
+          contextClient: newClient('Luke Skywalker'),
+          renderedResult: (result: any) =>
+            expect(result.data.allPeople.people[0].name).toEqual('Han Solo'),
         },
         {
-          name: 'Han Solo',
-          nextState: { query: null, provider: AckbarClient },
+          propsClient: null,
+          contextClient: newClient('Admiral Ackbar'),
+          renderedResult: (result: any) =>
+            expect(result.data.allPeople.people[0].name).toEqual('Admiral Ackbar'),
         },
         {
-          name: 'Admiral Ackbar',
-          nextState: null,
+          propsClient: newClient('Luke Skywalker'),
+          contextClient: null,
+          renderedResult: (result: any) =>
+            expect(result.data.allPeople.people[0].name).toEqual('Luke Skywalker'),
         },
       ];
 
-      let count = 0;
-
       class Component extends React.Component<any, any> {
-        componentDidMount() {
-          this.setState(steps[0].nextState);
-        }
-
         render() {
-          if (!this.state) {
+          if (Object.keys(this.props).length === 0) {
             return null;
           }
 
-          return (
-            <ApolloProvider client={this.state.provider}>
-              <Query query={allPeopleQuery} client={this.state.query}>
-                {result => {
-                  if (result.loading) {
-                    return null;
-                  }
-
-                  catchAsyncError(done, () => {
-                    const step = steps[count++];
+          const query = (
+            <Query query={allPeopleQuery} client={this.props.propsClient}>
+              {result => {
+                if (result.data && result.data.allPeople) {
+                  this.props.renderedResult(result);
+                }
 
-                    if (step.name) {
-                      expect(result.data.allPeople.people[0].name).toEqual(step.name);
-                    }
+                return null;
+              }}
+            </Query>
+          );
 
-                    if (step.nextState) {
-                      setTimeout(() => this.setState(step.nextState), 0);
-                    } else {
-                      done();
-                    }
-                  });
+          if (this.props.contextClient) {
+            return <ApolloProvider client={this.props.contextClient}>{query}</ApolloProvider>;
+          }
 
-                  return null;
-                }}
-              </Query>
-            </ApolloProvider>
-          );
+          return query;
         }
       }
 
-      wrapper = mount(<Component />);
+      const component = mount(<Component />);
+
+      propsChanges.forEach(props => {
+        component.setProps(props);
+        jest.runAllTimers();
+      });
+
+      done();
     });
 
     it('with data while loading', done => {

From f4570e076c297b4cf3547d47529f004eb0c6310b Mon Sep 17 00:00:00 2001
From: Quentin Cuvillier <cuvillier.quentin@gmail.com>
Date: Sat, 26 May 2018 03:06:03 -0700
Subject: [PATCH 04/10] cleanup

---
 test/client/Query.test.tsx | 36 ++++++++++++++++--------------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/test/client/Query.test.tsx b/test/client/Query.test.tsx
index 5d9bb59b18..30803a79e9 100644
--- a/test/client/Query.test.tsx
+++ b/test/client/Query.test.tsx
@@ -8,7 +8,6 @@ import catchAsyncError from '../test-utils/catchAsyncError';
 import stripSymbols from '../test-utils/stripSymbols';
 import { DocumentNode } from 'graphql';
 import gql from 'graphql-tag';
-import { wrap } from 'module';
 
 const allPeopleQuery: DocumentNode = gql`
   query people {
@@ -901,38 +900,35 @@ describe('Query component', () => {
         return new ApolloClient({ link, cache: new Cache({ addTypename: false }) });
       }
 
-      // simulate prop & context client changes
-      // and assert that the <Query /> component refresh correctly.
+      const skywalker = newClient('Luke Skywalker');
+      const ackbar = newClient('Admiral Ackbar');
+      const solo = newClient('Han Solo');
+
       const propsChanges = [
         {
           propsClient: null,
-          contextClient: newClient('Admiral Ackbar'),
-          renderedResult: (result: any) =>
-            expect(result.data.allPeople.people[0].name).toEqual('Admiral Ackbar'),
+          contextClient: ackbar,
+          renderedName: (name: string) => expect(name).toEqual('Admiral Ackbar'),
         },
         {
           propsClient: null,
-          contextClient: newClient('Luke Skywalker'),
-          renderedResult: (result: any) =>
-            expect(result.data.allPeople.people[0].name).toEqual('Luke Skywalker'),
+          contextClient: skywalker,
+          renderedName: (name: string) => expect(name).toEqual('Luke Skywalker'),
         },
         {
-          propsClient: newClient('Han Solo'),
-          contextClient: newClient('Luke Skywalker'),
-          renderedResult: (result: any) =>
-            expect(result.data.allPeople.people[0].name).toEqual('Han Solo'),
+          propsClient: solo,
+          contextClient: skywalker,
+          renderedName: (name: string) => expect(name).toEqual('Han Solo'),
         },
         {
           propsClient: null,
-          contextClient: newClient('Admiral Ackbar'),
-          renderedResult: (result: any) =>
-            expect(result.data.allPeople.people[0].name).toEqual('Admiral Ackbar'),
+          contextClient: ackbar,
+          renderedName: (name: string) => expect(name).toEqual('Admiral Ackbar'),
         },
         {
-          propsClient: newClient('Luke Skywalker'),
+          propsClient: skywalker,
           contextClient: null,
-          renderedResult: (result: any) =>
-            expect(result.data.allPeople.people[0].name).toEqual('Luke Skywalker'),
+          renderedName: (name: string) => expect(name).toEqual('Luke Skywalker'),
         },
       ];
 
@@ -946,7 +942,7 @@ describe('Query component', () => {
             <Query query={allPeopleQuery} client={this.props.propsClient}>
               {result => {
                 if (result.data && result.data.allPeople) {
-                  this.props.renderedResult(result);
+                  this.props.renderedName(result.data.allPeople.people[0].name);
                 }
 
                 return null;

From 0b1251ad60e7b30035c9eab4db354032488fb6ec Mon Sep 17 00:00:00 2001
From: Quentin Cuvillier <cuvillier.quentin@gmail.com>
Date: Mon, 28 May 2018 20:53:09 -0700
Subject: [PATCH 05/10] Change <Mutation /> to share client same behaviour and
 interface of <Query />

---
 src/Mutation.tsx              | 14 +++---
 src/Query.tsx                 | 21 ++-------
 src/component-utils.tsx       | 26 +++++++++++
 test/client/Mutation.test.tsx | 87 ++++++++++++++++++++++++++++++++++-
 4 files changed, 123 insertions(+), 25 deletions(-)
 create mode 100644 src/component-utils.tsx

diff --git a/src/Mutation.tsx b/src/Mutation.tsx
index 5a3acfa4ba..b1b13686f5 100644
--- a/src/Mutation.tsx
+++ b/src/Mutation.tsx
@@ -8,6 +8,7 @@ const shallowEqual = require('fbjs/lib/shallowEqual');
 
 import { OperationVariables, RefetchQueriesProviderFn } from './types';
 import { parser, DocumentType } from './parser';
+import { getClient } from './component-utils';
 
 export interface MutationResult<TData = Record<string, any>> {
   data?: TData;
@@ -16,7 +17,7 @@ export interface MutationResult<TData = Record<string, any>> {
   called: boolean;
 }
 export interface MutationContext {
-  client: ApolloClient<Object>;
+  client?: ApolloClient<Object>;
   operations: Map<string, { query: DocumentNode; variables: any }>;
 }
 
@@ -52,6 +53,7 @@ export declare type MutationFn<TData = any, TVariables = OperationVariables> = (
 ) => Promise<void | FetchResult<TData>>;
 
 export interface MutationProps<TData = any, TVariables = OperationVariables> {
+  client?: ApolloClient<Object>;
   mutation: DocumentNode;
   ignoreResults?: boolean;
   optimisticResponse?: Object;
@@ -114,7 +116,7 @@ class Mutation<TData = any, TVariables = OperationVariables> extends React.Compo
     super(props, context);
 
     this.verifyContext(context);
-    this.client = context.client;
+    this.client = getClient(props, context);
 
     this.verifyDocumentIsMutation(props.mutation);
 
@@ -134,7 +136,8 @@ class Mutation<TData = any, TVariables = OperationVariables> extends React.Compo
     nextProps: MutationProps<TData, TVariables>,
     nextContext: MutationContext,
   ) {
-    if (shallowEqual(this.props, nextProps) && this.client === nextContext.client) {
+    const nextClient = getClient(nextProps, nextContext);
+    if (shallowEqual(this.props, nextProps) && this.client === nextClient) {
       return;
     }
 
@@ -142,8 +145,8 @@ class Mutation<TData = any, TVariables = OperationVariables> extends React.Compo
       this.verifyDocumentIsMutation(nextProps.mutation);
     }
 
-    if (this.client !== nextContext.client) {
-      this.client = nextContext.client;
+    if (this.client !== nextClient) {
+      this.client = nextClient;
       this.setState(initialState);
     }
   }
@@ -164,7 +167,6 @@ class Mutation<TData = any, TVariables = OperationVariables> extends React.Compo
 
   private runMutation = (options: MutationOptions<TVariables> = {}) => {
     this.onStartMutation();
-
     const mutationId = this.generateNewMutationId();
 
     return this.mutate(options)
diff --git a/src/Query.tsx b/src/Query.tsx
index 97a12e33bd..cbfeef93db 100644
--- a/src/Query.tsx
+++ b/src/Query.tsx
@@ -12,6 +12,7 @@ import { DocumentNode } from 'graphql';
 import { ZenObservable } from 'zen-observable-ts';
 import { OperationVariables, GraphqlQueryControls } from './types';
 import { parser, DocumentType, IDocumentDefinition } from './parser';
+import { getClient } from './component-utils';
 
 const shallowEqual = require('fbjs/lib/shallowEqual');
 const invariant = require('invariant');
@@ -161,7 +162,7 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
   constructor(props: QueryProps<TData, TVariables>, context: QueryContext) {
     super(props, context);
 
-    this.client = this.getClient(props, context);
+    this.client = getClient(props, context);
     this.initializeQueryObservable(props);
   }
 
@@ -205,7 +206,7 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
       return;
     }
 
-    const nextClient = this.getClient(nextProps, nextContext);
+    const nextClient = getClient(nextProps, nextContext);
 
     if (shallowEqual(this.props, nextProps) && this.client === nextClient) {
       return;
@@ -342,22 +343,6 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
     Object.assign(this.queryObservable!, { lastError, lastResult });
   }
 
-  private getClient(
-    props: QueryProps<TData, TVariables>,
-    context: QueryContext,
-  ): ApolloClient<Object> {
-    const client = props.client || context.client;
-
-    invariant(
-      !!client,
-      'Could not find "client" in the context of Query or as passed props.',
-      'Wrap the root component in an <ApolloProvider>',
-    );
-
-    // fixme: TS doesn't infer that the type cannot be undefined after the invariant.
-    return client as ApolloClient<Object>;
-  }
-
   private updateCurrentData = () => {
     // force a rerender that goes through shouldComponentUpdate
     if (this.hasMounted) this.forceUpdate();
diff --git a/src/component-utils.tsx b/src/component-utils.tsx
new file mode 100644
index 0000000000..7f3798caba
--- /dev/null
+++ b/src/component-utils.tsx
@@ -0,0 +1,26 @@
+import ApolloClient from 'apollo-client';
+const invariant = require('invariant');
+
+export interface CommonComponentProps {
+  client?: ApolloClient<Object>;
+}
+
+export interface CommonComponentContext {
+  client?: ApolloClient<Object>;
+}
+
+export function getClient(
+  props: CommonComponentProps,
+  context: CommonComponentContext,
+): ApolloClient<Object> {
+  const client = props.client || context.client;
+
+  invariant(
+    !!client,
+    'Could not find "client" in the context of Query or as passed props.',
+    'Wrap the root component in an <ApolloProvider>',
+  );
+
+  // fixme: TS doesn't infer that the type cannot be undefined after the invariant.
+  return client as ApolloClient<Object>;
+}
diff --git a/test/client/Mutation.test.tsx b/test/client/Mutation.test.tsx
index 38ea9bec05..ee94726b26 100644
--- a/test/client/Mutation.test.tsx
+++ b/test/client/Mutation.test.tsx
@@ -7,7 +7,7 @@ import { DataProxy } from 'apollo-cache';
 import { ExecutionResult } from 'graphql';
 
 import { ApolloProvider, Mutation, Query } from '../../src';
-import { MockedProvider, mockSingleLink } from '../../src/test-utils';
+import { MockedProvider, MockLink, mockSingleLink } from '../../src/test-utils';
 
 import stripSymbols from '../test-utils/stripSymbols';
 
@@ -66,6 +66,91 @@ const mocks = [
 
 const cache = new Cache({ addTypename: false });
 
+it('pick prop client over context client', async done => {
+  const mock = (text: string) => [
+    {
+      request: { query: mutation },
+      result: {
+        data: {
+          createTodo: {
+            __typename: 'Todo',
+            id: '99',
+            text,
+            completed: true,
+          },
+          __typename: 'Mutation',
+        },
+      },
+    },
+    {
+      request: { query: mutation },
+      result: {
+        data: {
+          createTodo: {
+            __typename: 'Todo',
+            id: '100',
+            text,
+            completed: true,
+          },
+          __typename: 'Mutation',
+        },
+      },
+    },
+  ];
+
+  const mocksProps = mock('This is the result of the prop client mutation.');
+  const mocksContext = mock('This is the result of the context client mutation.');
+
+  function mockClient(m: any) {
+    return new ApolloClient({
+      link: new MockLink(m, false),
+      cache: new Cache({ addTypename: false }),
+    });
+  }
+
+  const contextClient = mockClient(mocksContext);
+  const propsClient = mockClient(mocksProps);
+  const spy = jest.fn();
+
+  const Component = (props: any) => {
+    return (
+      <ApolloProvider client={contextClient}>
+        <Mutation client={props.propsClient} mutation={mutation}>
+          {createTodo => <button onClick={() => createTodo().then(spy)} />}
+        </Mutation>
+      </ApolloProvider>
+    );
+  };
+
+  const wrapper = mount(<Component />);
+  const button = wrapper.find('button').first();
+
+  // context client mutation
+  button.simulate('click');
+
+  // props client mutation
+  wrapper.setProps({ propsClient });
+  button.simulate('click');
+
+  // context client mutation
+  wrapper.setProps({ propsClient: undefined });
+  button.simulate('click');
+
+  // props client mutation
+  wrapper.setProps({ propsClient });
+  button.simulate('click');
+
+  setTimeout(() => {
+    expect(spy).toHaveBeenCalledTimes(4);
+    expect(spy).toHaveBeenCalledWith(mocksContext[0].result);
+    expect(spy).toHaveBeenCalledWith(mocksProps[0].result);
+    expect(spy).toHaveBeenCalledWith(mocksContext[1].result);
+    expect(spy).toHaveBeenCalledWith(mocksProps[1].result);
+
+    done();
+  }, 10);
+});
+
 it('performs a mutation', done => {
   let count = 0;
   const Component = () => (

From f4c5fe44137aa1ffe80b0d93bc662437264b3cbe Mon Sep 17 00:00:00 2001
From: Quentin Cuvillier <cuvillier.quentin@gmail.com>
Date: Sat, 2 Jun 2018 16:25:38 -0700
Subject: [PATCH 06/10] fix error message

---
 src/component-utils.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/component-utils.tsx b/src/component-utils.tsx
index 7f3798caba..f454061ea6 100644
--- a/src/component-utils.tsx
+++ b/src/component-utils.tsx
@@ -17,7 +17,7 @@ export function getClient(
 
   invariant(
     !!client,
-    'Could not find "client" in the context of Query or as passed props.',
+    'Could not find "client" in the context or as passed props.',
     'Wrap the root component in an <ApolloProvider>',
   );
 

From d7d1cebae22c9e14f8227f49cb384e092a531f35 Mon Sep 17 00:00:00 2001
From: Quentin Cuvillier <cuvillier.quentin@gmail.com>
Date: Thu, 7 Jun 2018 19:18:51 -0700
Subject: [PATCH 07/10] update <Subscriptions /> too

---
 src/Subscriptions.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/Subscriptions.tsx b/src/Subscriptions.tsx
index 18f435da64..e1a34d92f9 100644
--- a/src/Subscriptions.tsx
+++ b/src/Subscriptions.tsx
@@ -6,6 +6,7 @@ import { Observable } from 'apollo-link';
 import { DocumentNode } from 'graphql';
 import { ZenObservable } from 'zen-observable-ts';
 import { OperationVariables } from './types';
+import { getClient } from './component-utils';
 
 const shallowEqual = require('fbjs/lib/shallowEqual');
 const invariant = require('invariant');
@@ -20,6 +21,7 @@ export interface SubscriptionProps<TData = any, TVariables = OperationVariables>
   subscription: DocumentNode;
   variables?: TVariables;
   shouldResubscribe?: any;
+  client?: ApolloClient<Object>;
   children: (result: SubscriptionResult<TData>) => React.ReactNode;
 }
 
@@ -30,7 +32,7 @@ export interface SubscriptionState<TData = any> {
 }
 
 export interface SubscriptionContext {
-  client: ApolloClient<Object>;
+  client?: ApolloClient<Object>;
 }
 
 class Subscription<TData = any, TVariables = any> extends React.Component<
@@ -55,11 +57,7 @@ class Subscription<TData = any, TVariables = any> extends React.Component<
   constructor(props: SubscriptionProps<TData, TVariables>, context: SubscriptionContext) {
     super(props, context);
 
-    invariant(
-      !!context.client,
-      `Could not find "client" in the context of Subscription. Wrap the root component in an <ApolloProvider>`,
-    );
-    this.client = context.client;
+    this.client = getClient(props, context);
     this.initialize(props);
     this.state = this.getInitialState();
   }
@@ -72,9 +70,11 @@ class Subscription<TData = any, TVariables = any> extends React.Component<
     nextProps: SubscriptionProps<TData, TVariables>,
     nextContext: SubscriptionContext,
   ) {
+    const nextClient = getClient(nextProps, nextContext);
+
     if (
       shallowEqual(this.props.variables, nextProps.variables) &&
-      this.client === nextContext.client &&
+      this.client === nextClient &&
       this.props.subscription === nextProps.subscription
     ) {
       return;
@@ -85,8 +85,8 @@ class Subscription<TData = any, TVariables = any> extends React.Component<
       shouldResubscribe = !!shouldResubscribe(this.props, nextProps);
     }
     const shouldNotResubscribe = shouldResubscribe === false;
-    if (this.client !== nextContext.client) {
-      this.client = nextContext.client;
+    if (this.client !== nextClient) {
+      this.client = nextClient;
     }
 
     if (!shouldNotResubscribe) {

From 9e20ede97abdde933dd752a5b7266aef2c373497 Mon Sep 17 00:00:00 2001
From: Hugh Willson <hugh@octonary.com>
Date: Thu, 20 Sep 2018 08:57:34 -0400
Subject: [PATCH 08/10] Remove unnecessary code from merge

---
 src/Mutation.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/Mutation.tsx b/src/Mutation.tsx
index 4630ef7225..bccbf11541 100644
--- a/src/Mutation.tsx
+++ b/src/Mutation.tsx
@@ -118,12 +118,8 @@ class Mutation<TData = any, TVariables = OperationVariables> extends React.Compo
 
   constructor(props: MutationProps<TData, TVariables>, context: any) {
     super(props, context);
-
-    this.verifyContext(context);
     this.client = getClient(props, context);
-
     this.verifyDocumentIsMutation(props.mutation);
-
     this.mostRecentMutationId = 0;
     this.state = initialState;
   }

From ca8895e24ada2ca78fec386648c062a8ec9fa5f2 Mon Sep 17 00:00:00 2001
From: Hugh Willson <hugh@octonary.com>
Date: Thu, 20 Sep 2018 15:38:33 -0400
Subject: [PATCH 09/10] Remove duplicate `client` from merge

---
 src/Mutation.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Mutation.tsx b/src/Mutation.tsx
index bccbf11541..6a226280ac 100644
--- a/src/Mutation.tsx
+++ b/src/Mutation.tsx
@@ -69,7 +69,6 @@ export interface MutationProps<TData = any, TVariables = OperationVariables> {
   ) => React.ReactNode;
   onCompleted?: (data: TData) => void;
   onError?: (error: ApolloError) => void;
-  client?: ApolloClient<Object>;
   context?: Record<string, any>;
 }
 

From bceeff30fee8b3111f0379b53403d8e126616610 Mon Sep 17 00:00:00 2001
From: Hugh Willson <hugh@octonary.com>
Date: Thu, 20 Sep 2018 15:47:02 -0400
Subject: [PATCH 10/10] Changelog update

---
 Changelog.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/Changelog.md b/Changelog.md
index cd4cf3a0c5..13dd939577 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -42,6 +42,10 @@
   [@edorivai](https://github.com/edorivai) in [#1916](https://github.com/apollographql/react-apollo/pull/1916)
 - No longer building against Node 9 <br/>
   [@hwillson](https://github.com/hwillson) in [#2404](https://github.com/apollographql/react-apollo/pull/2404)
+- Make sure `<Subscription />`, `<Query />` & `<Mutation />` all support
+  using an Apollo Client instance configured in the `context` or via
+  props. <br/>
+  [@quentin-](https://github.com/quentin-) in [#1956](https://github.com/apollographql/react-apollo/pull/1956)
 
 ## 2.1.11 (August 9, 2018)