useInfiniteQuery refetching all pages on single record mutation

[Janak-Nirmal]

I am using useInfiniteQuery with FlatList in React Native. In one of item in the list there is toggle functionality. I have successfully used useMutation and it works great.

When user scrolls and reach to end I fetch another page. Let's say I have loaded 5 pages i.e. 5 requests on the server. Now I go to the top on the first page and toggle first record using mutation. I used

onSettled: () => queryClient.invalidateQueries(key)

I observed that this causes all pages fetch in background i.e. again 5 requests on the server to fetch all pages which are already there and only for just one record.

so my question is that is it possible to refetch only the page which was changed or the record belong in the page.

[TkDodo]

Since they are all part of the same key, it is the expected behaviour that all of them refetch.

[Janak-Nirmal]

So to avoid this we can rely onSuccess callback and make changes only in onSuccess right ? We don't need to invalidateQueries than ?

[tedtalksbits]

I am using useInfiniteQuery with FlatList in React Native. In one of item in the list there is toggle functionality. I have successfully used useMutation and it works great.

When user scrolls and reach to end I fetch another page. Let's say I have loaded 5 pages i.e. 5 requests on the server. Now I go to the top on the first page and toggle first record using mutation. I used

onSettled: () => queryClient.invalidateQueries(key)

I observed that this causes all pages fetch in background i.e. again 5 requests on the server to fetch all pages which are already there and only for just one record.

so my question is that is it possible to refetch only the page which was changed or the record belong in the page.

Did you find a solution to this? In my case I only want to fetch the first page after a delete mutation of all the cached data.