Skip to content

React

Apollo comes with a set of components to directly bind the client you created in client setup to your UI components.

Setup

To make the client available anywhere in your React component tree, you can use the ApolloProvider that is available in the package react-apollo. You should place it somewhere high up in your component tree and higher than any component that needs to use the client.

import React from 'react';
import {render} from 'react-dom';

import {ApolloProvider} from 'react-apollo';

// Import client from wherever you created (and exported) it
import client from './client';

const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h1></h1>
    </div>
  </ApolloProvider>
);

render(<App />, document.getElementById('app'));

This is all that is required to setup your application to work with Apollo.

What's Next?

To learn how to use Apollo Client within your application, we recommend the official documentation of the Apollo Client:

  • Queries: Query data to use with your React components.
  • Mutations: Send mutations to update data on your server.