Question

我目前正在使用nuxt，vue-apollo和包裹vue-apollo并将其集成到nuxt中的nuxt apollo模块的项目中工作。

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

<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阿波罗模块应使用阿波罗缓存来存储结果，如Vue SSR指南https://ssr.vuejs.org/guide/data.html#data-store中所述。

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

childNode与VNode不匹配：
  NodeList [li]

数组[]   vue.runtime.esm.js：6421   [警告]：客户端渲染的虚拟DOM树与服务器渲染的内容不匹配。这可能是由于错误的HTML标记（例如，在p内嵌套块级元素或缺少tbody）引起的。保水合并执行完整的客户端渲染。

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

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

任何人都可以解释这是如何工作的吗？

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

0 个答案: