How can I retrieve only the first page of data after the cache has expired?

[zmm2tysu]

When I'm using the useInfiniteQuery method, I've set the staleTime to 1 minute. I requested data for 5 pages and cached it. However, when the cache becomes stale, all 5 pages of data are refreshed simultaneously. How can I achieve refreshing only the first page of data and clearing the cache for other pages when the cache expires?

The actual use case is: chat history, where users might load multiple pages of chat records. However, when new chat records appear, I want to refresh only the first page of data.

[zmm2tysu]

anyone can help？best wishes

[TkDodo]

all 5 pages of data are refreshed simultaneously

technically not true, they are fetched one after the other. But yes, they are all fetched.

How can I achieve refreshing only the first page of data and clearing the cache for other pages when the cache expires

spawn a useEffect that listens to isStale returned by useQuery, and call setQueryData to delete everything after the first page.

What this will achieve however is that after 1 minute, you'll only see one page on your screen, even if you have seen 5 before that. But it seems like that's what you want?