Infinite query refetch with pagination reset

[mk-nickyang]

Background

Hi there, we are using TQ for a React Native project. Let's say we have an infinite scroll list like a News Feed screen, and the infinite query pagination size is 10 (we tend to keep pagination size small for list performance reason).

1. User keeps scrolling to bottom and trigger fetchNextPage like 7 times, now 7 pages are loaded
2. User back to top, does the pull to refresh, trigger refetch
3. refetch will fetch each page sequentially, so there will be 7 network requests fired instantly

When the list size grows bigger, I don't think it's good that we have that many requests done to the app each time refetch happens (of course we can disable refetchOnWindowFocus and refetchOnConnect, but manual refetch is still a pain).

Secondly, for pull to refresh an infinite scroll list, I don't think we actually need to refetch all pages, it's perfectly fine that we only refetch the first page and remove the rest of pages from the cache, so the infinite scroll history will just be reset, which is a pretty common behaviour in mobile app.

There was a similar discussion on @TkDodo's Twitter early this year, see https://twitter.com/hirbod_dev/status/1624699469076787202

Workaround

Currently we have a utility function like

const resetInfiniteQueryPagination = (): void => {
  queryClient.setQueryData(queryKey, (oldData) => {
    if (!oldData) return undefined;

    return {
      ...oldData,
      pages: oldData.pages.slice(0, 1),
      pageParams: oldData.pageParams.slice(0, 1),
    };
  });
};

and we just call it before triggering the pull to refresh, like

const { refetch } = useQuery(...);

const onRefresh = () => {
  resetInfiniteQueryPagination();
  refetch();
}

return <RefreshControl onRefresh={onRefresh} />

It does work, but I'm just wondering if this is the best way to handle case like this?

Proposal

Maybe we can add another RefetchPageFilters option called resetPageOnRefetch?: boolean

• If set to true, only the subset pages defined in refetchPage will remain in query cache. The rest of pages and pageParams will be removed from query cache. Example:

// only refetch the first page and remove rest of pages from cache
refetch({
    refetchPage: (page, index) => index === 0,
    resetPageOnRefetch: true,
})

[charles4221]

Huge +1 for this, I feel it is a pretty big gap in core functionality for infinite queries if there's no simple out-of-the-box way to be able to say "on refresh, please kill all pages from the cache and give me a fresh new first page"

[TkDodo]

It does work, but I'm just wondering if this is the best way to handle case like this?

yes, this is the best way to handle the case.

Note that we have removed refetchPage in v5 in favor of the maxPages option. Your proposal has the same drawback as refetchPage has - it only works for programmatic invocations, but not automatic ones like refetchOnWindowFocus.

[mk-nickyang]

Appreciate for the reply @TkDodo 🙏

What about having a new query option for useInfiniteQuery called something like resetPagesOnRefetch?: boolean, which will work for manual refetch and automatic ones. If it's true, all pages from the query cache (except for the first page) will be removed before the refetch.

Or a more generic/flexible way may be like onBeforeRefetch or onPreRefetch

useInfiniteQuery({
  queryKey,
  queryFn: ({ pageParam }) => fetchPage(pageParam),
  onBeforeRefetch: resetInfiniteQueryPagination, // pass our own function before refetch
})

Keen to hear your thoughts

[TkDodo]

we can think about it, but that is such a tiny improvement by something that can be relatively easily accomplished in user-land that I'm having a hard time seeing it making it into the lib.

[mk-nickyang]

I guess for manual refetch, it's true, we can easily just call resetInfiniteQueryPagination(). But for auto ones like refetchOnWindowFocus, I don't think there is a workaround other than disable it?

[TkDodo]

Would it be a good ux if I'm on page 5, then switch tabs, come back and I only see page 1 because of a refetch on window focus? I highly doubt that ...

Anyways, I'd use the maxPages option from v5 to limit the number of pages in the cache.

[mk-nickyang]

Yeah fair enough, I agree this doesn't feel like a good UX.

Just to clarify we are using TQ for RN, and apps like FB, Instagram will auto reset feed when the app state changes to 'active' after a while, which is where I come from when I brought up refetchOnWindowFocus. But I do agree, not auto reset feed on app state changes does feel like a better UX (like Twitter for example).

Anyway, will resolve this discussion now, thanks again for all your help! @TkDodo

[Mu-jun]

@mk-nickyang Thanks to you I was able to solve the problem and this is how I solved it.

const resetInfiniteQueryPagination = (): void => {
  queryClient.setQueryData(queryKey, (oldData) => {
    if (!oldData) return undefined;

    return {
      pages: oldData.pages.slice(0, 1),
      pageParams: oldData.pageParams.slice(0, 1),
    };
  });
  await queryClient.invalidateQueries(queryKey)
};

I just need this method to solve it .