Differentiate refetching from actual loading

[adriandmitroca]

Hey,

So the use case is pretty much simple:

const { data, isFetching, isFetchingNextPage } = useInfiniteQuery(["posts", { filters }], fetcher)

Currently it is impossible to detect completely new refetch, when filters property is changed. react-query does automatic refetch out of the box, however you can't really differentiate it from background update that comes together with library.

Real life use case: rendering spinner WITHOUT displaying posts when filters change, as existing posts become immediately obsolete for updated filters.

Current workaround: setting staleTime to Infinity, so that background updates are completely disabled to avoid empty UI rendering so that isFetching can be simply used to detect query key change only altogether with isFetchingNextPage / isFetchingPreviousPage. EDIT: staleTime seems to be breaking query key changes, but still should give some picture of the problem

What do you think? I'd say react-query could benefit from some extra option / prop where we could detect if current query is completely new.

[TkDodo]

you can't really differentiate it from background update that comes together with library.

I don't think that's true. when the query key changes:

• a new entry will be created in the query cache
• if this happens for the first time, there will be no data for that entry, unless you have keepPreviousData set to true or populated it with initialData.
• because there is no data, the query will be in a "hard loading" state and isLoading will be true, which is not the case for background refetches.

Usually, it's enough to show a loading spinner if the query is in loading state. For background refetches, the query will stay in it's state (usually success) and the separate isFetching flag will be true (it will be true whenever a request is outbound, no matter the reason). Judging from what you are writing, you are showing a spinner whenever isFetching is true, but you want to use isLoading instead.

This is also well documented in the api docs:

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

isFetching Will be true if the query is currently fetching, including background fetching.

[adriandmitroca]

Thanks for great response!

Looks like you're completely right, I completely have missed isLoading property.

[TkDodo]

If you have initialData, you can show it instead of the loading spinner for a better ux, maybe with a small loading spinner for isFetching when background refetches happen. If you want isLoading to be true, don’t set initialData.

If you have a codesandbox that shows your issue, i can take a closer look.

[abhishekpoloju]

isLoading becoming true while refetching in my case
Is this an Issue

[TkDodo]

It shouldn't. Show a reproduction please