Как отобразить значение graphql в компоненте?

Question

Почему я получаю Missing price attribute on result ошибку?

Я следую официальному руководству

Пожалуйста, помогите мне получить значение цена в Мой vue компонент?

цена. vue компонент

<template>
  <div>
    <h1>{{ price }}</h1>
  </div>
</template>

<script>
import gql from "graphql-tag";
export default {
  data() {
    return {
      price: ""
    }
  },
  apollo: {
    price: gql`
      query price {
        dish(id: 1) {
          price
        }
      }
    `
  }
};
</script>

---

Консольный журнал

---

Фактические данные, как видно на клиенте GraphQL

Заранее спасибо

Answer 1

Кажется, я пытался достичь значения внутри di sh Object. Я только что переименовал цена в ди sh.

Надеюсь, это кому-нибудь поможет.

<template>
  <div>
    <h1>{{ dish.price }}</h1>
  </div>
</template>

<script>
import gql from "graphql-tag";

export default {
  data() {
    return {
      dish: ""
    }
  },
  apollo: {
    dish: gql`
      query dish {
        # dish is returned data
        dish(id: 1) {
          price
        }
      }
    `
  }
};
</script>

Самая простая рабочая форма того же код ...

<template>
  <div>
    {{ dish.price }}
  </div>
</template>

<script>
import gql from "graphql-tag";
export default {
  apollo: {
    dish: gql`
      {
        dish(id: 1) {
          price
        }
      }
    `
  }
};
</script>

Проверьте клон решения из github пример приложения