Help us understand the problem. What is going on with this article?

React Js with GraphQL using Apollo GraphQL

More than 1 year has passed since last update.

Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL. ... Universally compatible, so that Apollo works with any build setup, any GraphQL server, and any GraphQL schema.

In previous article I had created sample backend graphQL. Now I would like to build the frontend side which using React js.

Set up the React js project

We will set up the project, create the following:

  • A Reactjs project called cookbook_display
  • An app within cookbook_display called ingredients
# Create the project directory
mkdir cookbooks
cd cookbook
# Install React 
npm install -g create-react-app
# Install React-apollo
npm install -g react-apollo
# Create the React sample project
create-react-app cookbook_display

In side the App.js let add some code like this

import React, { Component } from 'react';
import { HashRouter, Route, Router } from 'react-router-dom';

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

const client = new ApolloClient({
  uri: 'http://localhost:8000/graphql'

export default class Index extends Component{
    render() {
        return (
            <ApolloProvider client={client}>
            <HashRouter forceRefresh={false}>
                    <Route path='/' component={Home} exact={true}/>


Create View that call Home.js with the following code

import React from 'react';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';

export default class Home extends React.Component {

    constructor(props) {


    render() {
        return (

           <ApolloProvider client={client}>
                           allIngredients {

            {({ loading, error, data }) => {
                        if (loading) return <p>Not available</p>;
                        if (error) return <p>error :( </p>;
                        return (




Run the Project

npm start


This is the sample frontend with GraphQL. In next article I will add more point about :
1. Does GraphQL have any restrictions?
2. How is the speed compared with the REST API?

Udon is my nick name.I enjoy coding like I eat Udon.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away