如何修复“结果中缺少产品属性”

Question

我正在尝试使用导入的组件映射 graphql 查询。数据已正确连接，但未通过。我收到错误Missing product attribute on result

我缩小了问题在于数据传递的范围。

这是我所拥有的：

<template>
  <div class="CoffeeSection">
    <h2>Coffees</h2>
    <div class="Cards">
      <CoffeeCard
        v-for="product of products"
        :key="product.id"
        :title="product.title"
        :slug="product.slug"
        :image="product.image.handle"
      ></CoffeeCard>
    </div>
  </div>
</template>

我是否在此处适当地映射查询？

<script>
import CoffeeCard from "./CoffeeCard";

import gql from "graphql-tag";

const products = gql`
  query {
    products {
      title
      image {
        url
        handle
      }
      description
      price
      slug
      category {
        name
        description
        products {
          title
          image {
            url
            handle
          }
        }
      }
    }
  }
`;

export default {
  name: "Coffees",
  data: () => ({
    loading: 0,
    products: []
  }),
  apollo: {
    $loadingKey: "loading",
    product: {
      query: products
    }
  },
  components: {
    CoffeeCard
  }
};
</script>

我收到错误 Missing product attribute on result。

Answer 1

通过在apollo 下添加名称不以$ 开头的属性来添加vue-apollo 中的智能查询。此属性的名称应与您在data 中初始化以存储结果的值以及您正在查询的根字段的名称（即products）匹配。但是，看起来您将智能查询命名为 product 而不是 products，这会导致您看到的错误。

您可以查看docs 了解更多详细信息和示例。