How do you know that data has been refetched?

[shaneajeffery]

Hey all.

For the project I am working on, I am needing to update a page every 5 minutes with new data and I want to re-render in place (meaning no loading indicator). Per our design, I am just adding a last updated timestamp to the page to let the user know the last time there was update to the data.

So, my question is, how can I know whether the data that I am fetching is the initial page loading or a refetch? In the payload coming back from React Query, there is no way to tell.

Has anyone run into a similar issue and figured out a solution?

TIA!

[shaneajeffery]

A possible idea I had was to have all of the queries set to not refetch automatically and then use the manual refetch for each of the queries in a setTimeout useEffect. Every time that setTimeout would fire, it would update a local state variable that would be tracking whether or not there was refetch.

I am sure that there are holes in that approach, but trying to think outside of the box.

[TkDodo]

I think the loading state is exactly what you want, from the docs:

loading if the query is in a "hard" loading state. This means there is no cached data and the query is currently fetching, eg isFetching === true

status === 'loading or isLoading === true will only be set for the "initial" fetch, where you have no data yet, while isFetching === true will be set every time a request goes out, either for the initial one or a background fetch.

I usually show a big loading spinner for isLoading and a small one somewhere else on the page to indicate background fetching via isFetching && !isLoading (joining both conditions here so that we don't get two spinners).