GraphQL + ReactJS

tudip-logo

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:

GraphQLwithReactJS  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.

Request a quote