Apollo asyncData в Nuxt. js возвращает ошибку - PullRequest
Новая
       43

Apollo asyncData в Nuxt. js возвращает ошибку

0 голосов
/ 09 июля 2020

Nuxt. js full stati c (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]: свойство или метод «data» не определены в экземпляре, но на них ссылаются во время рендеринга. Убедитесь, что это свойство является реактивным либо в параметре данных, либо для компонентов на основе классов, инициализировав свойство. См .: https://vuejs.org/v2/guide/reactivity.html#Declaring -Reactive-Properties .

Что я делаю не так?

1 Ответ

0 голосов
/ 13 июля 2020

заставил его работать, изменив его как: 

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

, но, похоже, это не работает по умолчанию. vue макет при тестировании сайта stati c с nuxt serve, но только на страницах. Я обнаружил, что он работает над макетом с помощью fetch (): 

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