"Default Apollo Queries" VS "AsyncData" (Nuxt.js)
"Default Apollo Queries" VS "AsyncData" (Nuxt.js)
我正在使用 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
});
}
}
我不确定这两种方式有什么区别,哪种更好。有人知道吗?我在文档中的任何地方都找不到解释。
是的,问得好。您在顶部显示的代码确实称为智能查询。事实上
Each query declared in the apollo definition (that is, which doesn't
start with a $ char) in a component results in the creation of a smart
query object.
使用@nuxtjs/apollo 模块的 nuxt 项目可以开箱即用。智能查询的美妙之处在于它附带的选项,其中之一是 'prefetch' 选项。这听起来允许预取,并且默认设置为 true。它还可以接受变量对象或函数。您可以查看文档 here.
这意味着智能查询或 asyncData 查询的结果本质上是相同的。它们应该在同一时间范围内解决。
那为什么要选择其中之一呢?这可能取决于偏好,但是有了智能查询允许的所有选项,您可以做更多的事情,并且您可以包括订阅,这在 asyncData 中可能是不可能的。
有关智能查询的更多信息here。
我正在使用 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
});
}
}
我不确定这两种方式有什么区别,哪种更好。有人知道吗?我在文档中的任何地方都找不到解释。
是的,问得好。您在顶部显示的代码确实称为智能查询。事实上
Each query declared in the apollo definition (that is, which doesn't start with a $ char) in a component results in the creation of a smart query object.
使用@nuxtjs/apollo 模块的 nuxt 项目可以开箱即用。智能查询的美妙之处在于它附带的选项,其中之一是 'prefetch' 选项。这听起来允许预取,并且默认设置为 true。它还可以接受变量对象或函数。您可以查看文档 here.
这意味着智能查询或 asyncData 查询的结果本质上是相同的。它们应该在同一时间范围内解决。
那为什么要选择其中之一呢?这可能取决于偏好,但是有了智能查询允许的所有选项,您可以做更多的事情,并且您可以包括订阅,这在 asyncData 中可能是不可能的。
有关智能查询的更多信息here。