在Nuxt中,我应该使用asyncData还是默认的Apollo查询?

问题描述 投票:2回答:1

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

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

async-await graphql nuxt.js vue-apollo
1个回答
2
投票

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

在组件中的apollo定义(即,不以$ char开头)中声明的每个查询都会导致创建智能查询对象。

使用@ nuxtjs / apollo模块的nuxt项目可以使用这些开箱即用的项目。智能查询的优点在于它附带的选项,其中之一是“预取”选项。听起来,它允许预取,默认情况下设置为true。它还可以接受变量对象或函数。你可以看到文档here

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

那么为什么选择其中一个呢?这可能取决于首选项,但智能查询允许您执行的所有选项可以执行更多操作,并且您可以包含asyncData中可能无法实现的订阅。

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

© www.soinside.com 2019 - 2024. All rights reserved.