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.
