GraphQL + ReactJS

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.