Nuxt.js returns 错误中的 Apollo asyncData

Question

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 warn]: Property or method "data" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

我做错了什么？

Answer 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: {}
  }
}

Nuxt.js returns 错误中的 Apollo asyncData

Apollo asyncData in Nuxt.js returns error

nuxt.js

apollo

asyncdata