How to achieve loading state between fetches when using refetchInterval

[alexchernous]

Scenario

Upon page load I call an API to display live data for the user. This API is not guaranteed to return anything on the first try, so I use refetchInterval to try 2 more times. During that time, the API can potentially generate and return live data which I'll display, or maybe it can't generate anything at all in which case an empty state will be shown.

I'd like to display a loading state for the entire duration of this polling attempt: first load, subsequent refetches, and the time in between because I know there will be multiple refetch attempts.

Here's a simplified version of the code:

const maxRefetchCount = 2;
const intervalMs = 500;

const { data, isFetching } = useQuery({
  queryKey: ['live-data'],
  queryFn: getLiveData,
  refetchInterval: (query) => {
    if (query.state.dataUpdateCount > maxRefetchCount || !!query.state.data?.length) {
      return false;
    }
    return intervalMs;
  },
});

if (isFetching) {
  return <div>Still loading...</div>
}

if (!isFetching && !data?.length) {
  return <div>Empty</div>
}

return data;

The above code will flicker the "Still loading..." state in and out, because isFetching is only true when the query is in flight. This is not ideal since I don't want to display the empty state to the user until I've exhausted my polling attempts and can be reasonably sure the API won't return any live data.

Workaround

The docs helped me find this solution:

...
const currentRefetchCount = queryClient.getQueryCache().find({ queryKey: ['live-data'] })?.state?.dataUpdateCount || 0;
const willRefetch = currentRefetchCount <= maxRefetchCount;

if (willRefetch) {
  return <div>Still loading...</div>
}
...

Question

I'm wondering if there's a better way to go about this using react-query. It feels odd to have to access the query cache via the query client for the query I'm directly working with in the same file.

• Am I missing some useQuery result/parameter that could do the job?
• Maybe I'm approaching the UX wrong?

Potential feature request

If I understood some of the inner workings of the queryObserver correctly, a new boolean that looks at the refetchIntervalId could be added to the result (QueryObserverBaseResult) of the createResult function in query-core.

willRefetch: !!this.#refetchIntervalId,

Admittedly I think my use case is quite niche and this new state won't be useful for many scenarios; I imagine refetchInterval is mostly used for background polling.

If that's the case, and it is too niche, perhaps the same result object can expose the dataUpdateCount state (similarly to how it already exposes the dataUpdatedAt state today). This can be used to calculate the same willRefetch boolean that I have in the Workaround section above without having to access the query cache manually.

dataUpdateCount: newState.dataUpdateCount,

[TkDodo]

This API is not guaranteed to return anything on the first try, so I use refetchInterval to try 2 more times. During that time, the API can potentially generate and return live data which I'll display, or maybe it can't generate anything at all in which case an empty state will be shown.

I would probably make the queryFn error if the API doesn’t return anything, and then use retry to do the retries. The query will stay in pending state until all retries are done.

[alexchernous]

Ah that's a clever workaround, thanks!

[hanneswidrig]

This was such an obvious solution in retrospect, I was previously using refetchInterval to poll a long-running process and I was having the same issue as OP.