How do I prefetch the nextPage of an infiniteQuery?

Yygorperez

5/13/2023

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?

Nnlucas

5/13/2023

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

Yygorperez

5/16/2023

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?

HHussam

5/17/2023

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.

Yygorperez

5/23/2023

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

HHussam

5/23/2023

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