Nuxt Mismatching childnodes vs vnodes

Hi

I’m using Nuxt with Apollo in my SSG app and I’m being plagued with the
‘Mismatching childnodes vs vnodes’ console error in my pages. The pages runs fine for the most part, its just a console error and it goes away in live.

This error only occurs when I use v-if to check is content exists, like v-if="property && property.value".

I suspect this is because the DOM doesn’t match the DOM at pageload before Apollo has resolved rather than a bad formed html issue like nested P tags, but not sure.

If that’s the case is there a best way to check for existence that doesn’t throw these errors?
As you can see i have to be very ‘belt n braces’ to avoid errors when checking existence of nested values like below. Is there a better way to do this this avoids the mismatch (and is shorter)?

<template>
    <div>
        <template v-if="!$apollo.queries.property.loading && property">
            {{(property.franchise && property.franchise.address ? property.franchise.address : null)}}
        </template>
    </div>
</template>

<script>
import fetchPage from "~/apollo/queries/fetchProperty.gql";

export default {
    apollo: {
        page: {
            prefetch: true,
            query: fetchProperty,
            variables() {
                return { filter: { url: { eq: this.$route.params.property } } };
            },
            update(data) {
                return data.property;
            }
        }
    }
}
</script>

My query for this example would look like this

query property($filter: PropertyModelFilter) {
    property(filter: $filter) {
        id
        franchise {
            address
        }
    }
}

Hello @jacktcunningham_publisher

I know this is a silly solution, but it’s always good to try and get those out of the way first, but can you try and refactor your v-if usages into v-show and see if the problem persists?

Also, if that doesn’t work, this seems to be related to your problem: Mismatching childNodes vs. VNodes - Nuxt-Community/Apollo-Module

Thank you!

Hi @m.finamor
v-show causes the page to error with Cannot read properties of undefined (reading 'property')
The reason for using v-if is it avoids running the code entirely rather than v-show which just display nones it with CSS. My guess is you get a split second when ‘property’ is not defined until apollo returns… but surely that’s the case for everyone using GraphQL like this so not sure what the go to approach should be.

Also re the above thread, I get the same issues if I downgrade to the specified version of Apollo “4.0.1-rc.1”

Further to this i get the same issue with a v-for. I have a standalone page here with no components and with a blank layout which throws the same mismatch bug locally

<template>
    <div>
        <h1>Consultants</h1>
        <div v-for="consultant in consultants">
            {{consultant.name}}, 
            {{consultant.avatar.responsiveImage.src}}<br/>
        </div>
    </div>
</template>

<script>
import fetchAllBios from "~/apollo/queries/fetchAllBios.gql";

export default {
    layout: 'blank',
    apollo: {
        consultants: {
            prefetch: true,
            query: fetchAllBios,
            update(data) {
                return data.allBios;
            }
        }
    }
}
</script>

Hello @jacktcunningham_publisher

Just checking in once again, but did you manage to solve this issue as well using the Nuxt Vuex Store you mentioned on the other thread?

Hi thanks for checking, no this still seems to be a problem, whether using v-if or v-for. I’ve set up a blank template without the header and footer to isolate the issue,
https://practical-shockley-347c4f.netlify.app/example/
i can only think it’s something to to with my graphql setup.
I’ve stopped using this check v-if="!$apollo.queries.property.loading as that seems to prevent SSG from working.

I also have the other issue that I’m not sure how best to solve

Hello @jacktcunningham_publisher

This is a problem exclusively with the NuxtJS configuration, not with Dato, so i’m going to go on a bit of a limb here, but one thing to note is:

Inside your templates and divs, you shouldn’t put content directly in there, without first wrapping them in spans or paragraphs: [Nuxt.js] Mismatching childNodes vs. VNodes

Let me know if it works!