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 .

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

子节点与 VNode 不匹配：
NodeList [ li ]

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

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

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

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