GraphQL + ReactJS

GraphQL + ReactJS


21 April 2018

Introduction of GraphQL And React :

  • GraphQL is an extremely flexible query language And React is JS library for building User Interface, both are developed by Facebook.
  • GraphQL is one of the ways of making API’s.
  • React is component-based UI development.

Why Use GraphQL:

  • Get many resources in a single request.

Rest API vs GraphQL:

Rest API : Rest API has many endpoints. It has a different name for different API.

User <------- /signup-api -----> Server
User <------- /signin-api -----> Server
User <------- /add-api -----> Server
User <------- /update-api -----> Server
User <------- /delete-api -----> Server

GraphQL : GraphQL have only one API endpoint. Common API name.

User <------- /graphql-api -----> Server

graphql-api to run whole api’s functionality of your app like signin, signup, add ,…etc.

How to use GraphQL in React :

Basics concepts:

      • To build React setup:
        npm package
        custom setup
      • To install graphQL package:
        npm install --save react-apollo
      • To write graphQL schema: GraphQL schema are object types.
        query signInQuery {
         userDB {

        signInQuery —> schemaName userDB —–> DB name

      • To create HOC (Higher order components):
        Ex :
        const ExampleHOC = query signInQuery {
        userDB {

        ExampleHOC —-> Higher Order Component

      • To wrap React Component:
        const MainComponent = graphql(ExampleHOC)(Login);

        Login —- UI Component * Sign in functionality API to wrap Login component. * To call sign in props is the trigger to /graphql-API for sign in functionality.

Blog Categories
Request a quote