How does useInfiniteQuery really works?

[michtnt]

Just to clarify, I don't have any issue with useInfiniteQuery, it works really well for me 💯 I'm asking more on the logic behind it, how does the function know how to refetch the active pages with the proper parameters?

Say, I have a records that have 3 pages with a limit of 3 records/page:
First page: A, B, C
Second Page: D, E, F
Third Page: G, H, I

let's say the user load the first page (by default), then scroll down and load the second page. So you would have all 6 records and it would have fetched these 2 requests:

• /records (for first page, limit to 3 records)
• /records?lastId=C (for second page, limit to 3 records)

Say, the user deleted C record. I invalidated the records key, this would trigger the refetch to only 2 of the pages (since it is the only active ones). So the expected records would be:
First page: A, B, D
Second Page: E, F, G
Third Page: H, I

I was worried it would perform same requests which is /records?lastId=C and this would not be accurate since C is deleted, but apparently useInfiniteQuery is smart enough to realise C is deleted, and it would call these instead:

• /records (for first page, limit to 3 records)
• /records?lastId=D (for second page, limit to 3 records)

Am I right from my understanding, that useInfiniteQuery is refetching and rebuilding all active pages by the number of active pages instead of refetching same requests?

Thank you in advance, I just don't want to "code guessing" and want to actually understand it is how it is intended to work.

[TkDodo]

when refetching, useInfiniteQuery always calls getNextPageParam for every fetch that isn't the first page. So in your scenario, when a refetch happens, we first fetch page1 with the stored pageParam, which is probably the initialPageParam, which seems to be empty string or null in your case, leading to a fetch for /records. That will return A,B,D.

Then, for the second page, we don't use the stored param C, but we call getNextPageParam for that page. In there, your logic will probably return D, because that's the current value of the first page. That's how we can make the second fetch with lastId=D. We'll continue this for all pages, or until undefined is returned from getNextPageParam.

[michtnt]

@TkDodo Thanks that clarifies it! The better part is it also seems to only fetch active pages; Just want to say that using React Query has been amazing and the docs are very easy to follow kudos to you and your team 🙏🏼