Docs
Launch GraphOS 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 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 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 . 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>
);
Previous
@apollo/react-hoc
Next
Hooks migration guide
Edit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc.

Privacy Policy

Company