useInfiniteQuery only fetches last page when the cache is invalidated.

[KamaniBhavin]

I am using useInfiniteQuery to implement a paginated infinite scroll, fetching pages based on the scroll direction. The functionality works flawlessly except for one issue: caching. When the query is invalidated, it only fetches the last page instead of all the pages. Additionally, the last page has no elements, making the app appear broken. When I perform a hard refresh (cmd + shift + R), the component remounts and makes an API call from the start, working correctly until it becomes invalidated again.

I need help to ensure that all pages are refetched correctly upon invalidation and to prevent the app from appearing broken due to the empty last page. Any guidance or examples on how to manage this with useInfiniteQuery would be greatly appreciated.

[KamaniBhavin]

Update: The issue appears to be that when the data becomes stale, the system attempts to refetch all pages starting from the first page. The first page does not have page parameters, while only subsequent pages do. Consequently, the getPreviousPageParams and getNextPageParams functions fail, leading to no data being fetched except for the last page, which is empty. By the way, the API I am using is OpenAI's Messages API. The initial API call is made without any query parameters, and the subsequent calls return a cursor for the previous and next pages.

[KamaniBhavin]

Okay, the issue doesn't seem to be this as I don't see API call for the first n-1 pages I only see API calls for the nth page. It must be a bug.

[KamaniBhavin]

Alright, after digging deeper, I discovered the problem. The issue lies with the state of pageParams when using useInfiniteScroll in reverse mode, i.e., getPreviousPage instead of getNextPage. In this scenario, the page parameters are stored in the wrong order, causing the issue. Ideally, with reverse pagination, Tanstack Query should intelligently store the page parameters in reverse order to maintain the pagination flow.

Nevertheless, for future reference, there are two solutions you can choose from:

1. Rely solely on getNextPageParam and avoid using getPreviousPageParam (this is the solution I chose), which should work fine.
2. Utilize the select callback under the query option for useInfiniteQuery to reverse the pageParams.

Happy coding!