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 2 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 Apollo Client instance, with options setup to point to 'https://graphql.org/swapi-graphql'

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:

ReactDOM.render(
<ApolloProvider client={client}>
<GlobalStyles />
<Pages />
</ApolloProvider>,
document.getElementById('root')
);

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.

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

Previous
Next