“默认 Apollo 查询”VS “AsyncData”（Nuxt.js）

Posted 2023-02-22

【中文标题】“默认 Apollo 查询”VS “AsyncData”（Nuxt.js）

【英文标题】："Default Apollo Queries" VS "AsyncData" (Nuxt.js)

【发布时间】：2019-09-17 00:20:27

【问题描述】：

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

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

【问题讨论】：

使用 asyncData 不会自动更新 Apollo 缓存，而智能查询会自动更新。

【参考方案1】：

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

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

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

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

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

更多关于智能查询here。

【讨论】：

所以智能查询不会阻塞？我担心我的 s-s-r 页面将不得不等待所有这些查询完成后才能向用户显示任何内容。

我的理解是查询的行为方式与 asyncData 相同，因为它是异步的，并且服务器在预渲染时将数据预取到专用数据存储中，并在以下情况下将其注入客户端完全的。我没有注意到任何阻塞行为，但只有几个项目使用它们。

Asyncdata 等待数据准备好，然后在客户端和服务器上渲染