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:

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