Custom React Hooks with GraphQL

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

1. Use state within a functional React component
2. Make shared behavior into a Hook
3. Hooks are used to reuse stateful logic between components
4. Simplify complex components
5. Hooks allow us to use features without classes

Advantages and Disadvantages of GraphQL

Advantages

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

Disadvantages

1. Always return the HTTP status code of 200 no matter what the outcome is
   1. This is affecting the error handling and complexity in monitoring
2. GraphQL do not have cache support
   1. An alternative caching support is needed when dealing with GraphQL
   1. Why it does not support caching is that to avoid re-fetching resources.
3. 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

1. useEffect
2. useState
3. useReducer

useEffect

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

useState

according to the documentation useState is a stateful value and it is also a function to update it

useReducer

this useReducer works exactly like the reducers in redux we use this to maintain state between multiple parts of hooks.

Queries

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

Mutation

For mutation we don’t need to use React Hooks we are directly creating it from the component

Subscription

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.

Conclusion

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.

References

Advantages and Disadvantages of GraphQL

https://www.robinwieruch.de/why-graphql-advantages-disadvantages-alternatives

https://medium.com/open-graphql/react-hooks-for-graphql-3fa8ebdd6c62

https://dzone.com/articles/how-to-use-graphql-in-react-using-hooks

https://www.apollographql.com/docs/react/api/react-hooks/

How to use GraphQL in React using hooks