22

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

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

4

1 回答 1

16

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

在组件中的 apollo 定义（即不以 $ 字符开头）中声明的每个查询都会导致创建智能查询对象。

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

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

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

更多关于智能查询的信息。

于 2019-04-28T02:54:34.673 回答