Apollo-module: Mismatching childNodes vs. VNodes

[mlsen]

Version

4.0.1-rc.3

Reproduction link

https://github.com/mlsen/nuxt-apollo-report

Steps to reproduce

1. yarn install
2. yarn dev
3. Visit the index page and have a look at the console

What is expected ?

No errors and data being loaded on the server (SSR)

What is actually happening?

It's giving me a warning

Mismatching childNodes vs. VNodes

and an error

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

The data is then fetched on the client again.

This only happens using the "apollo" object in my component, asyncData works fine.

_{This bug report is available on Nuxt community (#c333)}

[mlsen]

I did some testing with different versions and it seems to be a problem only in 4.0.1, 4.0.0 works fine.

[gismya]

I can confirm the problem. SSR does not work with smart queries in 4.0.1 :(

[kieusonlam]

Maybe related to this PR https://github.com/nuxt-community/apollo-module/pull/336

I'll check when I have time.

[mwidmann]

I am having the same issue. Downgrading to 4.0.0-rc.18 solves the issue for me.

4.0.1-rc.1 works as well

[saibbyweb]

Downgrading works! Seems like people were facing the exact same issue 2 years ago as well: #125

[yannisgu]

Proposal to fix this issue with explanation why it is happening: https://github.com/nuxt-community/apollo-module/pull/362

[tecnoloco]

I tried all versions mentioned above and all of them are still making a fetch a call on the server and on the client (with apollo object), causing this issue.
Tested versions:

• 4.0.0-rc18
• 4.0.1-rc.1
• 4.0.1-rc.3
• 4.0.1-rc.4

[daspete]

hi there... we had the same issue, but we had a custom "globalName" value in the nuxt config. After commenting out this key in the nuxt config, we haven't seen the hydration error again... even with the newest version of nuxt-apollo

[kukosek]

same issue here :/

[kukosek]

So downgrading to the version you mentioned wasn't the only thing i had to do. I also had disabled caching in my query. So when I disabled it, it works.

So now that I enabled cache I also have an issue that when I change the query parameters, and then I change back to the previous parameters, it tries to load from the cache, but the v-for I use isn't really updated or something. Idk if the caching even works? But that is for another issue i think.
EDIT: nevermind, i solved it by calling this.$apollo.queries.myQuery.refresh() after updating the variables

[dargmuesli]

Has "more work in this repo" been done already or was this closed by mistake? @pi0