graphql - 反復せずに配列から特定の要素にアクセスする方法は?

Question

私は次のフォルダ構造を持っています

/images
/images/pic1.jpg
/images/pic2.jpg

次のGraphQLクエリを使用する場合..

query MyQuery1 {
  file(sourceInstanceName: {eq: "images"}, name: {eq: "pic1"}) {
    name
    publicURL
  }
}

のようなものを使用して結果にアクセスできます<img src={data.file.publicUrl} alt="" />。ここまでは順調ですね。

しかし今、1 つのクエリでそのフォルダーから複数の画像を取得したいと考えています。だから私は次のことを思いついた：

query {
  allFile(
    filter: {
      sourceInstanceName: { eq: "images" }
      name: { in: ["pic1", "pic2"] }
    }
  ) {
    nodes {
      name
      publicURL
    }
  }
}

すごい！mapしかし、結果を使用したり反復したりすることなく、これらの画像の 1 つにアクセスするにはどうすればよいでしょうか?

私はこのようなものを探していますが、もちろんうまくいきません:

<img src={data.file.publicUrl name.eq="pic1"} alt="pic1"/>

次のようなこともありません。

<img src={data.allFile.nodes.0.publicUrl} alt="pic1" />

gatsby-image画像の最適化とサイズ変更に使用したいと思います。そのため、直接インポートよりも GraphQL の方法を選択します。私は間違った道を進んでいますか？