Tarun Sharma
Sep 11 · 5 min read

In Part-1 we have seen Graphql server setup for basic User Queries

  • Let's build a Graphql client for this Graphql server (server created in Part-1)

This below architecture or Pattern we are trying to achieve with client-server

  • The client will be create-react-app with the apollo client library
  • The server is Node js express with Apollo server library

We are using apollo client and server

In this series, we will create react client for our APIs created in the first part with Graph ql server and also access Github open Graphql APIs

  1. Apollo Advantages
  2. Apollo Disadvantages
  3. Apollo Alternatives for JavaScript, React and Node.js
  4. GraphQL Setup, Tools and APIs
  5. Building React Client for User Queries
  6. Feeding the API with Data on GitHub
  7. Read/Write Data with GitHub’s Personal Access Token
  8. Interacting with GitHub’s GraphQL API
  9. GraphQL Fundamentals
  10. GraphQL Operation: Query
  11. GraphQL Operation: Mutation

Setting up Apollo Client using React JS

Apollo Client is a complete state management library for JavaScript apps. Simply write a GraphQL query, and Apollo Client will take care of requesting and caching your data, as well as updating your UI.

Fetching data with Apollo Client guides you to structure your code in a predictable, declarative way consistent with modern React best practices. With Apollo, you can build high-quality features faster without the hassle of writing data plumbing boilerplate.

I thought of writing a full blog here but there is already one published, we can just follow along on that and build our React Client for Graphql

You can follow the blog mentioned here or let's go step by step for adding apollo client with React Application

How to add Apollo client on React Application, what all dependencies we need

“apollo-cache-inmemory”: “1.3.6”, 
“apollo-client”: “2.4.3”,
“apollo-link”: “1.2.3”,
“apollo-link-error”: “1.1.1”,
“apollo-link-http”: “1.5.5”,
“graphql”: “14.0.2”,

The Apollo Client setup can be completed in the top-level src/index.js file, where the React to HTML entry point exists as well. First, install the Apollo Client in your project folder using the command line:

npm install apollo-client --save

Two utility packages are required for two mandatory configurations used to create the Apollo Client. The apollo-cache-inmemory is a recommended cache (read also as: store or state) for your Apollo Client to manage the data, while apollo-link-http is used to configure the URI and additional network information once for an Apollo Client instance.

npm install apollo-cache-inmemory apollo-link-http --save

so what we need in our root file which can be app.js

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

The ApolloClient class is used to create the client instance, and the HttpLink and InMemoryCache are used for its mandatory configurations. First, you can create a configured HttpLink instance, which will be fed to the Apollo Client creation.

Read more about the network layer configuration in Apollo Client

We already have Grapql server exposed by Github we just need to provided github personal token to access APIs exposed by Github, before moving to set up provided we can check client network setup with different middleware

Next Step —

Let’s now allow react component to talk to Apollo server same as Redux we needed Store and Provider, Here we would need apolo provider which will accept client

// ApolloProvider wrapper as Provider passing apollo client 
ReactDOM.render(
<ApolloProvider client={client}><App /> </ApolloProvider>,document.getElementById('root')
);

Now React component Just need to trigger Graph ql query and get data from a triggered query

That’s how you define a GraphQL query in a declarative way to React. Once the Query component renders, the request is executed. The Apollo Client is used, provided in a top-level component, to perform the query. The render props pattern makes it possible to access the result of the query in the child function. You can try it in your browser to verify that it actually works for you.

Graphql query execution is network call so we can deal with delay and errors in API call by showing message and loading indicator.

Let’s build our application and integrate all these Graph queries to access graph queries

  • SpaceX APIs
  • Github APIs

In the above example, we are making API call to Spacex APIs and getting a response in component

Let's build an app for GitHub in the same way, I have created a simple component to get all Repo of a user whose github personal token passed with an HTTP link

In this Part, I have covered only basic query mostly get operations but we can also do mutations to update in back end systems

Mutation and runtime query argument passing, we will cover in next Part-3

Javascript Developers

Publication for Javascript developers

Tarun Sharma

Written by

Developer 💻, Trainer 👨‍🏫, Publisher 📕 & Mentor 🗣 #JavaScript #ReactJs #GraphQL #NodeJs Publishing Videos Tutorials http://medium.co .Writing code at Srijan

Javascript Developers

Publication for Javascript developers

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade