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

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

Advantages

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

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

useEffect

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