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•2y 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 perezOP•2y 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•2y 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 perezOP•2y ago

I already do this, but if the user scrolls to fast I would want to have it prefetched

Hussam•2y ago

then keep calling fetchNextPage on the onSuccess handler until there are no results