How do you invalidate a single page of useInfiniteQuery() and make sure only that page gets refetched ?

[bikalpaduwadi]

I tried following approach with vue-query V5. But when I invalidate a specific page it refetches all pages that are visited.

 useInfiniteQuery({
      queryKey: ['data'],
      queryFn: dataFetcher,
      ...
   }
   
 Invalidation of 5th page:
 
 await queryClient.invalidateQueries({
      queryKey: ['data', 5],
      exact: true,
   });

Here, I just want to invalidate and refetch data of 5th page. Is there any way to achieve this ?

[vossmalte]

There is a refetchPage param in queryClient.invalidateQueries. More in the documentation: https://tanstack.com/query/v4/docs/react/guides/infinite-queries#refetchpage

[bikalpaduwadi]

@vossmalte Thanks for the reply. But it seems the refetchPage option isn't available in V5.

[TkDodo]

Here, I just want to invalidate and refetch data of 5th page. Is there any way to achieve this ?

no, not possible anymore (we removed refetchPage) because it's not how infinite queries were intended to be used. They are one cache entry, chunked up into multiple fetches. That's why you can't pass something like queryKey: ['data', 5]. The key in the cache is just data.

If you only refetch one page of the 5, and that yields new data, you will have duplicate or missing entries. The pages are a linked list where each one builds on top of the next.

If you want separate cache entries for each page, you can do useQueries and create an array with the length that you want, then concatenate the pages in combine.

[ialwayswatching]

How it works from the side of the api, when I mutating some item, for example in the 3rd page, I know about optimistic update, the cache, but how I should invalidate this page?
For example, I've list of whatever, with main key ['data'], and item on the 3rd for this I called 'whatever', could be modified with mutation
with onSuccess mutation, I am invalidating the main key ['data'], does that mean, what I will be fetching 1by1, from first page to third?
Please explain to me how it works, I am reading the docs, blog, etc. and can't still got no solid answer

[TkDodo]

but how I should invalidate this page?

I already answered that you cannot do it. You can not invalidate only one page of an infinite query, it's not how it works.

if the mutation returns data for that page, you can put it into the cache with updates from mutation responses.

[wpp-roman-gryndii]

@TkDodo that's not good
Imagine I want to re-fetch the whole chat if a new message created
I don't want to re-fetch 2000 previously loaded pages, I want to reset the cache & refetch only first page

[TkDodo]

I want to reset the cache & refetch only first page

then do that?

• use setQueryData to delete everything except the first page
• use any refetching function to refetch

[wpp-roman-gryndii]

yep, that works but it would be nice to have such capabilities from the library itself
For example pass argument: refetchPagesType: 'all' | 'first'

[sedgwickz]

I encountered the same problem. It would be nice if the library itself support only fetch the first page.

[TkDodo]

1. we’re not just “fetching the first page”. We’re always fetching all pages. That is per design, and you can read about why in my talk on API design: https://tkdodo.eu/blog/react-query-api-design-lessons-learned

2. what you’re doing is not just “refetch the first page”, it’s: “delete everything except the first page, then refetch everything, which happens to be just the first page because that’s all that is left in the cache”. This can be done with setQueryData, is a couple lines of code, and is not something that is requested often, so it will not make it as a feature into the lib.