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

[TkDodo]

remove doesn't re-render the observers, so the screen will stay as-is until something else re-renders the component and thus triggers a refetch. I think reset would be better

[thanhlmm]

Thanks. I will try with reset. Iff it better, I think we can expose reset on useQuery hook. How do you think?

[TkDodo]

Iff it better, I think we can expose reset on useQuery hook.
I made a PR for it some time ago: #2637
but I think removing all other pages with setQueryData is the best move.

[FloareDor]

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

[TkDodo]

achieve what exactly?