isLoading vs isFetching: How to avoid hard refresh without constant spinner display?

[aguirrealvaro]

If the data is stale and stored in the cache (defaults), React Query retrieves the data from the cache and performs a background fetch.

Using isLoading, I will only see the spinner the first time, as subsequent requests will retrieve the data from the cache.

If I use isFetching, I will see the spinner with each background fetch.

Suppose that during a background fetch, React Query detects a change in the response. In this case, using isLoading, a hard refresh occurs (the value updates without showing a spinner)

To avoid this hard refresh, I can use isFetching, but then I'll face the issue of always seeing the spinner, even when obtaining the data from the cache. However, the purpose of React Query is to solve this problem of having multiple spinners for data fetching.

Am I missing something or is there something I'm not understanding correctly? How can i solve this?

[TkDodo]

Suppose that during a background fetch, React Query detects a change in the response. In this case, using isLoading, a hard refresh occurs (the value updates without showing a spinner)

It would be easier to see an example, but I think you're talking about a changing queryKey? In this case, you'd want keepPreviousData: true to avoid the in-between hard loading state

[TkDodo]

If I am using isLoading (instead of isFetching in order to avoid a spinner every background fetch) i will see this "hard refresh" without the spinner

no, you won't, because when you go back to the home page in step 4, your query will be in:

{ status: 'success', data: your-stale-data, fetchStatus: 'fetching' }

a hard loading state (isLoading) is defined as: you have no data. That isn't true when you get cached, stale data ...

[aguirrealvaro]

By "hard refresh" i am referring to the fact that some data is changing without showing a spinner. Is there a way to avoid that without using isFetching? Because I dont want to show a spinner for every background fetch. Thanks @TkDodo

[TkDodo]

Because I dont want to show a spinner for every background fetch.

You can check the isFetchedAfterMount flag returned from useQuery and combine that with isFetching

[HimanshuRanka]

I think I am facing something similar to OP but also believe this is more of a strategy question to begin with.

For example: I have a list on my application that is paginated only on the frontend. My query retrieves all the data at once stores it in the cache. Let us assume there is a large amount of data here and the query is a long running query (2+ seconds to run).

The stale time for this data does need to be 0ms as the data itself is updated by multiple users relatively infrequently. Now let us assume the following sequence of actions:

• I navigate to the list:
  • isLoading is true. I show the spinner. The query resolves and caches the fetched data. The data is displayed in my list. So far all is well.
• Now I navigate to another page in the application.
  • My list has unmounted
• I navigate back to the list:
  • This time my data is pulled from the cache and immediately displayed. A background refetch is initiated which takes a long time (2+ seconds as mentioned above). Once this background refetch resolves the data that is fetched is different from the data that was in the cache as it was updated by another user while we were away from the list. The stale data is quietly swapped with this new "fresh" data on my page which can look glitchy as the data in the rows change, the number of rows in my list change, the order can change and in some cases since it is paginated it results in a re-render which then takes my list back to page 1.

I believe this is not really an issue or bug with react query but can result in an odd user experience of sorts:

• On one hand since data is updated infrequently and the query is long showing the loading spinner for 2 seconds every time the isFetching is true is frustrating as say about 70% of the time the data is no different from what we already have in cache
• On the other hand if we did not show a loading spinner when isFetching is true and instead display the data in the cache while a background refetch happens, then that glitch that randomly occurs about 30% of the time (random from a user perspective) also looks really bad.

The question I guess is that is there a recommended way of dealing with something similar within react query? Alternatively is there something me and I guess OP have missed in the implementation that would help to solve for this issue?

I know a lot of sites use toasts, snackbars and other methods to indicate to a user that the data has changes once a query resolves and allows them to choose to update what they are seeing (BitBucket for example when you are on a PR and u push changes, there is a little toast that tells you the diff has changed and allows you to click a refresh button which for all intents and purposes simply repaints the page with the new data) but this approach can feel clunky as well.

[TkDodo]

I know a lot of sites use toasts, snackbars and other methods to indicate to a user that the data has changes once a query resolves and allows them to choose to update what they are seeing (BitBucket for example when you are on a PR and u push changes, there is a little toast that tells you the diff has changed and allows you to click a refresh button which for all intents and purposes simply repaints the page with the new data) but this approach can feel clunky as well.

if you want to implement this pattern, you'd need to copy old data to local state or a ref, and when new data comes in, still show the old data + a toast