如何使用 Graphql 查询特定节点？答案

【问题标题】：How to query a specific node using Graphql?如何使用 Graphql 查询特定节点？
【发布时间】：2021-10-31 20:10:48
【问题描述】：

我正在尝试使用 Graphql 返回对象的特定实例。

这是我的 Graphql 查询：

query MyQuery {
  allContentfulFlexStyleBody {
    edges {
      node {
        image {
          file {
            url
          }
        }
      }
    }
  }
}

它返回 3 个节点：

{
  "data": {
    "allContentfulFlexStyleBody": {
      "edges": [
        {
          "node": {
            "image": {
              "file": {
                "url": "//images.ctfassets.net/m7ipc0qjqa17/6JTBUN3mkENLvEVuC/6ff4b2da441f1c7cec2eb401534aa749/-19.jpeg"
              }
            }
          }
        },
        {
          "node": {
            "image": {
              "file": {
                "url": "//images.ctfassets.net/m7ipc0qjqa17/2s6lg5oBJ7F780DI1/b4068dcc9cc889dbcd09ed992793e771/-BTS.png"
              }
            }
          }
        },
        {
          "node": {
            "image": {
              "file": {
                "url": "//images.ctfassets.net/m7ipc0qjqa17/6bRRjlI1nLFCdUawZ/12af617d352b21864192dcc033198951/MyStylist_Photo_Grid_Layout__Retouched_Photos_Shortlist-6.jpeg"
              }
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}

我正试图在我的 gatsby 项目中显示一张图片：

 {data.allContentfulFlexStyleBody.edges.map(({ node }, index) => (
    <img
      className={"contentFeatureImg"}
      alt={``}
      key={``}
      src={node.image.file.url}
    />
  ))}

正在显示所有图像。如何在不返回整个边数组的情况下独占访问第一个、第二个或第三个节点？

【问题讨论】：

您的意思是只显示一张图片吗？还是您只想查询 GraphQL 服务器中的特定图像（例如带有 id）？
查询一张图片
您可以检查架构吗？很可能有一个查询，您可以在其中接收一张图像的所有信息。
...edges[0].node.image.file.url
我正在向 gatsby 查询内容，没有架构

标签： javascript reactjs graphql contentful

【解决方案1】：

访问边数组的特定元素足以满足我在这里所做的工作：

  <img
    className={"contentFeatureImg1"}
    alt={``}
    key={``}
    src={data.allContentfulFlexStyleBody.edges[0].node.image.file.url}
  />

【讨论】：