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

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

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

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

1 个答案: