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

我目前正在进行一个项目，使用nuxt、vue apollo和nuxt apollo模块包装vue apollo并将其集成到nuxt中

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

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

{{itineray.id}


从“graphql标签”导入gql；
导出默认值{
名称：'主页'，
阿波罗：{
行程：{
预回迁：对，
查询：gql`
质疑{
行程{
身份证件
}
}
`
}
},
数据（）{
返回{
行程：[]
};
}
};

据我从文档中了解，预回迁应该在服务器上启动查询，但它没有阻塞，因此服务器端渲染将在返回数据之前继续。为了避免水合错误，nuxt阿波罗模块应使用阿波罗缓存存储结果，如Vue SSR指南中所述：

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

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

数组[] vue.runtime.esm.js:6421 [Vue warn]：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由于不正确的HTML标记造成的，例如在p中嵌套块级元素，或者缺少tbody。打捞水化并执行完整的客户端渲染

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

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

有人能解释一下这是怎么回事吗