Implemented the ApolloConsumer component. (#1399)

* Implemented the ApolloConsumer component. * Wrapped the withApollo component in the ApolloConsumer component. * Updated the changelog * Removed render prop in favour of children render prop
apollographql · Dec 26, 2017 · 1ae46f1 · 1ae46f1
1 parent 08b8077
commit 1ae46f1
Show file tree

Hide file tree

Showing 13 changed files with 196 additions and 117 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -11,8 +11,9 @@ a) full typing; and b) ease of use; and c) consistency.  New parameterized is:
 first three params (`TChildProps` can be derived). [#1402](https://github.com/apollographql/react-apollo/pull/1402) 
 - Typescript - fix `graphql` HOC inference [#1402](https://github.com/apollographql/react-apollo/pull/1402)
 - **Remove deprecated** `operationOptions.options.skip`, use `operationOptions.skip` instead
-- Added <Query /> component [#1399](https://github.com/apollographql/react-apollo/pull/1398)
+- Added <Query /> component [#1398](https://github.com/apollographql/react-apollo/pull/1398)
 - Made prettier solely responsible for formatting, removed all formatting linting rules from tslint [#1452](https://github.com/apollographql/react-apollo/pull/1452)
+- add <ApolloConsumer /> component [#1399](https://github.com/apollographql/react-apollo/pull/1399)
 
 ### 2.0.4
 - rolled back on the lodash-es changes from

diff --git a/examples/typescript/package.json b/examples/typescript/package.json
@@ -23,7 +23,9 @@
     "build": "react-scripts-ts build",
     "test": "react-scripts-ts test --env=jsdom",
     "eject": "react-scripts-ts eject",
-    "schema": "apollo-codegen introspect-schema https://mpjk0plp9.lp.gql.zone/graphql --output ./src/schema.json",
-    "types": "apollo-codegen generate ./src/**/*.tsx --schema ./src/schema.json --target typescript --output ./src/schema.ts --add-typename"
+    "schema":
+      "apollo-codegen introspect-schema https://mpjk0plp9.lp.gql.zone/graphql --output ./src/schema.json",
+    "types":
+      "apollo-codegen generate ./src/**/*.tsx --schema ./src/schema.json --target typescript --output ./src/schema.ts --add-typename"
   }
 }
diff --git a/src/ApolloConsumer.tsx b/src/ApolloConsumer.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import ApolloClient from 'apollo-client';
+const invariant = require('invariant');
+
+export interface ApolloConsumerProps {
+  children: (client: ApolloClient<any>) => React.ReactElement<any>;
+}
+
+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>`,
+  );
+
+  return props.children(context.client);
+};
+
+ApolloConsumer.contextTypes = {
+  client: PropTypes.object.isRequired,
+};
+
+export default ApolloConsumer;
diff --git a/src/Query.tsx b/src/Query.tsx
@@ -136,9 +136,10 @@ class Query extends React.Component<QueryProps, QueryState> {
 
     invariant(
       operation.type === DocumentType.Query,
-      `The <Query /> component requires a graphql query, but got a ${
-        operation.type === DocumentType.Mutation ? 'mutation' : 'subscription'
-      }.`,
+      `The <Query /> component requires a graphql query, but got a ${operation.type ===
+      DocumentType.Mutation
+        ? 'mutation'
+        : 'subscription'}.`,
     );
 
     const clientOptions = {

diff --git a/src/getDataFromTree.ts b/src/getDataFromTree.ts
@@ -170,9 +170,7 @@ export function getDataFromTree(
         errors.length === 1
           ? errors[0]
           : new Error(
-              `${
-                errors.length
-              } errors were thrown when executing your GraphQL queries.`,
+              `${errors.length} errors were thrown when executing your GraphQL queries.`,
             );
       error.queryErrors = errors;
       throw error;

diff --git a/src/graphql.tsx b/src/graphql.tsx
@@ -303,9 +303,8 @@ export default function graphql<
             `The operation '${operation.name}' wrapping '${getDisplayName(
               WrappedComponent,
             )}' ` +
-              `is expecting a variable: '${
-                variable.name.value
-              }' but it was not found in the props ` +
+              `is expecting a variable: '${variable.name
+                .value}' but it was not found in the props ` +
               `passed to '${graphQLDisplayName}'`,
           );
         }

diff --git a/src/withApollo.tsx b/src/withApollo.tsx
@@ -1,14 +1,11 @@
-import { Component, createElement } from 'react';
-import * as PropTypes from 'prop-types';
+import * as React from 'react';
 
 const invariant = require('invariant');
-const assign = require('object-assign');
 
 const hoistNonReactStatics = require('hoist-non-react-statics');
 
-import ApolloClient from 'apollo-client';
-
 import { OperationOption } from './types';
+import ApolloConsumer from './ApolloConsumer';
 
 function getDisplayName(WrappedComponent) {
   return WrappedComponent.displayName || WrappedComponent.name || 'Component';
@@ -20,28 +17,16 @@ export function withApollo<TProps, TResult>(
 ) {
   const withDisplayName = `withApollo(${getDisplayName(WrappedComponent)})`;
 
-  class WithApollo extends Component<any, any> {
+  class WithApollo extends React.Component<any, any> {
     static displayName = withDisplayName;
     static WrappedComponent = WrappedComponent;
-    static contextTypes = { client: PropTypes.object.isRequired };
-
-    // data storage
-    private client: ApolloClient<any>; // apollo client
 
     // wrapped instance
     private wrappedInstance: any;
 
-    constructor(props, context) {
-      super(props, context);
-      this.client = context.client;
+    constructor(props) {
+      super(props);
       this.setWrappedInstance = this.setWrappedInstance.bind(this);
-
-      invariant(
-        !!this.client,
-        `Could not find "client" in the context of ` +
-          `"${withDisplayName}". ` +
-          `Wrap the root component in an <ApolloProvider>`,
-      );
     }
 
     getWrappedInstance() {
@@ -59,10 +44,19 @@ export function withApollo<TProps, TResult>(
     }
 
     render() {
-      const props = assign({}, this.props);
-      props.client = this.client;
-      if (operationOptions.withRef) props.ref = this.setWrappedInstance;
-      return createElement(WrappedComponent, props);
+      return (
+        <ApolloConsumer>
+          {client => (
+            <WrappedComponent
+              {...this.props}
+              client={client}
+              ref={
+                operationOptions.withRef ? this.setWrappedInstance : undefined
+              }
+            />
+          )}
+        </ApolloConsumer>
+      );
     }
   }
 

diff --git a/test/flow-usage.js b/test/flow-usage.js
@@ -143,22 +143,23 @@ export type InputProps = {
   episode: string,
 };
 
-const withCharacter: OperationComponent<Response, InputProps, Props> = graphql(
-  HERO_QUERY,
-  {
-    options: ({ episode }) => ({
-      // $ExpectError [string] This type cannot be compared to number
-      variables: { episode: episode > 1 },
-    }),
-    props: ({ data, ownProps }) => ({
-      ...data,
-      // $ExpectError [string] This type cannot be compared to number
-      episode: ownProps.episode > 1,
-      // $ExpectError property `isHero`. Property not found on object type
-      isHero: data && data.hero && data.hero.isHero,
-    }),
-  },
-);
+const withCharacter: OperationComponent<
+  Response,
+  InputProps,
+  Props,
+> = graphql(HERO_QUERY, {
+  options: ({ episode }) => ({
+    // $ExpectError [string] This type cannot be compared to number
+    variables: { episode: episode > 1 },
+  }),
+  props: ({ data, ownProps }) => ({
+    ...data,
+    // $ExpectError [string] This type cannot be compared to number
+    episode: ownProps.episode > 1,
+    // $ExpectError property `isHero`. Property not found on object type
+    isHero: data && data.hero && data.hero.isHero,
+  }),
+});
 
 export default withCharacter(({ loading, hero, error }) => {
   if (loading) return <div>Loading</div>;

diff --git a/test/react-native/component.test.tsx b/test/react-native/component.test.tsx
@@ -33,12 +33,12 @@ describe('App', () => {
       cache: new Cache({ addTypename: false }),
     });
 
-    const ContainerWithData = graphql(query)(
-      ({ data }: ChildProps<{}, Data>) => {
-        if (data.loading) return <Text>Loading...</Text>;
-        return <Text>{data.allPeople.people.name}</Text>;
-      },
-    );
+    const ContainerWithData = graphql(
+      query,
+    )(({ data }: ChildProps<{}, Data>) => {
+      if (data.loading) return <Text>Loading...</Text>;
+      return <Text>{data.allPeople.people.name}</Text>;
+    });
     const output = renderer.create(
       <ApolloProvider client={client}>
         <ContainerWithData />

diff --git a/test/react-web/client/ApolloConsumer.test.js b/test/react-web/client/ApolloConsumer.test.js
@@ -0,0 +1,57 @@
+import React from 'react';
+import ApolloClient from 'apollo-client';
+import { InMemoryCache as Cache } from 'apollo-cache-inmemory';
+import { ApolloLink } from 'apollo-link';
+
+import ApolloProvider from '../../../src/ApolloProvider';
+import ApolloConsumer from '../../../src/ApolloConsumer';
+import { mount } from 'enzyme';
+import invariant from 'invariant';
+
+const client = new ApolloClient({
+  cache: new Cache(),
+  link: new ApolloLink((o, f) => f(o)),
+});
+
+describe('<ApolloConsumer /> component', () => {
+  it('has a render prop', done => {
+    mount(
+      <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 render prop', () => {
+    const wrapper = mount(
+      <ApolloProvider client={client}>
+        <ApolloConsumer>{clientRender => <div />}</ApolloConsumer>
+      </ApolloProvider>,
+    );
+
+    expect(wrapper.find('div').exists()).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(() => {
+      mount(<ApolloConsumer render={client => null} />);
+    }).toThrowError(
+      'Could not find "client" in the context of ApolloConsumer. Wrap the root component in an <ApolloProvider>',
+    );
+
+    console.error = errorLogger;
+  });
+});
diff --git a/test/react-web/client/graphql/queries/index.test.tsx b/test/react-web/client/graphql/queries/index.test.tsx
@@ -44,13 +44,13 @@ describe('queries', () => {
       };
     }
 
-    const ContainerWithData = graphql<any, Data>(query)(
-      ({ data }: DataProps<Data>) => {
-        expect(data).toBeTruthy();
-        expect(data.loading).toBeTruthy();
-        return null;
-      },
-    );
+    const ContainerWithData = graphql<any, Data>(
+      query,
+    )(({ data }: DataProps<Data>) => {
+      expect(data).toBeTruthy();
+      expect(data.loading).toBeTruthy();
+      return null;
+    });
 
     const output = renderer.create(
       <ApolloProvider client={client}>
@@ -95,13 +95,13 @@ describe('queries', () => {
       first: number;
     }
 
-    const ContainerWithData = graphql<any, Data, Variables>(query)(
-      ({ data }: DataProps<Data, Variables>) => {
-        expect(data).toBeTruthy();
-        expect(data.variables).toEqual(variables);
-        return null;
-      },
-    );
+    const ContainerWithData = graphql<any, Data, Variables>(
+      query,
+    )(({ data }: DataProps<Data, Variables>) => {
+      expect(data).toBeTruthy();
+      expect(data.variables).toEqual(variables);
+      return null;
+    });
 
     renderer.create(
       <ApolloProvider client={client}>

diff --git a/test/react-web/client/graphql/subscriptions.test.tsx b/test/react-web/client/graphql/subscriptions.test.tsx
@@ -47,14 +47,14 @@ describe('subscriptions', () => {
       user: { name: string };
     }
 
-    const ContainerWithData = graphql<Props, Data>(query)(
-      ({ data }: ChildProps<Props, Data>) => {
-        expect(data).toBeTruthy();
-        expect(data.user).toBeFalsy();
-        expect(data.loading).toBeTruthy();
-        return null;
-      },
-    );
+    const ContainerWithData = graphql<Props, Data>(
+      query,
+    )(({ data }: ChildProps<Props, Data>) => {
+      expect(data).toBeTruthy();
+      expect(data.user).toBeFalsy();
+      expect(data.loading).toBeTruthy();
+      return null;
+    });
 
     const output = renderer.create(
       <ApolloProvider client={client}>
@@ -84,13 +84,13 @@ describe('subscriptions', () => {
       user: { name: string };
     }
 
-    const ContainerWithData = graphql<Props, Data>(query)(
-      ({ data }: ChildProps<Props, Data>) => {
-        expect(data).toBeTruthy();
-        expect(data.variables).toEqual(variables);
-        return null;
-      },
-    );
+    const ContainerWithData = graphql<Props, Data>(
+      query,
+    )(({ data }: ChildProps<Props, Data>) => {
+      expect(data).toBeTruthy();
+      expect(data.variables).toEqual(variables);
+      return null;
+    });
 
     const output = renderer.create(
       <ApolloProvider client={client}>