如何使用 gatsby 在 graphiQL 中根据 uid 查询一条记录/结果？答案

【问题标题】：How can I query one record / result based on uid in graphiQL with gatsby?如何使用 gatsby 在 graphiQL 中根据 uid 查询一条记录/结果？
【发布时间】：2019-10-04 09:24:27
【问题描述】：

我正在使用 GatsbyJS，其中包含 GraphQL。我对两者都很陌生。对于我的一生，我无法弄清楚如何通过 uid 值使用 graphql 查询单个记录。我有一个简单的 json 文件。在 GraphiQL 中，这个查询的输出......

query{
  allDataJson{
    edges {
      node {
        products{
          uid
          sku
          title 
          price
          image
        }
      }
    }
  }
}

给我所有的记录..

{
  "data": {
    "allDataJson": {
      "edges": [
        {
          "node": {
            "products": [
              {
                "uid": 0,
                "sku": "8509698P",
                "title": "Cindy Crawford Home Bellingham Slate Sofa",
                "price": 655,
                "image": "https://images.rtg-prod.com/cindy-crawford-home-bellingham-slate-sofa_8509698P_image.png?w=150"
              },
              {
                "uid": 1,
                "sku": "10132859",
                "title": "Sofia Vergara Pacific Palisades Navy Plush Sofa",
                "price": 799.99,
                "image": "https://images.rtg-prod.com/sofia-vergara-pacific-palisades-navy-sofa_10132859_image.png?w=150"
              },
              {
                "uid": 2,
                "sku": "15028930",
                "title": "Eric Church Highway To Home Headliner Brown Leather Dual Power Reclining Sofa",
                "price": 1599.99,
                "image": "https://images.rtg-prod.com/eric-church-highway-to-home-headliner-brown-leather-power-plus-reclining-sofa_15028930_image.png?w=150"
              },
              {
                "uid": 3,
                "sku": "10141620",
                "title": "Bonita Springs Gray Sofa",
                "price": 499.99,
                "image": "https://images.rtg-prod.com/bonita-springs-gray-sofa_10141620_image.png?w=150"
              },
              {
                "uid": 4,
                "sku": "14103941",
                "title": "Villa Capri Blue Leather Sofa",
                "price": 899.99,
                "image": "https://images.rtg-prod.com/villa-capri-blue-leather-sofa_14103941_image.png?w=150"
              },
              {
                "uid": 5,
                "sku": "8509697P",
                "title": "Cindy Crawford Home Bellingham Indigo Sofa",
                "price": 655,
                "image": "https://images.rtg-prod.com/cindy-crawford-home-bellingham-indigo-sofa_8509697P_image.png?w=150"
              },
              {
                "uid": 6,
                "sku": "8509695P",
                "title": "Cindy Crawford Home Bellingham Cardinal Microfiber Sofa",
                "price": 655,
                "image": "https://images.rtg-prod.com/cindy-crawford-home-bellingham-cardinal-sofa_8509695P_image.png?w=150"
              },
              {
                "uid": 7,
                "sku": "10132950",
                "title": "Cindy Crawford Home Chelsea Hills Gray Sofa",
                "price": 799.99,
                "image": "https://images.rtg-prod.com/cindy-crawford-home-chelsea-hills-gray-sofa_10132950_image.png?w=150"
              },
              {
                "uid": 8,
                "sku": "10197704",
                "title": "Ivyleigh Silver Sofa",
                "price": 599.99,
                "image": "https://images.rtg-prod.com/ivyleigh-silver-sofa_10197704_image.png?w=150"
              },
              {
                "uid": 9,
                "sku": "10131403",
                "title": "Court Street Beige Sofa",
                "price": 599.99,
                "image": "https://images.rtg-prod.com/court-street-beige-sofa_10131403_image.png?w=150"
              }
            ]
          }
        }
      ]
    }
  }
}

如何查询单个uid？？？

query{
  allDataJson(filter: ??? ){
    edges {
      node {
        products{
          uid
          sku
          title 
          price
          image
        }
      }
    }
  }
}

所以我的结果是这样的？？？

{
  "data": {
    "allDataJson": {
      "edges": [
        {
          "node": {
            "products": [
              {
                "uid": 0,
                "sku": "8509698P",
                "title": "Cindy Crawford Home Bellingham Slate Sofa",
                "price": 655,
                "image": "https://images.rtg-prod.com/cindy-crawford-home-bellingham-slate-sofa_8509698P_image.png?w=150"
              },
            ]
          }
        }
      ]
    }
  }
}

【问题讨论】：

过滤products products(uid: 0)之类的东西

标签： graphql gatsby

【解决方案1】：

您需要在查询参数中发送 id，BE 应该只返回基于 id 的单个记录。如下所示。

query{


allDataJson(id:1 ){
    edges {
      node {
        products{
          uid
          sku
          title 
          price
          image
        }
      }
    }
  }
}

【讨论】：

我想你的意思是 uid:1 是吗？无论哪种方式，我都尝试了 uid 和 id（只是为了好玩）....我收到此错误消息...“消息”：“未知参数 \”uid\”在字段 \“allDataJson\”类型 \“查询\"."....我不明白为什么。

【解决方案2】：

GraphiQL 还应该向您建议查询 dataJson。 allDataJson 给你一个连接（因此是数组），dataJson 只返回一个结果 - 通常与过滤器一起使用。

所以这样的事情应该可以工作（我自己无法在 GraphiQL 中尝试）：

query {
  dataJson(products: { uid: { eq: 2 } }) {
    products {
      uid
    }
  }
}

请自行尝试使用 GraphiQL 的自动完成功能。

【讨论】：

我收到此错误“消息”：“字段 \"uid\" 不是由 DataJsonProductsFilterListInput 类型定义的。”，.....我不知道为什么。

【解决方案3】：

其他答案已经指出了 Gatsby 中 graphql 的过滤功能，但你的情况有点不同：你的产品是一个数组。默认情况下，您无法过滤字段返回的数组——数组中的每个项目都必须是一个节点。

如果你能从这里转换你的数据结构会容易得多：

// data.json
{
  products: [{ "uid": 0 }, { "uid": 1 }]
}

...到这样的事情：

// data.json
[{ "uid": 0 }, { "uid": 1 }]

...并将您的元数据存储在其他地方。

这样，数组中的每一项都会变成一个节点，就可以按预期过滤了。

{
  allDataJson(filter: {
    uid: {eq: 1}
  }) {
    edges {
      node {
        id
      }
    }
  }
}

如果无法更改 json 数据结构，您也可以编写自己的 gatsby-transformer-json，只需读取 json 文件并为产品列表中的每个项目创建一个节点。

【讨论】：