Почему Apollo не может получить данные в первом запросе? - PullRequest
Новая
       15

Почему Apollo не может получить данные в первом запросе?

1 голос
/ 15 апреля 2020

Я использую реквизиты, чтобы получить Id птиц.

Когда я впервые запускаю приложение и нажимаю, чтобы войти на вторую страницу, данные не загружаются. Это выдает следующую ошибку: 

JS: [Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"
JS:
JS: found in
JS:
JS: ---> <Detail> at components/Detail.vue
JS:        <Frame>
JS:          <Root>

Но после того, как я нажимаю на кнопку второй раз, она загружается правильно.

Я создал репозиторий, показывающий проблему. Пожалуйста, проверьте это здесь: github repo

Рабочая площадка Graphql 

<template>
  <Page>
    <StackLayout>
      <Label :text="bird.name" textWrap="true" />
      <Button text="get data" @tap="getData" />
    </StackLayout>
  </Page>
</template>

<script>
import { gql } from "apollo-boost";

export default {
  props: ["birdID"],

  apollo: {
    bird: {
      query: gql`
        query($id: ID!) {
          bird(id: $id) {
            id
            name
          }
        }
      `,
      variables() {
        return {
          id: this.birdID,
        };
      },
    },
  },
  methods: {
    getData() {
      console.log("bird data: ", this.bird);
    },
  },
  mounted() {},
};
</script>

<style></style>

Есть ли лучший способ получить данные?

Ответ был правильным

Я обновил github-репо с решением.

https://github.com/kaanguru/query-data-from-prop

1 Ответ

1 голос
/ 20 апреля 2020

Проблема в том, что ваш шаблон 

<Label :text="bird.name" textWrap="true" />

пытается отобразить bird.name до вашего запроса.

Vue Apollo документация показывает простой обходной путь, определяя некоторые начальные значения по умолчанию

Вы можете инициализировать свойство в хуке данных компонента vue 

data: () => ({
  bird: {
    name: null
  }
}),

Альтернативно, используйте функцию Состояние загрузки для условной визуализации ваших компонентов 

<Label v-if="$apollo.loading" text="loading" textWrap="true" />
<StackLayout v-else>
  <Label :text="bird.name" textWrap="true" />
  <Button text="get data" @tap="getData" />
</StackLayout>
...