No way to configure useInfiniteQuery to concatenate pages in correct order when refetching stale query

Describe the bug When using fetchMore(..., { previous: true }) to load a previous page and prepend it, if you then perform an action that causes ReactQuery to refetch, the requests are performed in the correct order but are appended instead of prepended. Currently there doesn’t seem to be a way to let ReactQuery know how it should reconstruct the refetched data.

To Reproduce Steps to reproduce the behavior:

1. Go to this CodeSandbox which is a modified fork from the Infinite Loading example from the docs.
2. Click on “Load more” a few times until no more messages can be loaded.
3. Scroll down and click on “Go to another page”.
4. Click on “Back” to return to messages.
5. See that the query is refetched, but now the messages are displayed in an incorrect order.

Expected behavior If fetchMore(..., { previous: true }) is meant for infinite queries with a reversed direction, then useInfiniteQuery should accept some kind of option to indicate how background refetches should be handled.

Additional context I may be misunderstanding the purpose of the previous feature. If that’s the case then maybe additional details could be added to the docs to make it’s purpose clearer. Nonetheless, I would definitely recommend adding an appendMode option where the direction of the list can be configured. This will allow ReactQuery’s useInfiniteQuery to be used for reversed lists (such as chat messages, activity feeds, and the like).

PS: Issue #434 is related, and a possible solution seems to have been in development at some point, but I’m not sure if it ever got implemented or merged and the issue is now closed.

Thank you so much for the wonderful library! 🙂

[tannerlinsley]

This is an interesting issue for sure. Totally makes sense. We’ll see what we can do about it!

[boschni]

Bi-directional navigation and reversed lists are now supported in v3! https://react-query-beta.tanstack.com/guides/infinite-queries