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

Posted 2023-03-08

【中文标题】如何修复“结果中缺少产品属性”

【英文标题】：How to fix "Missing product attribute on result"

【发布时间】：2020-02-12 11:55:59

【问题描述】：

我正在尝试使用导入的组件映射 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。

【参考方案1】：

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

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

【讨论】：

嘿丹尼尔！感谢您的回复。我之前尝试过，但在子组件内部遇到了另一个错误。现在有了你的答案，相信这是正确的方法并发现了错误。谢谢！