Limit the amount of pages saved on InfiniteQuery cache in v4.

[jvitormelo]

I have an infinite list, but I don't want to apply virtualization, and if I allow the user to load all the cached pages at once can cause a bad experience because it can lag in the transition between lists with 500+items.

For now, what I did was create another page state to limit the array size, it worked but I don't know if is the best, and the code is kinda ugly

[TkDodo]

v5 supports this with the maxPages option: https://tanstack.com/query/v5/docs/react/guides/infinite-queries#what-if-i-want-to-limit-the-number-of-pages

[omarnemer]

Hi, I have the same issue I think with infiniteQuery. In our app right now, when a user has loaded let's say 500 new messages with loadmore (each loadmore will fetch 10 messages), if he quits the page and returns, all the 500 previous messages will be refetched from the server at once. We just want to refetch the first page of 10 messages not all the pages. I'm searching a solution for the last few days and found nothing.

[TkDodo]

all the 500 previous messages will be refetched from the server at once.

They won't be refetched at once, they will be refetched in succession, one after the other.

We just want to refetch the first page of 10 messages not all the pages

There's a difference between "refetching just the first page" and "only rendering the first page". The first (refetching just page 1) is quite bad because it can easily lead to inconsistencies when changes actually happened. Like, if one entry is deleted on page 1, you will see the last entry of page 2 on page 1. If you then don't refetch page 2 as well, you will see a duplicated entry. I've been saying this quite vocally now on multiple threads, and it's the reason why we don't offer this functionality. So, whatever you do, all pages that are in the cache will be refetched.

Now if rendering 500 elements is the actual problem (which I think it is), v5 has the maxPages option. In v4, the best you can do is somehow call queryClient.setQueryData when the user leaves the page (an effect with a cleanup function maybe?) and remove everything after the first page, so that, when they come back, only 1 page is in the cache, which means only one page will be rendered (fast) and also only one page will be refetched.

React.useEffect(() => {
  return () => {
    queryClient.setQueryData(key), (data) => ({
      pages: [data.pages[0]],
      pageParams: [data.pageParams[0]]
    })
  }
}, [queryClient])

[omarnemer]

Hi @TkDodo, thank you for your response. Sorry, it's in succession not at once you're right. My issue was more with the fact that we call the server multiple time in succession to refetch all previously fetched data. For the rendering, we use virtualization so we don't render all the messages at once. But if I'm understanding correctly, we can not do anything about the fact that we have to refetch all the pages from the server because of the issue of repetitive data that might come up. Thanks for your response again

[TkDodo]

But if I'm understanding correctly, we can not do anything about the fact that we have to refetch all the pages from the server because of the issue of repetitive data that might come up

yes, exactly. The only thing you can do is remove other pages

[jvitormelo]

@TkDodo Humm, I think your suggestion can solve my problem too, I just want to give the user instant content without loading and not causing any lag, so leaving only the first page in the cache can solve that.