Set Up Apollo with React

Now that we've got our environment set up, let's add Apollo to React. You might want to just keep the server running from here on out since we're using that Apollo GraphQL extension. As a reminder, you can run it with:

cd server
npm start

To add Apollo to React, we first need to create an instance of Apollo Client in index.js:

// index.js
const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: "http://localhost:4000",
  }),
});

Then, surround the <App /> tag with the ApolloProvider, passing in the client we just created:

// index.js
ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Don't forget to import everything at the top of the file:

// index.js
import {
  ApolloClient,
  InMemoryCache,
  HttpLink,
  ApolloProvider,
} from "@apollo/client";

Helpful Links

• Apollo Docs: Apollo Client API Reference
• Apollo Docs: Apollo LinkOverview