Intro to GraphQL in React Using React Apollo & Apollo Boost

Published on March 23, 2018


Intro to GraphQL in React Using React Apollo & Apollo Boost

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

The Apollo GraphQL client is a very popular way to interface with a GraphQL API on the client-side. In this post we’ll go over how to setup Apollo in a React app using Apollo Boost and React Apollo 2.1.

What are these two for, you ask?

  • Apollo Boost: Setting up Apollo on the client used to require quite a lot of boilerplate code, and Apollo Boost fixes that. It’s a bundled combination of apollo-client, apollo-cache-inmemory, apollo-link-error, apollo-link-http and apollo-link-state that allows for a much easier setup.
  • React Apollo: A React-specific integration for Apollo. It provides us with a lot of goodies like the Query and Mutation components.

This tutorial assumes the use of React Apollo 2.1+


Let’s first initialize a React project using npx and Create React App:

$ npx create-react-app hello-graphql

You can then cd into the project and start a local dev server:

$ cd hello-graphql && yarn start

We’ll also need a few extra packages in our project, namely graphql, graphql-tag, apollo-boost and react-apollo. Add them using npm or Yarn:

$ yarn add graphql graphql-tag apollo-boost react-apollo

# or, using npm:
$ npm i graphql graphql-tag apollo-boost react-apollo

With our project in place and packages added, we can now setup the Apollo client.


The client setup couldn’t be easier. We’ll initiate a client and give it the URI to our GraphQL server endpoint and then use the ApolloProvider component to to make the client available in our app’s components.

For this example our endpoint will point to an Apollo Launchpad instance with data about Star Wars:

import React from 'react';
import ReactDOM from 'react-dom';

import { ApolloProvider } from 'react-apollo';
import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-boost';

import './index.css';
import App from './App';

const client = new ApolloClient({
  link: new HttpLink({ uri: 'https://mpjk0plp9.lp.gql.zone/graphql' }),
  cache: new InMemoryCache()

const AppWithProvider = () => (
  <ApolloProvider client={client}>
    <App />

ReactDOM.render(<AppWithProvider />, document.getElementById('root'));

A few things to note:

  • We initialize the client with an HttpLink that points to our GraphQL endpoint and then also specify Apollo’s InMemoryCache as the caching utility.
  • We use the ApolloProvider component, pass it our client as prop and then wrap it around our App component.

Query Component Example

Now that everything’s in place, we can start running queries against the GraphQL endpoint. For this, we’ll use React Apollo’s Query component, which makes use of the render prop pattern to give us the data back from the query.

Here’s an example where we query for a Star Wars’ episode hero and his/her friends:

import React from 'react';
import PropTypes from 'prop-types';

import { Query } from 'react-apollo';
import gql from 'graphql-tag';

const QUERY = gql`
  query HeroFriends($episode: Episode!) {
    hero(episode: $episode) {
      friends {

const HeroAndFriends = ({ episode }) => (
  <Query query={QUERY} variables={{ episode }}>
    {({ data, error, loading }) => {
      if (error) return '💩 Oops!';
      if (loading) return 'Patience young grasshopper...';

      return (
          <h1>Hero: {data.hero.name}</h1>
          <h2>His/her friends:</h2>
            {data.hero.friends.map(friend => (
              <li key={friend.name}>{friend.name}</li>
HeroAndFriends.propTypes = { episode: PropTypes.string };
HeroAndFriends.defaultProps = { episode: 'NEWHOPE' };

const App = () => <HeroAndFriends episode="EMPIRE" />;

export default App;

And let’s breakdown the important things happening here:

  • React Apollo’s Query component takes a required query prop with a GraphQL query that has been parsed using graphql-tag’s gql. Query also takes a required children prop that should be a function. Here we also passed-in a variable prop to provide a variable value to our query.
  • Query can also take a number of optional props like pollInterval, fetchPolicy, errorPolicy and delay, among others.
  • The function passed to the children prop receives an object with a handful of useful properties. Here we’re making use of data, error and loading, but other properties like networkStatus, refetch and fetchMore are also available.
  • The data property holds the data received back from the query, the error property holds an error object, if any, and the loading property will be true while the query is in-flight.

⚛️ There you have it!
An easy way to get started with React and GraphQL and start running queries. In a future post we’ll also explore the Mutation component to also run GraphQL mutations. You can also dive a little bit deeper by having a look at the official docs.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

The tutorial seems very out-of-date. The example Apollo Launchpad seems to have stopped exists many years ago.

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel