I am using v4 of useQuery to poll and re-poll an endpoint until the correct data is fetched, or until a max re-poll count has been met.
However, I'm not sure how I can most effectively that the loading/re-polling is finished at the point where either:
- Received all of the data I need in order to progress (may be less re-polls than the max)
- Reached my max re-poll limit
Currently I am using a useState to capture whether it's still polling:
const [isPolling, setIsPolling] = useState(true);
and changing the value of this within the refetchInterval based on whether I am at the maximum re-poll limit, or if I have the data I need.
refetchInterval: (result, query) => {
const pollingEnded = result.data.stillWaitingForResults || query.state.dataUpdateCount < MAX_RE_POLL_COUNT;
setIsPolling(!pollingEnded);
return hasPollingEnded ? false : REFETCH_INTERVAL;
},
This is then used to return an object to show if the useQuery function is still polling etc.
return {
isLoading: isPolling,
...
}
However, I'm not entirely sure that this is the "correct" way to do this.
I know that there are several props as part of the request result that can indicate the status of the useQuery call, such as:
fetchStatus- "fetching" whenever queryFn is executing, including initial loading and background fetchesisFetching- Derived from thefetchStatusisLoading- Derived from thestatusisRefetching- True whenever background refetching (does not include initial loading) - Equivalent toisFetching && !isLoading
Is there a better way in which I can achieve this with the props returned by the useQuery, as I'm not 100% clear which would show all the loading statuses of the query such as initial and refetch poll?