8. Apollo Client setup
3m

Overview

Our React app is running, but it can't talk to our yet. In this lesson, we will:

  • Install 4 and its dependencies
  • Configure ApolloClient with HttpLink and InMemoryCache
  • Wrap the React app in ApolloProvider

⌨️ Let's play with Apollo Client 4

Let's open up the root of our React app (client/src/index.js). It's time to use Apollo Client to send queries to our !

We first need to install three packages: graphql, @apollo/client, and rxjs.

  • graphql provides the core logic for parsing queries.
  • @apollo/client contains pretty much everything we need to build our client, including an in-memory cache, local state management, and error handling.
  • rxjs is a peer dependency of 4 that powers its observable implementation.

From the client/ directory, run the following command:

npm install graphql @apollo/client@4 rxjs

With these installed, let's import the symbols we need. Core client APIs come from @apollo/client, while React-specific APIs come from @apollo/client/react:

import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import { ApolloProvider } from "@apollo/client/react";

Let's cover what each of these does!

The ApolloClient class

As you'd expect, ApolloClient is the class that represents itself. We create a new client instance like so:

const client = new ApolloClient({
  // options go here
});

We need to provide a couple of options to the constructor. The first is the link option, which tells how to send over the network. We'll create an HttpLink that points at our . Our server is running locally at localhost:4000, so the link looks like this:

link: new HttpLink({
  uri: "http://localhost:4000",
}),

Second, every instance of ApolloClient uses an in-memory cache. This enables it to store and reuse results so it doesn't have to make as many network requests. This makes our app's user experience feel much snappier.

We provide an InMemoryCache instance in the cache option, like so:

cache: new InMemoryCache(),

That's all we need to configure our client! Here's the full call:

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

Our client is ready to use, but how do we make it available to the components in our React app? That's where ApolloProvider component comes in!

The ApolloProvider component

The ApolloProvider component uses React's Context API to make a configured instance available throughout a React component tree. To use it, we wrap our app's top-level components in the ApolloProvider component and pass it our client instance as a prop:

root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <GlobalStyles />
      <Pages />
    </ApolloProvider>
  </React.StrictMode>
);

Now all of our pages, containers, and components can access the client via friendly React Hooks thanks to the context API.

Now we re our app, aaaaand, drumroll... nothing changes! We still get our boring, mostly blank layout (well, at least there are little cats on rockets in the background).

Our client is configured and ready to use, but we aren't actually using it yet.

http://localhost:3000

The blank landing page for our Catstronauts app

Code review

Practice

Code Challenge!

Create a new ApolloClient instance. Configure it with an HttpLink that connects to the endpoint https://graphql.org/swapi-graphql and an InMemoryCache. Assign the instance to a variable called client.

How do we make Apollo Client available to our app's React components?

Up next

Next, we'll build the we need to populate our homepage.

Previous

Share your questions and comments about this lesson

Your feedback helps us improve! If you're stuck or confused, let us know and we'll help you out. All comments are public and must follow the Apollo Code of Conduct. Note that comments that have been resolved or addressed may be removed.

You'll need a GitHub account to post below. Don't have one? Post in our Odyssey forum instead.