vue.js - vue-apollo 和 nuxt 中的预取智能查询应该如何工作？

Question

我目前正在做一个项目，我正在使用 nuxt、vue-apollo 以及包装 vue-apollo 并将其集成到 nuxt 中的 nuxt apollo-module。

我在我的页面中定义了一个相当简单的智能查询：

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

根据我从文档中了解到的情况，预取应该在服务器上启动查询，但它不是阻塞的，因此服务器端渲染将在返回数据之前继续。为了避免水合错误，nuxt apollo 模块应该使用 apollo 缓存来存储结果，如 Vue SSR 指南中所述：https ://ssr.vuejs.org/guide/data.html#data-store .

但是，当我加载页面时，我在控制台中看到了水合错误：

childNodes 与 VNodes 不匹配：
NodeList [ li ]

Array [] vue.runtime.esm.js:6421 [Vue 警告]：客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配。这可能是由不正确的 HTML 标记引起的，例如在 p 中嵌套块级元素或缺少 tbody。Bailing 水合作用并执行完整的客户端渲染。

此外，在我的 graphql 服务器上，我看到收到了两次行程查询。我假设在 SSR 期间一次，然后在客户端再次假设。

这对我来说似乎都不对，但老实说，我不确定库是否存在错误，或者我只是不明白预取在 SSR 场景中应该如何工作。

谁能解释这应该如何工作？

标签： vue.jsnuxt.jsapollovue-apollo