如何在graphql的内联片段中获取数据？

问题描述

我有一个带有内联片段的查询，如下所示：

const GET_PRODUCTS = gql`
    query MyQuery {
        products(where: {featured: false}) {
            edges {
            node {
                //.. other field that not related 
                productId
                name
                onSale
                ... on VariableProduct {
                    id
                    name
                    price
                    regularPrice(format: FORMATTED)
                    salePrice(format: FORMATTED)
                    variations {
                        nodes {
                        id
                        name
                        variationId
                        price(format: FORMATTED)
                        }
                    }
                }
            }
            }
        }
    }`
}

然后在GraphiQL中将其乘积结果如下：

{
    "data": {
      "products": {
        "edges": [
          {
            "node": {
              // .. all other field that not related
              "productId": 26,"name": "","onSale": true,"variations": {
                "nodes": [
                  {
                    "id": "1","name": "DEF example","variationId": 31,"price": "$0.00"
                  },{
                    "id": 2"",]
              }
            }
          },{
            "node": {
              .... another same node
            }
          },{
            "node": {
              .. another node
            }
          }
        ]
      }
    }
  }

使用Apollo Client调用查询：

import GET_PRODUCTS from '../queries/get-product'

const { loading,error,data } = useQuery(GET_PRODUCTS);

然后我想获取id的{​​{1}}数组中的字段name，variationId，price和variations的值。

因此，我在React中喜欢这样：

node

使用上面的代码，我可以通过执行以下操作来获取{data && data.products.edges.map(({ node }) => ( <ProductCell product={node} /> ))} 组件中productId，name，onSale字段的值：

ProductCell

现在的问题是我想在const ProductCell = (props) => { return( <div> <p>{props.product.productId}</p> <p>{props.product.name}</p> <p>{props.product.onSale}</p> </div> ) } 的{​​{1}} ProductCell`中获取值，我希望它可以使我两次“ DEF示例”：

variation

但是最后，我得到了这个错误：

TypeError：无法读取未定义的属性“节点”

因此，这基本上意味着无法在node array,I doing like this in 对象的{props.product.variations.nodes.map(({ node }) => ( <p>node.name<p> ))} 内部获得nodes。好的，我明白了，因此我在浏览器中检查了控制台日志，我得到了：

variations

product，product: onSale: true productId: 10 name: abc __typename: "VariableProduct" __proto__: constructor: ƒ Object() hasOwnProperty: ƒ hasOwnProperty() isPrototypeOf: ƒ isPrototypeOf() propertyIsEnumerable: ƒ propertyIsEnumerable() toLocaleString: ƒ toLocaleString() toString: ƒ toString() valueOf: ƒ valueOf() __defineGetter__: ƒ __defineGetter__() __defineSetter__: ƒ __defineSetter__() __lookupGetter__: ƒ __lookupGetter__() __lookupSetter__: ƒ __lookupSetter__() get __proto__: ƒ __proto__() set __proto__: ƒ __proto__() __proto__: Object 和name的字段已经存在，因此我可以在product中获取它，但是 查询的onSale部分下面的ProductCell字段不存在。

问题：

所以我的问题是

1. 如何获取variations ... on VariableProduct内的id，name，variationId字段的值？

2. 为什么浏览器无法像上面的GraphiQL一样得到json响应？而是返回查询中variation部分的Object？

编辑：

这是从浏览器中开发工具的“网络”标签中获得的：

如您所见，响应中没有node键，而是变成了... on VariableProduct，然后我无法再对其进行扩展

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）