lrobb
Hydration Mismatch Error on dev/demo envs, not locally
@kapa.ai and whomever else - I have a newer SSR Nuxt 3 app that uses Nuxt Apollo, and in particular I'm using
useAsyncQuery. When I go to a couple of my routes directly or reload those pages, I receive the following hydration mismatch error: Dr-3uGvq.js:14 Hydration completed but contains mismatches. That's the only error feedback I'm given. Some of my routes have very similar code but the error doesn't happen, while it does on a couple other routes.
NOTE: I'm not getting this error locally, only in my dev and demo environments (I haven't checked prod yet). Using Tailscale and GCP for hosting.
1. I am using new Date() in one of the components, but this error still occurs even when I remove that and hardcode the date.
2. When I comment out all of the HTML being used in the pages and related components, I still get the mismatch error.
3. When I move the actual query from the composable to the component, I still get the mismatch error.
4. When I put the actual query into an onMounted() in the component, the error goes away.
5. When I move actual query back to the composable and call the get from an onMounted() in the component, the error goes away but it wants me to use $fetch instead:
[nuxt] [useAsyncData] Component is already mounted, please use $fetch instead.
Any solutions I've found are becoming hacky, and I'm wondering if there is something else going on or if I really just need to do Item #4 above.
(I'll add my code in a separate comment)12 replies