Nuxt.js 中的 Apollo asyncData 返回错误答案

【问题标题】：Apollo asyncData in Nuxt.js returns errorNuxt.js 中的 Apollo asyncData 返回错误
【发布时间】：2020-10-30 08:27:08
【问题描述】：

Nuxt.js full static (2.13) 不支持 apollo 的智能查询，所以我打算改用 asyncData。

我有类似的东西：

import homeQuery from '~/apollo/queries/home'

export default {
  asyncData(context) {
    let client = context.app.apolloProvider.defaultClient;
    client
      .query({
        query: homeQuery
      })
      .then(({ data }) => {
        return { data }
      })
  }
}

我希望能够在我的模板中使用{{ data }}。但是，我收到以下错误：

ERROR [Vue 警告]：属性或方法“数据”未在实例，但在渲染期间引用。确保此属性是反应式，无论是在数据选项中，还是对于基于类的组件，通过初始化属性。看： https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我做错了什么？

【问题讨论】：

标签： nuxt.js apollo asyncdata

【解决方案1】：

让它工作改变它：

async asyncData({app}) {
  const homeresult = await app.apolloProvider.defaultClient.query({
    query: homeQuery
  })
  return { home: homeresult.data.home }
},
data () {
  return {
    home: {}
  }
}

然而，在使用nuxt serve 测试静态站点时，这似乎不适用于 default.vue 布局，而仅适用于页面。我发现它使用 fetch() 处理布局：

async fetch() {
  const homeresult = await this.$apolloProvider.defaultClient.query({
    query: homeQuery
  })
  this.home = homeresult.data.home
},
data () {
  return {
    home: {}
  }
}

【讨论】：