我正在使用Nuxt / Vue构建站点,并且使用了GraphQL后端API。我们使用Nuxt的Apollo模块来访问它。
在页面组件中,您可以执行此操作(我认为这称为“智能查询”,但我不确定):
apollo: {
pages: {
query: pagesQuery,
update(data) {
return _get(data, "pageBy", {})
}
},
}
但是您也可以使用Nuxt asyncData挂钩执行类似的查询:
asyncData (context) {
let client = context.app.apolloProvider.defaultClient
client.query({query, variables})
.then(({ data }) => {
// do what you want with data
})
}
我不确定这两种方式之间有什么区别,哪个更好。有人知道吗?我在任何地方的文档中都找不到解释。
是的,很好的问题。您在顶部显示的代码确实称为智能查询。事实上
使用@ nuxtjs / apollo模块的nuxt项目可以直接使用它们。智能查询的妙处在于它附带的选项,其中之一就是“预取”选项。听起来,这允许预取,并且默认情况下设置为true。它还可以接受变量对象或函数。您可以在此处查看文档。
这意味着智能查询或asyncData查询的结果将基本相同。它们应在同一时间范围内解决。
那么为什么选择一个?这可能取决于首选项,但是有了智能查询允许的所有选项,您可以做更多的事情,并且可以包括asyncData中可能无法实现的订阅。
更多有关智能查询这里。