아폴로는 왜 첫 번째 요청으로 데이터를 얻을 수 없는가?

아폴로는 왜 첫 번째 요청으로 데이터를 얻을 수 없는가?

나는 새의 아이디를 얻기 위해 소품을 사용하고 있다.

앱을 처음 시작하고 두 번째 페이지를 클릭하여 입력하면 데이터가 로드되지 않는다.다음과 같은 오류를 발생시킨다.

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>

하지만 버튼을 두 번째로 클릭하면 제대로 로딩이 된다.

---

나는 그 문제를 보여주는 리포(repo)를 만들었다.여기에서 확인하십시오: github repo

작업 그래프ql 놀이터

<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 repo를 해결책으로 업데이트했다.

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

문제는 당신의 템플릿이

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

전시하려는 시도bird.name 질의가 완료되기 전에.

Vue Apolo 설명서는 초기 기본값을 정의함으로써 간단한 해결 방법을 보여준다.

vue 구성 요소의 데이터 후크에서 속성을 초기화할 수 있음

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

---

또는 Loading 상태 기능을 사용하여 구성 요소를 조건부로 렌더링하십시오.

<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>

참조URL: https://stackoverflow.com/questions/61230982/why-cant-apollo-get-data-in-first-request