Infinite Queries states are conflict

[huynqjmango360]

Describe the bug

Im using useInfiniteQuery and noticed the states of isLoading, isFetching, isRefetching, isFetchingNextPage are changing at the same time when calling fetchNextPage or refetch. As follows:
when calling refetch isFetching and isRefetching the same change:
{isFetching: true isFetchingNextPage: false isLoading: false isRefetching: true}
When calling fetchNextPage isFetching, isFetchingNextPage, isRefetching the same changes:
{isFetching: true isFetchingNextPage: true isLoading: false isRefetching: true}

My code:
const { data, isLoading, isFetching, remove, refetch, isRefetching, isFetchingNextPage, fetchNextPage, hasNextPage, isError, } = useInfiniteQuery( ['products', id, params], ({pageParam}) => fetchListProduct(id, params, pageParam), { refetchOnMount: 'always', getNextPageParam: (lastPage, allPages) => lastPage?.products.length >= 20 ? allPages.length + 1 : undefined, behavior: { onFetch: async () => { await queryClient.cancelQueries(['products', partial, params]); }, }, } );

Your minimal, reproducible example

Steps to reproduce

calling fetchNextPage or refetch

Expected behavior

separate the state according to each specific actions

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

macOS

react-query version

~4.0.0-beta.23

TypeScript version

No response

Additional context

No response

[TkDodo]

not sure what the "issue" here is. isFetching is always true when a request is going out. isRefetching is true if you are fetching and have fetched before. isFetchingNextPage is true if you are fetching the next page.

Naturally, some of those flags can overlap....

[grazianodev]

I was a bit confused by this too, specifically by the fact that isRefetching is true while fetching the next page.

I have a component that displays a list of posts, that is hooked up with useInfiniteQuery. When a new page is being fetched (isFetchingNextPage is true), I display a spinner at the bottom of the list; in some instances, I want to refetch the posts I've already fetched (isRefetching is true), and indicate this to the user by graying out the list while the posts are being refetched. So, different animations for different purposes, spinner for fetching new pages, graying out for refreshing existing pages.

But, isRefetching turns out to be true when isFetchingNextPage is true, so now when I fetch new pages I get both the spinner and the graying out, which I don't want. The workaround is easy (I'm just using isRefetching && ! isFetchingNextPage), however it would be nice to have a flag such as isRefreshing or isRevalidating. Or am I missing something out?

[TkDodo]

I have to admit we added the isRefetching flag without keeping infinite queries in mind. isRefetching right now means: Every fetch except the first one, as it is implement as:

query/packages/query-core/src/queryObserver.ts

Line 568 in 7e51776

isRefetching: isFetching && status !== 'loading',

A fetch of a next page in an infinite query is also a fetch that isn't the first one, so this flag is true. The docs for useQuery also mention that:

- isRefetching: boolean
  - Is true whenever a background refetch is in-flight, which does not include initial loading
  - Is the same as isFetching && !isLoading

Do you think it would make sense to change that for useInfiniteQuery ?

[joseito-terence]

Any update on this issue? I'm also facing the same problem for useInfiniteQuery.

[TkDodo]

I'd accept a PR that remaps isRefetching to exclude isFetchingNextPage and isFetchingPreviousPage for infinite queries.

[zorzysty]

PR: #4465