GraphQL + ReactJS

Tudip

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.

E.x.
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.

Ex:
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
       (or)
      custom setup
      

    • To install graphQL package:

      npm install --save react-apollo

    • To write graphQL schema: GraphQL schema are object types.

      Ex:
      query signInQuery {
       userDB {
       username
       password
       }
      }
      

      signInQuery —> schemaName userDB —–> DB name

    • To create HOC (Higher order components):

      Ex :
      const ExampleHOC = query signInQuery {
      userDB {
       username
      password
      }
      }
      

      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.