ygor perez
ygor perez14mo ago

How do I prefetch the nextPage of an infiniteQuery?

I have a custom infiniteQuery hook, and I want to prefetch the next page on success. My current implementation is this:
onSuccess(data) {
const cursor = data.pages.[data.pages ?.length - 1]?.nextCursor
console.log(cursor)
if (cursor?.albums || cursor?.tracks cursor?.artists) {
void utils.spotify.getSearch.p refetchInfinite {
searchTerm, limit, cursor: cursor})
}}
onSuccess(data) {
const cursor = data.pages.[data.pages ?.length - 1]?.nextCursor
console.log(cursor)
if (cursor?.albums || cursor?.tracks cursor?.artists) {
void utils.spotify.getSearch.p refetchInfinite {
searchTerm, limit, cursor: cursor})
}}
On the console I get this: the console.log with the cursor {albums: 10, tracks: 10, artists: 10}, the prefetch gets sent with the cursor undefined, but the fetch next page has the right cursor: {albums: 10, tracks: 10, artists: 10} how is this possible?
5 Replies
Nick
Nick14mo ago
This may be down to how you set up your infinite scrolling Typically you set a param for how many items from the bottom the next page will be loaded. So if you have a page size of 100 you might set it to 20 for instance. And for prefetching the next page eagerly you could set it to nearer 100 instead
ygor perez
ygor perez14mo ago
Sorry I didn't fully comprehend what you said, could you give me an example or try explaining it in another way please? Are you talking about a parameter for how many items to retrieve?
Hussam
Hussam14mo ago
why don't you call query.fetchNextPage based on the scrollbar position, if you want to prefetch it, make it in such a way that next page is fetched well before the user reaches the bottom of the page. you have to figure out when you want to prefetch, I don't think you would want to call it repeatedly until there are no results left.
ygor perez
ygor perez14mo ago
I already do this, but if the user scrolls to fast I would want to have it prefetched
Hussam
Hussam14mo ago
then keep calling fetchNextPage on the onSuccess handler until there are no results