prefetchQuery has old data on page refresh
Hi folks, I have a Next.js 14 application (app dir) where I am trying to utilize TanStack Query with prefetchQuery, HydrationBoundary and client-side query after that. The problem I am currently facing is:
1. I make a query to my backend (prefetch + useQuery)
2. I make a simple mutation which updates data and invalidates the original query
3. Query gets invalidated sucessfuly, refetches the data and everything is OK
4. I refresh the page and I have old data (they come from the prefetch for 100%, if I give staleTime 0 to the client query, correct data is fetched [but it flickers as I get old data from server component])
Is this expected behaviour? Is there an obvious fix for this? Happy to send code snippets if needed.
Cheers.
3 Replies
sensitive-blue•2y ago
Probably nextjs caching something
foreign-sapphireOP•2y ago
Cheers mate! Setting
cache: "no-cache" on fetch resolves the issue. I am not sure though if this is something someone would generally want. Will need to take a deeper look. But thank you very much!foreign-sapphireOP•2y ago
Relevant docs for this:
https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data
Data Fetching: Fetching, Caching, and Revalidating | Next.js
Learn how to fetch, cache, and revalidate data in your Next.js application.