Skip to content

Hydration mismatch error because initial CSR render differs from SSR render #1432

Closed
@fabis94

Description

@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.

image

(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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions