Description
Describe the bug
When using useQuery
off @vue/apollo-composable
to load some data from an API in a SSR-supported app (e.g. Nuxt 3), Vue reports hydration mismatch errors during CSR even though SSR rendered the page correctly and after multiple passes CSR renders it correctly as well. The problem here is that this only happens after multiple render passes.
It seems that SSR renders everything correctly, and CSR also does, but only on 2nd render pass. On initial render, even tho the Apollo cache is filled, it returns undefined at first, which causes Vue to report that there's a hydration mismatch.
(the error message seems off as well, its actually the inverse: SSR returns the full string, while CSR returns 'undefined' on first render pass)
To Reproduce
Repo: https://github.com/fabis94/nuxt3-apollo-hydration-error
See instructions in readme
Expected behavior
During CSR useQuery
should return the already pre-cached data (from SSR) on first render, instead of returning undefined
at first and then only getting the data out from cache on 2nd render. This should make the Vue hydration errors disappear.
Versions
vue: 3.2.45
@vue/apollo-composable: 4.0.0-beta.1
@vue/apollo-ssr: 4.0.0-alpha.18
@apollo/client: 3.7.0
Additional context