Apollo Client setup - GraphQL Tutorials

8. Apollo Client setup

3m

⌨️ Let's play with AC3 (Apollo Client 3)

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 GraphQL server!

We first need to install two packages: graphql and @apollo/client.

graphql provides the core logic for parsing GraphQL queries.
@apollo/client contains pretty much everything we need to build our client, including an in-memory cache, local state management, and error handling.

From the client/ directory, run the following command:

npm install graphql @apollo/client

With these installed, let's import the three symbols we need from the @apollo/client package in src/index.js:

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

Let's cover what each of these does!

The `ApolloClient` class

As you'd expect, ApolloClient is the class that represents Apollo Client 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 uri option, which we use to specify the location of our GraphQL server. Our server is running locally at localhost:4000, so the uri option looks like this:

uri: 'http://localhost:4000',

Second, every instance of ApolloClient uses an in-memory cache. This enables it to store and reuse query 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({
  uri: "http://localhost:4000",
  cache: new InMemoryCache(),
});

Code Challenge!

Create a new ApolloClient instance, with its options set up to connect to the endpoint https://graphql.org/swapi-graphql and use the InMemoryCache. Assign the instance to a variable called client.

Loading...

Loading editor

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 Apollo Client 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 relaunch 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. Next, we'll build the query we need to populate our homepage.

http://localhost:3000

The blank landing page for our Catstronauts app

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

We initialize Apollo Client in every component that uses it.We wrap our React component tree in the ApolloProvider component.We pass Apollo Client as a prop to every component that uses it.

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.