New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Infinity Query Refetching Not Considering Original Fetch Direction Of First Page #7407
Comments
duplicate of #7203 I actually have a PR open for that but kinda forgot about it 🙈 |
actually, I'm not sure if I should merge the PR. Maybe the mistake was passing What I think should work is to do this yourself within the If If that works, I think marking here would be a working reproduction: https://stackblitz.com/edit/vitejs-vite-xmwghr?file=src%2FApp.tsx what do you think? |
@TkDodo I like the idea. With what you are suggesting, when refetching, would every page use the same direction as it was originally? If so, I think there is a problem with this. We should only use a direction of |
when refetching, only the first fetch will take the stored So yes, after a refetch, the first page has the original param and all others would have the one from |
@TkDodo in that case, I think what you purposed is definitely the better solution :) |
Describe the bug
The issue I am going to describe occurs when using
useInfiniteQuery
with bi-directional cursor pagination following the below logic.The server accepts a cursor and a direction (
'forward' | 'backward'
).If the direction is
forward
, the server returns items greater than or equal to the cursor.If the direction is
backward
, the server returns items smaller then or equal to the cursor.Each response contains:
The
initialPageParam
is0
, so the initial request data is{ cursor: 0, direction: 'forward' }
, and the response will be:Let's say we fetch the previous page, the request data is
{ cursor: -1, direction: 'backward' }
, and the response will be:So currently
pages
will contain:And
pageParams
will contain:[-1, 0]
. The firstpageParam
is-1
because we fetched the previous page with a cursor of-1
. And the second pageParam is0
because theinitialPageParam
was0
.Now, if React Query refetches the infinite query, each group will be fetched sequentially, starting from the first one. What will happen is that the first group will be fetched with a cursor of
-1
, however React Query will pass a direction offorward
, even though that group was fetched during backwards navigation.So after refetching,
pages
will contain the following which does not match the originalpages
before the refetching occured.Your minimal, reproducible example
https://stackblitz.com/edit/vitejs-vite-ri6fvw?file=src%2FApp.tsx
Steps to reproduce
Load Older
and wait for previous page to load.Unmount Component
button at the top of the screenMount Component
button at the top of the screenExpected behavior
During refetching, I would expect react query to pass the original direction of the first page that is being refetched.
How often does this bug happen?
Every time
Screenshots or Videos
Screen.Recording.2024-05-10.at.1.42.57.PM.mp4
Platform
Tanstack Query adapter
react-query
TanStack Query version
v5.35.1
TypeScript version
v5.2.2
Additional context
No response
The text was updated successfully, but these errors were encountered: