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

[auwtch]

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

[TkDodo]

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

what do you mean with resetting ? A refetch always occurs from the first page, so it is “reset”. If you have 5 pages in the cache, do you want react-query to delete everything except the first page when you unmount a hook?

[hirbod]

Actually, that’s a good question. We’re manually doing this on pull-to-refresh in our apps, for example. If a user pulls to refresh, we remove all pages for that specific query but keep page 1 and refresh that. Anything else has proven to spam the server too much. Since we finally have bi-direction support, I still need to figure out how all of this works with maxPages.

Example:

      trpcUtils.post.feed.setInfiniteData(feedQueryOptionsInput, (d) => {
        if (d?.pages.length) {
          return {
            pages: d.pages.slice(0, 1),
            pageParams: d.pageParams.slice(0, 1),
          }
        }
      })
      await refetch()

[TkDodo]

that’s totally fine, and I don’t think we need to provide more out of the box. It’s also documented here: https://tanstack.com/query/v5/docs/framework/react/guides/infinite-queries#keep-only-the-first-page

[hirbod]

I wish I didn’t have to repeat all this boilerplate code for all our infinite lists, to be honest. Would be great if refetch could accept an argument or something similar. Anyway, it's not too much effort though. Just need to make sure that the params are the same