Question

我正在用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
        })
  }

我不确定这两种方式之间有什么区别，哪个更好。有人知道吗？我在任何地方的文档中都找不到解释。

Answer 1

是的，很好的问题。您在顶部显示的代码确实称为智能查询。实际上

在apollo定义中声明的每个查询（也就是说，不会在组件中以$ char开头）会导致创建智能查询对象。

使用@ nuxtjs / apollo模块的nuxt项目可以直接使用它们。智能查询的妙处在于它附带的选项，其中之一就是“预取”选项。听起来，这允许预取，并且默认情况下设置为true。它也可以接受变量对象或函数。您可以看到文档here。

这意味着智能查询或asyncData查询的结果将基本相同。它们应在同一时间范围内解决。

那为什么选择一个？这可能取决于偏好，但是有了智能查询允许的所有选项，您可以做更多的事情，并且可以包括asyncData中可能无法实现的订阅。

有关智能查询here的更多信息。

在Nuxt中，应该使用asyncData还是默认的Apollo查询？

1 个答案: