reactjs - Gatbsy Image を使用して GraphQL でデフォルトのエクスポートをマップするにはどうすればよいですか?

Question

画像を 3 回繰り返すのではなく、GraphQL でエクスポートをマップしたいので、コードを確認して理解してください。

これは私の輸出です：

    export default [
  {
    id: Math.random(),
    imageUrl: require("../../images/recent-game/1.jpg"),

  },
  {
    id: Math.random(),
    imageUrl: require("../../images/recent-game/2.jpg"),

  },
  {
    id: Math.random(),
    imageUrl: require("../../images/recent-game/3.jpg"),

  },
]

これは私のインポートとGraphQLです

import BackgroundImage from "gatsby-background-image"
import { useStaticQuery, graphql } from "gatsby"
const getData = graphql`
  {
    image1: file(relativePath: { eq: "recent-game/1.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
    image2: file(relativePath: { eq: "recent-game/2.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
    image3: file(relativePath: { eq: "recent-game/3.jpg" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }

  }
`

ここで、エクスポートに応じて、画像を繰り返すのではなく、画像をマップしたい