Ошибка «The client-side... DOM tree is not matching server-rendered content.» при использовании v-if="!$apollo.loading". В чем возможная причина?

Question

[bormor]

При использовании модуля nuxt-apollo появляется ошибка

client.js:730 [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.

Локализуя ее обнаружил что появляется при использоании в v-if="!$apollo.loading"

В чем возможная причина? Как корректно рендерить TheHeader после загрузки данных через Apollo?

Упрощенный пример:

// dafault.vue
<template>
   <div>
      <!-- Если убрать v-if="!$apollo.loading" проблема пропадает -->
      <TheHeader v-if="!$apollo.loading" />
   </div>
</template>

<script>
import gql from 'graphql-tag';
import TheHeader from '~/components/TheHeader';

export default {
   components: {
      TheHeader,
   },

   apollo: {
      categories: {
         query: gql`
            query {
               categories {
                  id
                  label
                  url
               }
            }
         `,
         update: (data) => data.categories,
      },
   },
};
</script>

// TheHeader.vue
<template>
   <div>header</div>
</template>

Comments

[bormor]

Алексей Ярков , Алексей, вы случаем не сталкивались с такой проблемой?

[golentor]

Это простой вопрос.
Импорт
import TheHeader from '~/components/TheHeader';
components: {
TheHeader,
делается только на клиенте.
Он ругается что Аполлон работает только на серверном компоненте
Поэтому делаем так

<TheHeader v-if="!$apollo.loading" /> // вот так сразу внаглую пусть сам его ищет в /components

и всё работает)

[golentor]

golentor, и вообще для @nuxt-apollo if="!$apollo.loading - ноннсенс. Вы неуверены что загружен Аполлон?) А для чего Вы его подключаете в конфиге тогда перед рендером))
ыыыы!.. Вы сами же прописали в своём комменте

<!-- Если убрать v-if="!$apollo.loading" проблема пропадает --> Mega LOL

[bormor]

golentor, есть ли другой способ решить проблему?
> Как рендерить TheHeader только после загрузки данных через Apollo?
Если убрать v-if="!$apollo.loading" - будут ошибки

[golentor]

bormor, я заранее извиняюсь, приведу свой рабочий фрагмент кода с другим костылём, чистый Аполлон мне непокатил:

import User from '~/models/User'
import Profile from '~/models/Profile'
export default {
  data () {
    return {
      client: 0,
      loading: 0,
      endPoint: у Вас свой
},
  created() {
    this.clientInitialize()
    this.getProfiles()
  },
// тут происходит магия...)
  computed: {
    profiles () {
      return this.getProfiles()
    }
  }, 
  methods: {
    getProfiles () {
      const ITEMS_PAGE = 2
      const profiles = `
		query getData {
		  users(limit: 10, order_by: {id: asc}) {
			  ...userFields
		  }
		  profiles(limit: 10, order_by: {id: asc}) {
			  ...profileFields 
		  }  
		}
		fragment userFields on users {
...
}
`
      const query = profiles
      const variables = { }
      this.client.request(query, variables).then(data => {(

Прошу прощения за "много-буков") но мне так проще кодить

[bormor]

golentor, спасибо за ответ.