Launch Apollo Studio

6. Connect your API to a client

Hook up your graph to Apollo Client

Time to accomplish: 10 Minutes

The next half of this tutorial exclusively focuses on connecting a graph API to a frontend with Apollo Client. Apollo Client is a complete data management solution for any client. It's view-layer agnostic, which means it can integrate with React, Vue, Angular, or even vanilla JS. Thanks to its intelligent cache, Apollo Client offers a single source of truth for all of the local and remote data in your application.

While Apollo Client works with any view layer, it's most commonly used with React. In this section, you'll learn how to connect the graph API you just built in the previous half of this tutorial to a React app. Even if you're more comfortable with Vue or Angular, you should still be able to follow many of the examples since the concepts are the same. Along the way, you'll also learn how to build essential features like authentication and pagination, as well as tips for optimizing your workflow.

Set up your development environment

For this half of the tutorial, we will be working in the client/ folder of the project. You should have the project already from the server portion, but if you don't, make sure to clone the tutorial. From the root of the project, run:

cd start/client && npm install

Along with other dependencies, this installs the @apollo/client package, which includes all of the Apollo Client features we'll use.

Configure Apollo VSCode

While Apollo VSCode is not required to successfully complete the tutorial, setting it up unlocks a lot of helpful features such as autocomplete for operations, jump to fragment definitions, and more.

First, make a copy of the .env.example file located in client/ and call it .env. Add your Apollo Studio API key that you already created in step #4 to the file:

Note: You may need to upgrade your plugin version, which relies on the now-deprecated ENGINE_API_KEY environment variable.


The entry should basically look something like this:


Our key is now stored under the environment variable APOLLO_KEY. Apollo VSCode uses this API key to pull down your schema from the registry.

Next, create an Apollo config file called apollo.config.js. This config file is how you configure both the Apollo VSCode extension and CLI. Paste the snippet below into the file:

module.exports = {
  client: {
    name: 'Space Explorer [web]',
    service: 'space-explorer',

Great, we're all set up! Let's dive into building our first client.

Create an Apollo Client

The code blocks below use TypeScript by default. You can use the dropdown menu above a code block to switch to JavaScript.

If you're using JavaScript, use .js and .jsx file extensions wherever .ts and .tsx are mentioned.

To generate TypeScript types for your queries and mutations, open another terminal window and run npm run codegen. This will watch for changes to your code and generate the client-side typings.

Now that we have installed the necessary packages, let's create an ApolloClient instance.

Navigate to src/index.tsx so we can create our client. The uri that we pass in is the URL of the server you created in the first half of the tutorial. (If you didn't complete the server portion, you can still use the code below.)

import {
} from '@apollo/client';

const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
  uri: 'http://localhost:4000/',
  cache: new InMemoryCache()

In just a few lines of code, our client is ready to fetch data! Let's try making a query in the next section.

Make your first query

Before we show you how to use the React integration for Apollo, let's send a query with vanilla JavaScript.

With a client.query() call, we can query our graph's API. Adjust your @apollo/client import to include gql in src/index.tsx:

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

And add this code to the bottom of index.tsx:

// ... above is the instantiation of the client object.
    query: gql`
      query GetLaunch {
        launch(id: 56) {
          mission {
  .then(result => console.log(result));

Open up your console and run npm start. This will compile your client app. Once it is finished, your browser should open to http://localhost:3000/ automatically. When the index page opens, open up your Developer Tools console and you should see an object with a data property containing the result of our query. You'll also see some other properties, like loading and networkStatus. This is because Apollo Client tracks the loading state of your query for you.

Apollo Client is designed to fetch graph data from any JavaScript frontend. No frameworks needed. However, there are view layer integrations for different frameworks that makes it easier to bind queries to the UI.

Go ahead and delete the client.query() call you just made and the gql import statement. Now, we'll connect our client to React.

Connect your client to React

Connecting Apollo Client to our React app with Apollo's hooks allows us to easily bind GraphQL operations to our UI.

To connect Apollo Client to React, we will wrap our app in the ApolloProvider component exported from the @apollo/client package and pass our client to the client prop. The ApolloProvider component is similar to React’s context provider. It wraps your React app and places the client on the context, which allows you to access it from anywhere in your component tree.

Open src/index.tsx and add the following lines of code:

import {
} from '@apollo/client';
import React from 'react';
import ReactDOM from 'react-dom';
import Pages from './pages';
import injectStyles from './styles';

// previous variable declarations

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

Now, we're ready to start building our first component with the useQuery hook in the next section.

Edit on GitHub