Nuxt apollo 智能查询被调用了两次。引擎盖下会发生啥？
Posted
技术标签:
【中文标题】Nuxt apollo 智能查询被调用了两次。引擎盖下会发生啥？【英文标题】：Nuxt apollo smart query is called twice. What happens under the hood?Nuxt apollo 智能查询被调用了两次。引擎盖下会发生什么？ 【发布时间】：2020-01-07 21:04:31 【问题描述】：我在 s-s-r 模式下使用 nuxt 和 nuxt-apollo。似乎智能查询在 s-s-r 中被调用了两次，在前面又被调用了一次。如果我这样做：
import Post from '~/apollo/queries/Post' // Post.gql file
export default
apollo:
post:
query()
console.log('Post', Post)
return Post
...
在终端和 devtools 控制台中，每个都显示两个日志（带有 nuxt:s-s-r 标签的 devtools），就像查询函数被调用两次一样。在 devtools 控制台中，还有一个没有 nuxt:s-s-r 标记的日志，就像前面再调用一次查询一样。我觉得这最后一次是正常的，但在s-s-r中没有理由两次...
我可以在 *** 代码 sn-p 中重现它，所以我创建了一个代码框here。
您看到这种行为了吗？你知道引擎盖下会发生什么吗？错误？？
【问题讨论】：
【参考方案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 标记导致客户端和服务器端呈现不匹配。
【讨论】：
以上是关于Nuxt apollo 智能查询被调用了两次。引擎盖下会发生啥？的主要内容，如果未能解决你的问题，请参考以下文章
“默认 Apollo 查询”VS “AsyncData”（Nuxt.js）
Nuxt(Vue) 使用 $apollo.query 处理 Apollo 错误