Hydration mismatch error because initial CSR render differs from SSR render

[fabis94]

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

[fabis94]

Here's a PR with my fix: #1436

[productdevbook]

Great job, so how do we add header authorization here. In particular, a cookie that is http only.

[fabis94]

@productdevbook I'm confused, because these changes by definition only return what's already in the cache instead of triggering any requests or anything that would need headers or authentication cookies.

[99linesofcode]

Sooo, what is preventing this from getting merged?

[99linesofcode]

@Akryum thanks a lot for taking a stab at this so quickly! 🚀