React Js with GraphQL using Apollo GraphQL

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}>
                <div>
                    <Route path='/' component={Home} exact={true}/>
                </div>

            </HashRouter>
            </ApolloProvider>
        )
    }
}

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) {
        super(props);

    }




    render() {
        return (

           <ApolloProvider client={client}>
                <Query
                      query={gql`
                        {
                           allIngredients {
                                id
                                name
                              }

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

                       );
            }}


          </Query>



         </ApolloProvider>
        );
    }
}

Run the Project

npm start

Summary

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?