Refactor ApolloProvider/ApolloConsumer implementation to use React 16…

….3 context API

The old way of passing the context still exists side-by-side with the new way to allow gradual migration of <Query>, <Mutation> and other modules that access the context in the "old" way.

This should unlock "user space" experiments with react hooks and react-apollo because if yoou want to access the context(client) in a hook, the context has to be exposed using the "new" context API

closes #1937

package.json

@@ -96,6 +96,7 @@
     "@types/graphql": "14.0.1",
     "@types/invariant": "2.2.29",
     "@types/jest": "23.3.7",
+    "@types/memoize-one": "^3.1.1",
     "@types/object-assign": "4.0.30",
     "@types/prop-types": "15.5.6",
     "@types/react": "16.4.18",
@@ -148,6 +149,7 @@
     "invariant": "^2.2.2",
     "lodash.flowright": "^3.5.0",
     "lodash.isequal": "^4.5.0",
+    "memoize-one": "^4.0.2",
     "prop-types": "^15.6.0"
   }
 }

src/ApolloConsumer.tsx

@@ -1,20 +1,28 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import ApolloClient from 'apollo-client';
+import ApolloContext from './ApolloContext';
 
 const invariant = require('invariant');
 
 export interface ApolloConsumerProps {
   children: (client: ApolloClient<any>) => React.ReactElement<any> | null;
 }
 
-const ApolloConsumer: React.StatelessComponent<ApolloConsumerProps> = (props, context) => {
-  invariant(
-    !!context.client,
-    `Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>`,
-  );
+const ApolloConsumer: React.StatelessComponent<ApolloConsumerProps> = (props) => {
+  return (
+    <ApolloContext.Consumer>
+      {(context) => {
+        if (!context || !context.client) {
+          throw new Error(
+            `Invariant violation. Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>`
+          );
+        }
 
-  return props.children(context.client);
+        return props.children(context.client);
+      }}
+    </ApolloContext.Consumer>
+  );
 };
 
 ApolloConsumer.contextTypes = {

src/ApolloContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+import ApolloClient from 'apollo-client';
+import { DocumentNode } from 'graphql';
+
+
+export interface ApolloContextValue {
+  client?: ApolloClient<Object>;
+  operations?: Map<string, { query: DocumentNode; variables: any }>;
+}
+
+export default createContext<ApolloContextValue | undefined>(undefined);

src/ApolloProvider.tsx

@@ -3,6 +3,8 @@ import * as PropTypes from 'prop-types';
 import { Component } from 'react';
 import ApolloClient from 'apollo-client';
 import { DocumentNode } from 'graphql';
+import memoizeOne from 'memoize-one';
+import ApolloContext, { ApolloContextValue } from './ApolloContext';
 
 const invariant = require('invariant');
 
@@ -11,6 +13,11 @@ export interface ApolloProviderProps<TCache> {
   children: React.ReactNode;
 }
 
+const memoizedGetChildContext = memoizeOne((client: ApolloClient<Object>): ApolloContextValue => ({
+  client: client,
+  operations: (client as any).__operations_cache__,
+}));
+
 export default class ApolloProvider<TCache> extends Component<ApolloProviderProps<TCache>> {
   static propTypes = {
     client: PropTypes.object.isRequired,
@@ -42,13 +49,14 @@ export default class ApolloProvider<TCache> extends Component<ApolloProviderProp
   }
 
   getChildContext() {
-    return {
-      client: this.props.client,
-      operations: (this.props.client as any).__operations_cache__,
-    };
+    return memoizedGetChildContext(this.props.client);
   }
 
   render() {
-    return this.props.children;
+    return (
+      <ApolloContext.Provider value={memoizedGetChildContext(this.props.client)}>
+        {this.props.children}
+      </ApolloContext.Provider>
+    );
   }
 }