A Practical Guide to GraphQL: From the Client Perspective/

...

/

Introduction to Writing GraphQL App with React

Introduction to Writing GraphQL App with React

Learn how to use GraphQL in React with HTTP.

We'll cover the following...

The previous chapter was a basic introduction to GraphQL while in this chapter, we will learn how to combine React with GraphQL. There is no smart library like Apollo Client or Relay to help get started, so instead, we will have to perform GraphQL queries and mutations with basic HTTP requests.

Along the way, we will build a simplified GitHub client, basically an issue tracker for GitHub, that consumes GitHub’s GraphQL API. We will perform GraphQL queries and mutations to read and write data, and by the end, we will be able to showcase a GraphQL in React example that can be used by other developers as a learning tool. The code snippets along the way will guide you in your development.

As a reference, the final application we are going to build can be found here.

Getting Started

Let’s get started with the App component in app.js.

import React from 'react';

import ReactDOM from 'react-dom';
import App from './app.js';

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

The component only renders a title (React GraphQL GitHub Client) as a headline. Before implementing any more React components, we need a library to handle GraphQL requests. This is vital as it ...