I'm currently working on a project where I'm using nuxt, vue-apollo, and the nuxt apollo-module that wraps vue-apollo and integrates it into nuxt.
I have a fairly straightforward smart query defined in my page:
<template>
<div>
<ul>
<li v-for="itinerary in itineraries" :key="itinerary.id">
{{ itinerary.id }}
</li>
</ul>
</div>
</template>
<script>
import gql from 'graphql-tag';
export default {
name: 'HomePage',
apollo: {
itineraries: {
prefetch: true,
query: gql`
query {
itineraries {
id
}
}
`
}
},
data() {
return {
itineraries: []
};
}
};
</script>
From what I understand from the docs, prefetch should start the query on the server, but it's not blocking so the server-side render will continue before the data is returned. In order to avoid hydration errors, the nuxt apollo module should be using the apollo cache to store the results, as described here in the Vue SSR guide: https://ssr.vuejs.org/guide/data.html#data-store .
However, I am seeing hydration errors in my console when I load the page:
Mismatching childNodes vs. VNodes:
NodeList [ li ]Array [] vue.runtime.esm.js:6421 [Vue warn]: 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.
In addition, on my graphql server, I'm seeing the itineraries query being received twice. I assume once during SSR and then again on the client side.
None of this seems quite right to me, but I'm honestly not sure if there's a bug with the library or if I just don't understand how prefetch is supposed to work in an SSR scenario.
Can anyone explain how this is supposed to work?
