Join us for GraphQL Summit, October 10-12 in San Diego. Super Early Bird registration ends soon!
Docs
Try Apollo Studio
You're viewing documentation for a previous version of this software. Switch to the latest stable version.

@apollo/react-common

API reference


Installation

npm 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.

import { ApolloProvider } from '@apollo/react-hooks';

Props

OptionTypeDescription
clientApolloClient<TCache>An ApolloClient instance.

Example

ReactDOM.render(
<ApolloProvider client={client}>
<MyRootComponent />
</ApolloProvider>,
document.getElementById('root'),
);

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

import React from 'react';
import { ApolloConsumer } from '@apollo/react-common';
// or from the hooks, components, hoc packages:
// import { ApolloConsumer } from "@apollo/react-hooks";
const WithApolloClient = () => (
<ApolloConsumer>
{client => 'We have access to the client!' /* do stuff here */}
</ApolloConsumer>
);
Edit on GitHub
Previous
@apollo/react-hoc
Next
Hooks migration guide