2

我在 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 代码片段中重现它，所以我在这里创建了一个代码框。

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

4

3 回答 3

1

我有同样的行为。到目前为止，我可以看到这个问题是由智能查询在服务器上预取时没有填充 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

于 2020-06-10T08:05:05.950 回答
1

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

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

这是智能查询refetch的 选项

this.$apollo.queries.users.setOptions({
  fetchPolicy: 'no-cache'
})
于 2019-09-05T01:40:53.560 回答
-1

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

这个问题也在浏览器的控制台中通过

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

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

于 2021-06-12T21:21:35.627 回答