如何在组件中显示graphql值？

Question

为什么我收到 Missing price attribute on result 错误？

我关注the official guide

请帮我把 price 值输入到我的 vue 组件中？

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

我似乎在尝试获取 dish 对象中的一个值。我刚刚将 price 重命名为 dish.

我希望这会对某人有所帮助。

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

的解决方案克隆