我正在用Nuxt/Vue构建一个网站,它使用的是GraphQL后端API.我们使用Nuxt的阿波罗舱来访问它.

在页面组件中,您可以这样做(我认为这被称为智能查询,但我不确定):

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
        });
  }
}

我不确定这两种方法有什么区别,哪种更好.有人知道吗?我在任何地方的文件里都找不到解释.

推荐答案

问得好.您在顶部显示的代码实际上被称为智能查询.事实上

apollo定义中声明的每个查询(即

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

这意味着智能查询或异步数据查询的结果基本相同.应该在同一时间内解决这些问题.

那么,为什么要 Select 其中一个呢?这可能取决于首选项,但有了智能查询允许的所有选项,您可以做更多的事情,还可以包括在asyncData中可能无法实现的订阅.

更多关于智能查询here.

Vue.js相关问答推荐

Vuetify右侧并排switch

超出最大调用堆栈大小 - Vue路由

Vuejs - 更新数组中对象的数组

VueJS 插件的如何react式绑定?

有条件地在 Vue 中添加一个 CSS 类

如何将对象作为props传递并让组件更新子对象

Vue:需要禁用页面上的所有输入

错误:vue-loader 要求 @vue/compiler-sfc 存在于依赖树中

Laravel Blade 模板将数据传递给 Vue JS 组件

Vue更改宽度和内容

在 Vuejs 中计算 DOM 元素之间距离的最佳方法是什么?

vue 在 v-model 之后执行 @click

使用 vue-router 的默认子路由

如何在 Vuex 中获取 Vue 路由参数?

如何异步验证 Vuetify 文本字段?

Vuex 存储数据总是驻留在内存中?

try 通过 Vue.js 中的渲染传递props并观察它们

Vuetify 过渡:如何设置过渡速度

Vuejs 组件等待 facebook sdk 加载

v-bind:class 的 Vue.js 计算(computed)属性