useInfiniteQuery replies requests for all cached pages at once

[levani]

I'm using useInfiniteQuery in a react native project to fetch data for FlatList component when the user scrolls to the bottom.

If I scroll down to, lets say page 5, then navigate to another screen and then return back, useInfiniteQuery sends requests for all five pages without the user even touching the FlatList. So just by opening the page I get 5 requests:

http://example.com/news?page=1
http://example.com/news?page=2
http://example.com/news?page=3
http://example.com/news?page=4
http://example.com/news?page=5

Is this how useInfiniteQuery supposed to work? If it is, then is there a way to fetch only the first page on page load?

[TkDodo]

Yes, it’s supposed to work that way. It will refetch all pages in the background one after the other. If you don’t that, you can reduce the cacheTime, but then you wind up with no data and a loading spinner, or maybe delete all pages except the first one via queryClient.setQueryData, though I’m not sure if that really works.

[hirbod]

LOL... never trust code you've copied :D.... and I need some sleep.

I didn't realize the typo pageParms (which should be pageParams).
So weird it does not throw any error.. Looks like it gets catched internally.

Thank you very much @TkDodo - this is now working exactly how I need it.

[TkDodo]

Obligatory "Typescript would've caught that" 😅. Good to know that it works 👍

[hirbod]

I am usually typing most of the things, but prev is type "unknown" and I didn't bother to fix that for a "quick" test.

[mnhatwwpt]

Hi @hirbod , where did you use the 'setQueryData' function to keep only the first page ?

[CodeWithAlamin]

I followed your method (which is also showed in TanStack query official website) like this as you mentioned:

      queryClient.setQueryData('playlists', (prev) => {
        console.log(prev); // this triggers
        return {
          pages: prev.pages.slice(0, 1),
          pageParams: prev.pageParms.slice(0, 1),
        }; // does absolutely nothing, as seen in my Flipper screenshot
      });

But, the problem is, if i do that then TanStack query gets confused and keeps the "isFetching, isFetchingNextPage" etc states to "true". as a result if i go to another route and come back, these states becomes true which runs my loading spinner.

[CesarERodrigu3z]

Has this been resolved? is a very annoying problem, same here I am playing on react native application and the experience is not great

[TkDodo]

what behaviour would you expect please?

[auwtch]

I think a built-in solution to reset the cursor or page number after unmounting would solve this