GraphQL + ReactJS

Chinnasamy A

Chinnasamy A

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