[v5] useInfiniteQuery - how do I get feature parity with the new changes in v5 for my use case?

[rodrigofariow]

Hi @TkDodo !

This question is more directed at you since you've been the one handling all the breaking changes lately :D

First and foremost here is a quick explanation and a demo of what I'm currently doing with useInfiniteQuery v4:

• I have a table where I'm loading new events in "pages" of 15 rows
  • A new page is loaded every time once the user scrolls to the bottom of the table.

Since I want data to be up to date fairly frequently, I'm currently using boring standard polling, by hand, to refetch new rows every 20s.

Now, let's focus on the use case where data is sorted from oldest to most recent events and see how the table behaves:

Screen.Recording.2023-08-28.at.16.31.53.mov

Once the user is at the latest known page so far, I will keep polling for a new data starting from the previous cursor.
To do this I use refetchPage inside a useEffect that runs this code every 20s:

newCoachingEventsQueryRefetch<
          UseNewCoachingEventsReturnedData['pages'][number]
        >({
          refetchPage(lastPage, index, allPages) {
            return (
              index === allPages.length - 1 &&
              Re.isNil(lastPage.serverModelPageInfo.nextCursorRow)
            )
          },
        })

I only need to fetch the last page because the previous events are immutable. This way I can spare some API calls.

Here is the query itself:

  return useInfiniteQuery({
    queryKey: newVehicleCoachingEventsQueryKey(params),
    queryFn: (metaData) => {
      return fetchNewCoachingEvents({
        serverModel: ...,
      })
    },
    getNextPageParam: (lastPage): NewVehicleCoachingEventsQueryPageParam => {
      if (Re.isNil(lastPage.serverModelPageInfo.nextCursorRow)) {
        // Return undefined to tell react-query there is no next page available
        return undefined
      }
      const { nextCursorRow } = lastPage.serverModelPageInfo

      return {
        nextCursorRow,
        pageSize: params.serverModel.pageSize,
      }
    },
  })

What I can do with v5

Since I don't want to refetch every single page I've loaded so far, to my knowledge the best option would be to use maxPages.
https://tanstack.com/query/v5/docs/react/guides/infinite-queries#what-if-i-want-to-limit-the-number-of-pages

Now, I understand this can be very useful for mobile apps where you don't actually display a scrollbar of what has been loaded, like we do in desktop apps.

Let's say I use maxPages=3 in this table. Here are a few problems I see with it:

• The amount of rows fetched so far will never be correct starting from the 4th page, since I will only ever have a maximum of 3 pages in cache. Again this wouldn't be a problem in mobile generally but here it's important.
  • I would only see "Total Rows: 45 of x" here every time (15 rows * 3 max pages)
    
• The scrollbar will never become "bigger". The user will scroll and keep seeing the same size for the scrollbar, like it never loaded more events.

Bottom line

I don't see how I can keep the same user experience by using the new useInfiniteQuery.
It's easy for me to say that you should re-introduce refetchPage method, etc but I would first like to hear from you about an alternative to this solution.

Thank you for your time 🙏

[TkDodo]

Thanks for sharing your use-case. I think it's quite unique, and doing the same thing in v5 will require some changes on your end, but I think it's possible:

1. I'd use refetchInterval instead of manually calling refetch. If you only want it to be enabled on the last page, you can pass a function to it, like: refetchInterval: (data) => and then compute the interval. If you are not on the last known page, just return false or 0, and if you are on the last known page, return the number (in milliseconds) for your interval.

2. I'd just let react-query refetch all the pages, and implement an opt-out mechanism in the queryFn. This can look something like this (pseudo code):

const queryKey = newVehicleCoachingEventsQueryKey(params)
return useInfiniteQuery({
  queryKey:
  queryFn: (metaData) => {
    const existingData = queryClient.getQueryData(queryKey)?.pages[metaData.pageParam]
    if (existingData) {
      return Promise.resolve(existingData)
    }

    return fetchNewCoachingEvents({
      serverModel: ...,
    })
  },
})

of course, the check for existingData would need to exclude the last page, but I think you get the point: We'd just early return from the queryFn with the data that already exists in the cache for the page that wants to be fetched. I think conceptually, that fits the mental model of "the previous events are immutable": Every refetch to a page that already has immutable data will just instantly return that data again, without hitting the server.

Let me know if that makes sense and if that'll solve your situation.

[rodrigofariow]

First of all, thanks for such a quick response! 🦾 👍

I can see that working indeed! That's a very interesting approach and it's also one that I can use in both v4 and v5 it seems, so I can get my code ready before the actual migration!

I you let you know if I hit any blockers using this "restricted" API approach.

Cheers!

[TkDodo]

Indeed, you can try that approach in v4 to prepare for v5 👍

[rodrigofariow]

@TkDodo it worked well and I managed to keep every previous behavior!
Awesome stuff.

Thank you once again 👍