Why does useInfiniteQuery remember the current page even when it unmounts and remounts?

[devonpmack]

This behaviour is quite odd. If you go to component with an infinite query, go to next page, leave and then come back, it still remembers the page number you are on. I would expect the current page to reset back to zero and it to keep the cache of pages when unmounted.

I couldn't find a good way to work around it without just disabling caching. Maybe this should be a setting like "resetPageOnUnmount: true"?

[TkDodo]

What's a "current page" in terms of an infinite query? I think I don't understand the scenario... can you show a minimal reproduction?

[devonpmack]

In our code we use useInfiniteQuery for pagination. And we are rendering the last page that is loaded in react-query (i.e. pages[pages.length-1]). So whenever fetchNextPage is called it automatically goes to the next page. But the problem occurs when the component is unmounted and remounted it preserves the list of pages so it thinks that the user is still on the last page. Maybe the solution would be to store the page outside of react query.

[devonpmack]

Solved it by keeping a page number in state and using that to index data.pages 💯 Thanks