Prefetch Infinite Query + Unexpected Next.js Page Refresh

Hi everyone,

I'm currently building a live chat app using Next.js 15 App Router + React Query 5.60.2.

I'm encountering a problem when fetching older messages in the chat.

Basically I use a prefetchInfiniteQuery in the server component of my ChatPage, and inside it there is a ChatMessages Client Component which contain useInfiniteQuery hook.

When fetchNextPage runs in the client component, the page refreshes and the server component runs the prefetch on the page 1 of the messages, replacing the cache (which now contains 2 pages) with those data.

Same problem written here https://github.com/TanStack/query/discussions/4746 and here https://x.com/TkDodo/status/1558752788393476096

Do you know how can I solve? Thanks!
GitHub
Hey folks, Quick question -- is there an idiomatic approach to addressing unwanted rehydration issues with prefetchQuery and prefetchInfiniteQuery during Next.js route transitions? Take the example...
Prefetch Infinite Query + Next.js Page Navigation · TanStack query ...
I can't believe there is no real solution in @nextjs for this: https://t.co/1RltC0OR9O
Consider:
- You prefetch page 1 of an infiniteQuery on the server
- You load more pages on the client
- navigate away and back
- gSSP will run again, fetch page 1 and overwrite the client cache

Twitter

8/14/22, 9:49 AM

Was this page helpful?