GraphQL in React with Apollo

const STARRED_REPOS_QUERY = gql`
  query StarredReposQuery($numRepos: Int) {
    viewer {
      id
      starredRepositories(last: $numRepos) {
        nodes {
          id
          name
          description
          pushedAt
          url
          languages(first: 5) {
            nodes {
              id
              color
              name
            }
          }
        }
      }
    }
  }
`;

You’ll notice that this query looks eerily similar to the one we were playing around with in the GitHub GraphQL explorer. That’s because it is! The first difference is that we’ve added query StarredReposQuery($numRepos: Int) to the front of it, telling Apollo we’ll be performing a query and giving it a name. This also tells the query that we’ll be providing an Integer variable named numRepos. I could have hard-coded this, but it shows how you can pass variables into your query to make them dynamic.

Finally, we have our actual component. Here’s where things get interesting! The Query component provided by react-apollo is the star of the show. As a child, it needs to be provided with a function that receives a number of arguments, but for our sake here we’ll be working with the data returned by the query and a loading variable, which is a Boolean that tells us whether the request has finished or not.

 
export default class StarredRepos extends React.Component {

render() {
  return (
    <div>
    <Query query={STARRED_REPOS_QUERY} variables={{ numRepos: 25 }}>
    {({ data, loading }) => {
      if (loading) {
        return <span>Loading...</span>;
      }
        return data.viewer.starredRepositories.nodes.map(node => ( <Repository data={node} key={node.id} />
      ));
    }}
    </Query>
    </div>
    );
  }
}

To finish off the app, let’s look at the Repository component used above. This is straight-up React with no fancy GraphQL stuff going on here. I like to separate where I fetch the data from where I display it. It makes it easier to test the component because there are no dependencies. It simply receives a data object and displays it.

import React from "react";


const Repository = ({
  data: { name, description, url, pushedAt, languages }
}) => (
  <div>
  <h2>{name}</h2>
  <a href={url} target="_blank" rel="noopener noreferrer">
  {url}
  </a>
  <p>
  <small>
  <em>{pushedAt}</em>
  {" / "}
  <strong>{languages.nodes.map(node => node.name).join(", ")}    

  </strong>
  </small>
  </p>
  <p>{description}</p>
  </div>
);

export default Repository;

Apollo Client in Detail

But what if we reach the limits of apollo-boost or just want to see how we’d accomplish the same Apollo Client on our own? That’s what we’ll look at here.

Let’s add all of the packages we need—there are a lot of them! yarn add apollo-cache-inmemory apollo-client apollo-link apollo-link-context apollo-link-error apollo-link-http

Here’s a high-level overview of what we’ll use from the packages above:

• ApolloClient: The ApolloClient is the main library that comprises everything done on the frontend relating to GraphQL. It is frontend-framework agnostic and can be paired with specific packages for React, Vue, Angular, etc. When working with ApolloClient, you can set link and cache as some of the options, which we will cover below.
• InMemoryCache: When a GraphQL Query operation is performed, the resulting data is stored in a data store (think Redux or MobX). This is useful if the same information is requested that we already have — a round-trip to the server isn’t required and it can be served directly from cache. InMemoryCache is the default cache used in the apollo-boost library as well. There are a number of common use cases in which you would want to access the cache directly.
• ApolloLink: ApolloLink allows you to compose links together. These act as middleware and allow you to control the flow of a GraphQL operation request.
• onError: The onError function allows you to catch errors that have occurred during the GraphQL operation. Usually I use this area to notify the error reporting service being used (such as Bugsnag). In the code below, we will simply log it to the console.
• setContext: This function takes a function that allows you to return the new context of the request. This is a perfect place for setting Authorization headers.
• HttpLink: HttpLink is responsible for making the actual HTTP request. HttpLink relies on having fetch available, which isn’t a problem in modern browsers but is something to keep in mind if you wish to support older browsers. This is a terminating link so should be the last one in the chain.

import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloClient } from "apollo-client";
import { ApolloLink } from "apollo-link";
import { HttpLink } from "apollo-link-http";
import { setContext } from "apollo-link-context";
import { onError } from "apollo-link-error";


const errorLink = onError(({ graphQLErrors, networkError, operation }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, path }) =>
    console.log(`[GraphQL error]: Message: ${message}, Path:          ${path}`)
    );
  }
  if (networkError) {
    console.log(
      `[Network error ${operation.operationName}]: ${networkError.message}`
    );
  }
});


const authLink = setContext((_, { headers }) => {
  const context = {
    headers: {
      ...headers,
      Authorization: `bearer ${sessionStorage.getItem("token")}`
    }
  };
  return context;
});


const httpLink = new HttpLink({ uri: "https://api.github.com/graphql" });


// Finally once we’ve set up all our links, we can pass them to the ApolloClient
// using the ApolloLink.from function


const client = new ApolloClient({
  link: ApolloLink.from([errorLink, authLink, httpLink]),
cache: new InMemoryCache()
});

export default client;

Wrap-up

In this article we’ve covered some of the basics of how to use GraphQL in React using the Apollo library. We started off using Apollo Boost to configure our Apollo Client, but then went over how to customize the Apollo Client using a series of links and by specifying which cache we’d like to use. I recommend starting with Apollo Boost and only switching to your own configuration once you feel that it is limiting you. This is still just the tip of the iceberg in terms of what you can do with the Apollo GraphQL library, but it gives a good glimpse into its power and elegance to build data-driven interfaces in React.

For more info on building apps with React:

• Check out our All Things React page that has a great collection of info and pointers to React information—with hot topics and up-to-date info ranging from getting started to creating a compelling UI.
• You can also learn more about KendoReact, our native component library built specifically for React, and what it can do for you.