如何修复 "Missing product attribute on result"

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）相匹配。但是，看起来您将智能查询命名为 product 而不是 products，这导致了您看到的错误。

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

如何修复 "Missing product attribute on result"

How to fix "Missing product attribute on result"

apollo

vue.js

graphql