delete some page in useInfiniteQuery

[thanhlmm]

Hi I have a case like this:

1. An infinity list
2. A refresh button
3. When a refresh button is pressed, the expected behavior is the list scroll up and only query for the first page, remove all others page. The UI should keep the old state until the first pages are fetched successfully

I can delete pages 2, 3, 4 by using setQueryData but I think I open for other solutions
Maybe we can set page 1 at placeholder then delete call remove?

[TkDodo]

Maybe we can set page 1 at placeholder then delete call remove?

that would work, but what I would do is more along the lines of:

• call refetch or invalidateQueries with the refetchPage option and only refetch the first page
• remove all pages but the first one after that with queryClient.setQueryData

[FloareDor]

now that refetchPage doesn't exist in V5, is there an easy way to achieve this?

[TkDodo]

achieve what exactly?

[FloareDor]

• When a refresh button is pressed, the expected behavior is the list scroll up and only query for the first page, remove all others page. The UI should keep the old state until the first pages are fetched successfully

Achieve the same thing as @thanhlmm to be clear.

I've read the documentation and suggestions on Github issues and tried this:

queryClient.setQueryData(['projects'], (data) => ({
  pages: data.pages.slice(0, 1),
  pageParams: data.pageParams.slice(0, 1),
}))

This works perfectly if I stay on the same screen.
However, the data I can access using setQueryData in the above snippet becomes undefined if I go to another screen and return to this screen for some reason even though all the other fetch queries work and the data is visible.

Unfortunately, I've been unable to fix this.

Thank you for building and maintaining this.

[TkDodo]

However, the data I can access using setQueryData in the above snippet becomes undefined if I go to another screen

seems totally unrelated, potentially due to an unstable query client: https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable

impossible to say more without a minimal reproduction

[FloareDor]

Hey @TkDodo ,

thank you so much for maintaining this package.

I solved the problem by removing the QueryClient function from inside AppLayout to outside in _layout..tsx in a regular expo react native starter project.