如何使用GraphQL查询指定节点并在Gatsby中单独调用对应资源

方案1：修改GraphQL查询直接获取指定节点（推荐） #

Gatsby 所有 all 开头的集合查询都支持 limit（返回条目数）和 skip（跳过条目数）参数，你可以在查询阶段就只返回需要的单个节点，减少不必要的数据传输：

# 取第1个节点（索引从0计数，skip=0即跳过0条，返回1条）
query MyQuery {
  allContentfulFlexStyleBody(skip: 0, limit: 1) {
    edges {
      node {
        image {
          file {
            url
          }
        }
      }
    }
  }
}

如果要获取第2个节点，将 skip 改为 1 即可；获取第3个节点将 skip 改为 2 即可。

补充：如果你的 Contentful 条目配置了唯一业务字段（比如自定义标识、slug），更推荐用 filter 参数精准匹配，避免条目排序变化导致索引取错的问题：

query MyQuery {
  allContentfulFlexStyleBody(filter: {customId: {eq: "your-target-entry-id"}}) {
    edges {
      node {
        image {
          file {
            url
          }
        }
      }
    }
  }
}

方案2：前端直接按数组索引取值 #

如果不想修改现有查询，也可以跳过遍历数组的 map 方法，直接通过索引访问 edges 数组中的对应节点：

// 渲染第1个节点的图片，索引0对应第1条
<img
  className="contentFeatureImg"
  alt=""
  src={data.allContentfulFlexStyleBody.edges[0].node.image.file.url}
/>

同理，索引为 1 对应第2个节点，索引为 2 对应第3个节点。

内容的提问来源于stack exchange，提问作者jibreal