Nuxt apollo 智能查询被调用了两次。引擎盖下会发生什么？答案

【问题标题】：Nuxt apollo smart query is called twice. What happens under the hood?Nuxt apollo 智能查询被调用了两次。引擎盖下会发生什么？
【发布时间】：2020-01-07 21:04:31
【问题描述】：

我在 SSR 模式下使用 nuxt 和 nuxt-apollo。似乎智能查询在 SSR 中被调用了两次，在前面又被调用了一次。如果我这样做：

import Post from '~/apollo/queries/Post' // Post.gql file

export default {
apollo: {
    post: {
        query() {
           console.log('Post', Post)
           return Post
        }
    }
...

在终端和 devtools 控制台中，每个都显示两个日志（带有 nuxt:ssr 标签的 devtools），就像查询函数被调用两次一样。在 devtools 控制台中，还有一个没有 nuxt:ssr 标记的日志，就像前面再调用一次查询一样。我觉得这最后一次是正常的，但在SSR中没有理由两次...

我可以在 stackoverflow 代码 sn-p 中重现它，所以我创建了一个代码框here。

您看到这种行为了吗？你知道引擎盖下会发生什么吗？错误？？

【问题讨论】：

标签： vue.js nuxt.js apollo apollo-server vue-apollo

【解决方案1】：

缓存检索到其中一个结果
您可以通过禁用 Apollo 的 fetchPolicy 中的缓存来消除重复

new ApolloClient({
  cache,
  defaultOptions: {
    fetchPolicy: 'no-cache'
  }
})

这是Smart Query 的refetch 选项

this.$apollo.queries.users.setOptions({
  fetchPolicy: 'no-cache'
})

【讨论】：

没有。查询总是被调用两次。最糟糕的是，我到处都有[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.：/

【解决方案2】：

我也有同样的行为。到目前为止，我可以看到这个问题是由智能查询在服务器上预取时没有填充 apollo 客户端缓存引起的。

因此该查询在客户端上第二次执行。

我可以通过禁用预取并另外使用asyncData 挂钩来解决此问题。

import Post from '~/apollo/queries/Post'

export default {
    apollo: {
        post: {
            prefetch: false,
            query() {
                console.log('Post', Post)
                return Post
            }
        }
    },
    async asyncData(app) {
        const {data: {post}} = await app.apolloProvider.defaultClient.query({
            query: Post
        });

        return {post};
    }
}

请注意，目前存在修复另一个缓存相关错误的未解决问题：https://github.com/nuxt-community/apollo-module/pull/336

【讨论】：

【解决方案3】：

我遇到了同样的问题。就我而言，我不小心在 /layouts/default.vue 文件中放置了 <body>-tag 而不是 <div>-tag。

这个问题在浏览器的控制台中也有提示

[Vue 警告]：客户端渲染的虚拟 DOM 树不匹配服务器渲染的内容。

在您的情况下，可能是另一个 html 标记导致客户端和服务器端呈现不匹配。

【讨论】：