constant-blue

how do I prefetch the next page?

I have a custom infiniteQuery hook, and I want to prefetch the next page on success. I'm using TRPC, but I think it's more appropriate to ask in here since it's more RQ related, 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?

7 Replies

conscious-sapphire•3y ago

Infinite queries only have one cache entry for all pages. Prefetching fetches a cache entry when it is not yet used. Conceptually, there is no prefetching of the next page in an infinite query- there is only fetchNextPage

constant-blueOP•3y ago

What's the most elegant solution then?

conscious-sapphire•3y ago

To do what exactly?

constant-blueOP•3y ago

to have a infinite scroll that the "next page" is cached before the user scrolling

conscious-sapphire•3y ago

Okay but again, that's not "prefetching", that's just fetching the next page. You can fetch the next page when the user scrolls to the bottom, or when they scroll "almost" to the bottom. Or you can fetch the next two pages...

constant-blueOP•3y ago

I already do the first one, but I would like to have no loading state. is the only way to do it fetch it and just show it when the user scrolls down?

conscious-sapphire•3y ago

You can fetch whenever you want, but you need a user indicator, no? Otherwise you just infinitely keep fetching more pages....

Gaming

Programming

how do I prefetch the next page?

Did you find this page helpful?