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
Prefetch Infinite Query + Next.js Page Navigation · TanStack query ...
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...
Dominik 🔮 (@TkDodo) on X
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
0 Replies