Question

我在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代码段中复制它，因此我在这里创建了一个codeandbox：https://codesandbox.io/s/nuxt-apollo-smart-query-bug-7p7ni

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

Answer 1

其中一个结果由缓存检索
您可以通过禁用Apollo的fetchPolicy中的缓存来摆脱重复操作

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

这是Smart Query的refetch选项

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

Answer 2

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

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

我可以通过禁用预取功能并另外使用SELECT DATE_FORMAT(date, "%Y-%m") month, SUM(profit) profit FROM table GROUP BY DATE_FORMAT(date, "%Y-%m") ORDER BY 2 DESC LIMIT 1钩子来解决此问题。

asyncData

请注意，当前存在一个尚待解决的问题，正在解决另一个与缓存相关的错误：https://github.com/nuxt-community/apollo-module/pull/336

Answer 3

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

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

<块引用>

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

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

Nuxt apollo智能查询被调用两次。幕后会发生什么？

3 个答案: