Polling further simplified with React Query’s useQuery

Shanmugharaj K

3 min read

·

Feb 16, 2022

--

In a nutshell, React Query helps fetch and cache server-side data and share it across the components. It gives us two main hooks for data fetching: useQuery and useMutation. We can use useQuery to fetch data from the network and cache it.

In this article, we will see how useQuery can ease our job in polling and refetching APIs conditionally with a small example. We will now dive into the requirements without further ado.

React Query checklist for polling

• Call the API when the component mounts, and if the attempt is successful, then return the data. We should also have the ability to stop this behavior with a flag. By default, this flag should be set as true. If the user sets the flag as false, then the API call shouldn’t be invoked as soon as the component mounts. It should happen only when it’s set to true.
• If the API call fails or the resource is not ready (eg. statuscode other than 200), retry until the server gives 200 as the status code.
• The number of retries in case of failures should be configurable. Once the limit has been reached, then polling should stop.
• When the component unmounts, then polling should stop.
• When the input parameters change, then polling should stop to initiate a new API call, and restart in case of any failure.

The simplified rough outline of UI can be seen in the image below:

The demo source code is available here.

We can extract this to a custom hook (not battle-tested) as seen below.

This hook satisfies our requirements. However there are a few things that we might need in real-time that might require additional work.

• In the above example, we used lodash deep equal. We can avoid this if we can maintain the same reference if the body didn’t change. But in cases where we are deriving the params and if it’s nested, it’s a little difficult to maintain it. Also, depending upon the nesting level, the order also matters even though we are using the same values.
• If we need this data to be available for some components in different hierarchies, we need to store this in either context or redux or something similar to share the data across the components.

If we convince ourselves to use React Query, then all these operations become even more simpler with a few lines of useQuery: it’s highly configurable with a lot of batteries included. If the reduced lines of code do not interest you, then do have a look at the pros listed later in the blog.

Our custom hook now will just have few lines, as shown below:

We can cache data at a configurable time interval and also auto fetch it. If the data retrieval is successful, then it will update the UI or it will silently fail. We can eliminate the need to maintain the same reference or perform deep equal comparisons.

Now if we need to read the data in any other component, we can do so just by calling queryClient.getQueryData(…). Automatically when the component unmounts, all the listeners will be unsubscribed by React Query. No additional work is required.

Earlier, we were using redux store to place the server data that is shared across multiple components. By using React Query, we don’t need to do that any more, and it also reduces the need for a lot of boilerplate code. We highly recommend that you test and play around with React Query’s useQuery hook to see the benefits for yourself.

Till then, keep an eye out for more posts from us on all things code!