Installing Apollo Client

Overview

Apollo client is a fully-featured caching GraphQL client that allows you to easily build UI components that fetch data via GraphQL without having to resort to manual network requests.

note

If you don't work in React, Apollo Client also exists in other languages or you can use another fully featured GraphQL client. The general steps should still be relevant however syntax will be different so a guide for your client should be used. Regardless we still greatly recommend reading the next section on Advanced HTTP networking with Apollo

Installing dependencies

First we need to install both the Apollo client and graphql packages using NPM. To do this, in your terminal, navigate into your project folder and then run:

npm i @apollo/client graphql

Configure the client

Now that we have Apollo client installed we are able to use the package. Open your newly created project index.tsx file (found in the src folder) in your favorite code editor.

Before we do anything it should look like this:

./src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

To create our client we will first need to import ApolloClient and InMemoryCache from the @apollo/client package. This should look like this:

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

And then we can create the client as shown using the Sanctuary Health API as the URL. This should look like this:

const client = new ApolloClient({
  uri: 'https://v4-0-dot-livitay.appspot.com/graphql',
  cache: new InMemoryCache(),
});

Configure the context provider

Apollo client uses a feature of React called 'Context' to globally manage state for caching. If you are unfamiliar with this feature you can read more here. The TLDR; of context is that it provides a data to all all children of a tree via wrapping the component tree in a Provider and then accessing the context within the sub components. In our instance we want the all of our components to have access to the Apollo data, hence we will wrap wrap our <App /> component in the ApolloProvider.

First we need to add the ApolloProvider to our imports from @apollo/client. This should look like this:

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

And then we need to wrap our <App /> component. This should look like this:

<ApolloProvider client={client}>
  <App />
</ApolloProvider>

All together the index.tsx file should now look like this:

./src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://v4-0-dot-livitay.appspot.com/graphql',
  cache: new InMemoryCache(),
});

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();