How to show loading with useInfiniteQuery for first page?

[aliakbarazizi]

Hi I'm try to use useInfiniteQuery but I'm little confused to how show proper loading.

in the document it suggest isFetching && !isFetchingNextPage

This is great and work perfect except for one exception.

I have 2 different loading, one for first page that come in top of the list and the second one is for loading next page that come in bottom of the list.

When the query become active again and I have more than one page in the cache, react query tries to load all the pages and for all of them the isFetching && !isFetchingNextPage is true. So I'm showing loading at the top of the pages for fetching pages 2,3,4... and since it can be lot of pages there is a lot of time the loading visible.

I want to make refeching other pages in background ( not the first page so the user can know he is seeing new data )

So how I can show loading for these condtion

1. when its the first time and not data is in the cache
2. when re-fetching data only for page 1

Thank you

[TkDodo]

There is only one cache entry that contains multiple pages. Internally, the refetch is one opaque operation. I don't think there are even re-renders until all fetches are done, as that would potentially show non-matching / invalid data / duplicate data.

So isFetching is true until all pages are refetched and there is no value exposed that shows you which page is currently refetching.

[aliakbarazizi]

I see now what is the problem and I agree its not possible

But how about providing someway to indicate which page is currently loading? As I understood it start to fetch data sequentially so maybe we can add some flag to indicate which page is fetching currently? I just making a suggestion for improving but I don't know its possible at all or not, I didn't saw the source code.

In my problem I have to show a loading indicator(thats part of the UI) until all pages loaded and it may take a lot of time(for example for 20 pages)
I try to remove other pages when user navigate to other pages so in this situation its only fetching first page, but I'm losing scroll restoration.
So I think this is issue

[TkDodo]

But how about providing someway to indicate which page is currently loading? As I understood it start to fetch data sequentially so maybe we can add some flag to indicate which page is fetching currently? I just making a suggestion for improving but I don't know its possible at all or not, I didn't saw the source code.

This would require us to inform the observers after each fetch, I don't think its currently possible.

[aliakbarazizi]

I saw the code, how about passing dispatch to observers and call dispatch from there? https://github.com/TanStack/query/blob/main/packages/query-core/src/query.ts#L400
and dispatch meta for each page

[TkDodo]

I think this is not a bad idea :)

Go ahead and play around with it if you want. Since v4, we have tracked queries on per default, so if users wouldn't be using this property, their components wouldn't re-render, so the state update would be "mostly harmless" :)

[aliakbarazizi]

I created pull request, but since im a new to this library maybe its not the best way to do this
#4295