Merge React Apollo hooks into Apollo Client

config/jest.config.js

@@ -10,7 +10,6 @@ module.exports = {
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
   testURL: 'http://localhost',
-  testMatch: ['<rootDir>/src/**/__tests__/**/*.ts'],
   testPathIgnorePatterns: [
     '/node_modules/',
     '/lib/'

config/rollup.config.js

@@ -27,6 +27,8 @@ const defaultGlobals = {
   'graphql/language/visitor': 'visitor',
   'fast-json-stable-stringify': 'stringify',
   '@wry/equality': 'wryEquality',
+  graphql: 'graphql',
+  react: 'React'
 };
 
 function rollup({

package.json

@@ -48,6 +48,12 @@
       "maxSize": "16.9 kB"
     }
   ],
+  "peerDependencies": {
+    "@types/react": "^16.8.0",
+    "graphql": "^14.5.4",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  },
   "dependencies": {
     "@types/zen-observable": "^0.8.0",
     "@wry/equality": "^0.1.9",
@@ -59,13 +65,11 @@
     "tslib": "^1.10.0",
     "zen-observable": "^0.8.14"
   },
-  "peerDependencies": {
-    "graphql": "^14.5.4"
-  },
   "devDependencies": {
     "@babel/core": "7.6.0",
     "@babel/plugin-transform-modules-commonjs": "7.6.0",
     "@babel/plugin-transform-modules-umd": "7.2.0",
+    "@testing-library/react": "^9.1.4",
     "@types/fast-json-stable-stringify": "^2.0.0",
     "@types/isomorphic-fetch": "0.0.35",
     "@types/jest": "24.0.18",

src/core/types.ts

@@ -11,7 +11,7 @@ export type QueryListener = (
   forceResolvers?: boolean,
 ) => void;
 
-export type OperationVariables = { [key: string]: any };
+export type OperationVariables = Record<string, any>;
 
 export type PureQueryOptions = {
   query: DocumentNode;

src/index.ts

@@ -39,3 +39,5 @@ export default ApolloClient;
 
 export * from './cache/core';
 export * from './cache/inmemory';
+
+export * from './react';

src/react/context/ApolloConsumer.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { invariant } from 'ts-invariant';
+
+import ApolloClient from '../../ApolloClient';
+import { getApolloContext } from './ApolloContext';
+
+export interface ApolloConsumerProps {
+  children: (client: ApolloClient<object>) => React.ReactChild | null;
+}
+
+export const ApolloConsumer: React.FC<ApolloConsumerProps> = props => {
+  const ApolloContext = getApolloContext();
+  return (
+    <ApolloContext.Consumer>
+      {(context: any) => {
+        invariant(
+          context && context.client,
+          'Could not find "client" in the context of ApolloConsumer. ' +
+            'Wrap the root component in an <ApolloProvider>.'
+        );
+        return props.children(context.client);
+      }}
+    </ApolloContext.Consumer>
+  );
+};

src/react/context/ApolloContext.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import ApolloClient from '../../ApolloClient';
+
+export interface ApolloContextValue {
+  client?: ApolloClient<object>;
+  renderPromises?: Record<any, any>;
+}
+
+let apolloContext: React.Context<ApolloContextValue>;
+
+export function getApolloContext() {
+  if (!apolloContext) {
+    apolloContext = React.createContext<ApolloContextValue>({});
+  }
+  return apolloContext;
+}
+
+export function resetApolloContext() {
+  apolloContext = React.createContext<ApolloContextValue>({});
+}

src/react/context/ApolloProvider.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { invariant } from 'ts-invariant';
+
+import ApolloClient from '../../ApolloClient';
+import { getApolloContext } from './ApolloContext';
+
+export interface ApolloProviderProps<TCache> {
+  client: ApolloClient<TCache>;
+  children: React.ReactNode | React.ReactNode[] | null;
+}
+
+export const ApolloProvider: React.FC<ApolloProviderProps<any>> = ({
+  client,
+  children
+}) => {
+  const ApolloContext = getApolloContext();
+  return (
+    <ApolloContext.Consumer>
+      {(context = {}) => {
+        if (client && context.client !== client) {
+          context = Object.assign({}, context, { client });
+        }
+
+        invariant(
+          context.client,
+          'ApolloProvider was not passed a client instance. Make ' +
+            'sure you pass in your client via the "client" prop.'
+        );
+
+        return (
+          <ApolloContext.Provider value={context}>
+            {children}
+          </ApolloContext.Provider>
+        );
+      }}
+    </ApolloContext.Consumer>
+  );
+};

src/react/context/__tests__/ApolloConsumer.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ApolloLink } from 'apollo-link';
+import { render, cleanup } from '@testing-library/react';
+
+import ApolloClient from '../../../ApolloClient';
+import { InMemoryCache as Cache } from '../../../cache/inmemory/inMemoryCache';
+import { ApolloProvider } from '../ApolloProvider';
+import { ApolloConsumer } from '../ApolloConsumer';
+import { getApolloContext } from '../ApolloContext';
+
+const client = new ApolloClient({
+  cache: new Cache(),
+  link: new ApolloLink((o, f) => (f ? f(o) : null))
+});
+
+describe('<ApolloConsumer /> component', () => {
+  afterEach(cleanup);
+
+  it('has a render prop', done => {
+    render(
+      <ApolloProvider client={client}>
+        <ApolloConsumer>
+          {clientRender => {
+            try {
+              expect(clientRender).toBe(client);
+              done();
+            } catch (e) {
+              done.fail(e);
+            }
+            return null;
+          }}
+        </ApolloConsumer>
+      </ApolloProvider>
+    );
+  });
+
+  it('renders the content in the children prop', () => {
+    const { getByText } = render(
+      <ApolloProvider client={client}>
+        <ApolloConsumer>{() => <div>Test</div>}</ApolloConsumer>
+      </ApolloProvider>
+    );
+
+    expect(getByText('Test')).toBeTruthy();
+  });
+
+  it('errors if there is no client in the context', () => {
+    // Prevent Error about missing context type from appearing in the console.
+    const errorLogger = console.error;
+    console.error = () => {};
+    expect(() => {
+      // We're wrapping the `ApolloConsumer` component in a
+      // `ApolloContext.Provider` component, to reset the context before
+      // testing.
+      const ApolloContext = getApolloContext();
+      render(
+        <ApolloContext.Provider value={{}}>
+          <ApolloConsumer>{() => null}</ApolloConsumer>
+        </ApolloContext.Provider>
+      );
+    }).toThrowError(
+      'Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>'
+    );
+
+    console.error = errorLogger;
+  });
+});