React-Query isRefetching and loading state

[AlexMachin1997]

Hi everyone,

I've just started to use react-query at work and it's going pretty well so far, however I've noticed when I re-run the query is re-triggers the main page loader which is triggered (controlled by the status === "loading").

What I want to be able to do is some how differentiate so I don't show the main loader when re-running the query I want to show a refetching loader.

Does react-query have a built in way to do this ? Is there some way to combine existing properties to achieve what I want.

I saw in a seperate thread that someone combined isLoading and isRefetching so the check looked something like this:

isLoading && !isRefetching ? 'Main content Loading.....' : <div> Main content {isRefetching ? 'Loading....' : 'Not refetching'}</div>

Would this work ?

[TkDodo]

isLoading is only true when you are loading for the first time and have no data. when a refetch happens, you should be in success state already.

so, hard to say without seeing some code, but usually - and you can check that in all the examples - loading checks for hard loading states and isFetching or isRefetching for background refetches

[AlexMachin1997]

Is that the case when I query is ran with a new key ?

So say I have something like this:

const {status, data} = useQuery(["patient-details", {id: userId, startDate: '2020-01-01', endDate: '2021-01-01'}], () => getDate(userId, startDate, endDate))

When I change the startDate and endDate it reshows the main page loader, when I change a dependency I want to show a refetching loader. In previous projects I did this myself with some extra state, but I thought react-query would have something like this baked in.

[TkDodo]

This is an information you've not been sharing with me in the initial question. What you want is likely keepPreviousData: true, and then you can use the returned isPreviousData flag to indicate that you're transitioning between keys (or just use isFetching, but that will be true for any outgoing fetch)