Vue.js Nuxt apollo智能查询被调用两次。引擎盖下发生了什么？

我在SSR模式下使用nuxt和nuxt阿波罗。看起来智能查询在SSR中调用了两次，在前面又调用了一次。如果我这样做：

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

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

在终端和devtools控制台中，每一个都显示两个日志（devtools带有

numxt:ssr

tag），就像查询函数被调用两次一样。在devtools控制台中，还有一个日志wihtout

numxt:ssr

标记，就像查询在前面被再次调用一样。我认为这最后一次是正常的，但没有理由在SSR中出现两次

我可以在stackoverflow代码片段中重现它，所以我创建了一个codesandbox

---

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

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

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

这是的

refetch

选项

---

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

因此，在客户机上第二次执行查询

我可以通过禁用预取并另外使用

asyncData

hook来解决这个问题

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

---

请注意，目前在修复另一个与缓存相关的错误时存在一个未解决的问题：

我也遇到了同样的问题。在我的例子中，我不小心在我的/layouts/default.vue文件中放置了一个

-标记而不是

-标记。

浏览器的控制台中也显示了此问题

[Vue warn]：客户端呈现的虚拟DOM树不匹配 服务器呈现的内容

---

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

否。查询总是调用两次。最糟糕的是，我得到了

[Vue warn]：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。

无处不在：/

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