Next js SSR Issue
The tech stack I am using in Next js,Tankstack query in client,
graphql-request to call graphql API in server actions
I'm fetching data from a GraphQL API using server actions. On the server, I prefetch the data with TanStack Query and pass it to the client through a hydration boundary. On the client, I use useSuspense to render the hydrated data.
I'm facing a hydration issue with TanStack Query. For example, I have a count field that starts at 65. When the user clicks a button, the count increases to 66, and everything works fine (including refetching data). However, when I refresh the page, the initial render briefly shows 65 before updating to 66.I don't have caching on the GraphQL side and have set revalidate to 0, but the issue persists. Any idea what I might be missing. I can't code as it violates code of conduct.
graphql-request to call graphql API in server actions
I'm fetching data from a GraphQL API using server actions. On the server, I prefetch the data with TanStack Query and pass it to the client through a hydration boundary. On the client, I use useSuspense to render the hydrated data.
I'm facing a hydration issue with TanStack Query. For example, I have a count field that starts at 65. When the user clicks a button, the count increases to 66, and everything works fine (including refetching data). However, when I refresh the page, the initial render briefly shows 65 before updating to 66.I don't have caching on the GraphQL side and have set revalidate to 0, but the issue persists. Any idea what I might be missing. I can't code as it violates code of conduct.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
