Introduction to React Hooks
Reusable stateful logic functions can be called as Hooks that is introduced by React in version 16.8.0 . Main purpose of hooks is to simplify complex components to make them easier to test and reuse, readable and maintainable
Introduction to GraphQL
GraphQL is a data query language for APIs it has 2 parts queries and mutations, queries are for retrieving data and mutations is to update them. GraphQL reduce the overall roundtrips making it more suitable for mobiles and poor network situations.
Why Hooks are introduced
- Use state within a functional React component
- Make shared behavior into a Hook
- Hooks are used to reuse stateful logic between components
- Simplify complex components
- Hooks allow us to use features without classes
Advantages and Disadvantages of GraphQL
- Client can get exactly what they want from the server
- This help with the applications performance
- Rather than having all the data from the API call this way we can save Memory
- Can request any resource in a single request
- Allows the API to know exactly what data available and in what format
- Always return the HTTP status code of 200 no matter what the outcome is
- This is affecting the error handling and complexity in monitoring
- GraphQL do not have cache support
- An alternative caching support is needed when dealing with GraphQL
- Why it does not support caching is that to avoid re-fetching resources.
- This cannot be used with less complicated APIs
React Hooks with GraphQL
We can execute queries, mutations, and subscriptions with using React hooks mainly we use 3 hooks for this those are
according to the documentation useEffect definition is
“The function passed to useEffect will run after the render is committed to the screen. Think of effects as an escape hatch from React’s purely functional world into the imperative world.”
according to the documentation useState is a stateful value and it is also a function to update it
this useReducer works exactly like the reducers in redux we use this to maintain state between multiple parts of hooks.
React suspense and React cache as experimental ways to deal with asynchronous data fetching but in the future, they will provide a better API for Queries
For mutation we don’t need to use React Hooks we are directly creating it from the component
For subscription we use the useEffect hook to listen to triggers from interactions to get some work done form that. Also, we use useReducer hook to share the state across multiple effects and also we only need the subscription to fire only when the component in loaded. For that we have to manage all the state in a single reducer that will both use in useEffect.
We can use Apollo Client to work with React hooks when dealing with GraphQL, since Apollo is a unofficial library to get the work done most of the functionality and the effect of using hooks for GraphQL is there.
With using Hooks we can simplify the workload when we are dealing with specially subscription.