@apollo/react-common
API reference
Installation
Text
1npm install @apollo/react-common
ApolloProvider
The ApolloProvider
component leverages React's Context API to make a configured Apollo Client instance available throughout a React component tree. This component can be imported directly from the @apollo/react-common
package where it lives, or from one of the @apollo/react-hooks
, @apollo/react-components
, and @apollo/react-hoc
packages.
JavaScript
1import { ApolloProvider } from '@apollo/react-hooks';
Props
Option | Type | Description |
---|---|---|
client | ApolloClient<TCache> | An ApolloClient instance. |
Example
JavaScript
1ReactDOM.render(
2 <ApolloProvider client={client}>
3 <MyRootComponent />
4 </ApolloProvider>,
5 document.getElementById('root'),
6);
ApolloConsumer
One way to access the configured Apollo Client instance directly is to create an ApolloConsumer
component and provide a render prop function as its child. The render prop function will be called with your ApolloClient
instance as its only argument. You can think of the ApolloConsumer
component as similar to the Consumer
component from the React Context API.
Example
JavaScript
1import React from 'react';
2import { ApolloConsumer } from '@apollo/react-common';
3// or from the hooks, components, hoc packages:
4// import { ApolloConsumer } from "@apollo/react-hooks";
5
6const WithApolloClient = () => (
7 <ApolloConsumer>
8 {client => 'We have access to the client!' /* do stuff here */}
9 </ApolloConsumer>
10);