Adding Apollo to a React Application

Learn how to add Apollo Client to a React application to send queries to a GraphQL server.

We'll cover the following

Connecting to the data

We now have a list of books on the client-side. If we want to add more books to that list, we can edit the code. Is that good enough? Actually, no. We want to be able to load the list of books from a server.

So, how do we read data from the API and transfer it into our Books component? The answer lies in the @apollo/client package, which provides us with two main features:

  • An ApolloClient class that contains the configuration for connecting to a GraphQL server.

  • An ApolloProvider component that uses a React context to share that configuration with all nested components.

Using these features together allow us to pull book data from our GraphQL server and pass it down to our Books component.

The client.tsx file

To define how our application connects to our Apollo Server instance, we need to create a new file at client.tsx.

Press + to interact
import {ApolloClient, InMemoryCache } from "@apollo/client";
const client = new ApolloClient({
    uri: "{{EDUCATIVE_LIVE_VM_URL}}:3000",
    cache: new InMemoryCache(),
}); 
export default client;

Note: The Apollo server that we'll use is located on the same server as our client. Our server listens on port 3000, and we have specified that in the uri field in the client.tsx file.

This file sets up a new ApolloClient object, specifying two options:

  • The uri option tells Apollo where it can find our GraphQL server.

  • The cache option defines an InMemoryCache object, and Apollo will use this to remember the data returned from our server.

A cache can be handy. For example, if we load a list of books in our application, and then navigate somewhere else before coming back to the list of books, Apollo will remember the data from our original query and display that data directly from its cache, rather than hitting the server again. This makes our application feel quite snappy!

Note: Apollo also allows us to clear the cache. Clearing the cache may be required in certain situations Clearing the cache may be required in certain situations, such as when data changes or is deleted.

The important thing for us to remember is that this client file is responsible for telling Apollo where to find our GraphQL server (the uri option) and how to remember what data is returned from that server (the cache option).

Updating the pages/index.tsx file

The client.tsx file exports the configuration object above as client and we can import it to our pages/index.tsx file. Then, to use this client, we need to use the ApolloProvider component.

Let’s update our pages/index.tsx file to accommodate these requirements.

Press + to interact
import client from "client";
import { ApolloProvider } from "@apollo/client";
import Books, { Book } from "components/Books";
const books: Book[] = [
  {
    id: "1",
    title: "The Apollo Handbook",
  },
];
function App() {
  return (
    <ApolloProvider client={client}>
      <Books books={books} />
    </ApolloProvider>
  );
}
export default App;

In lines 1–2, we import client from client.tsx file and import ApolloProvider from the Apollo Client package.

In lines 14–16, we use the imported client object in conjunction with the ApolloProvider component, wrapping our entire application’s code. This makes it possible to use Apollo GraphQL queries anywhere we need them in our application.