How to display graphql value in component?

Question

Why I am getting Missing price attribute on result error?

I am following the official guide

Please help me to get price value into my vue component?

price.vue component

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

---

Console log

---

Actual data as seen on GraphQL client

Thanks in advance

Answer 1

It seems I was trying to reach to a value inside dish Object. I have just renamed price to dish.

I hope this will help someone.

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

Simplest working form of same code is...

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

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

Check out the solution clone from github sample app