How do I query multiple images with gatsby-image? : <p>I have 16 images that I want to render out onto a website in a grid format.</p>

<p>I'm using the following plugins for this:</p>

<ul>
<li><code>gatsby-image</code></li>
<li><code>gatsby-source-filesystem</code></li>
<li><code>gatsby-plugin-sharp</code></li>
<li><code>gatsby-transformer-sharp</code></li>
</ul>

<p>I read the documentation and as for as I know, it only demonstrated how to query for one single image.</p>

<p>e.g.</p>

<pre><code>import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) =&gt; (
  &lt;div&gt;
    &lt;h1&gt;Hello gatsby-image&lt;/h1&gt;
    &lt;Img fixed={data.file.childImageSharp.fixed} /&gt;
  &lt;/div&gt;
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`
</code></pre>

<p>But how would I go about this if I had 16 images? Writing 16 separate queries seem rather cumbersome and would be difficult to read in the future.</p>

<p>I saw this code in the docs referencing multiple images, but I have trouble trying to access the images themselves.</p>

<p>e.g.</p>

<pre><code>export const squareImage = graphql`
  fragment squareImage on File {
    childImageSharp {
      fluid(maxWidth: 200, maxHeight: 200) {
        ...GatsbyImageSharpFluid
      }
    }
  }
`

export const query = graphql`
  query {
    image1: file(relativePath: { eq: "images/image1.jpg" }) {
      ...squareImage
    }

    image2: file(relativePath: { eq: "images/image2.jpg" }) {
      ...squareImage
    }

    image3: file(relativePath: { eq: "images/image3.jpg" }) {
      ...squareImage
    }
  }
`
</code></pre>

<p>My folder structure is as follows:</p>

<p>---package.json</p>

<p>---src </p>

<p>------images</p>

<p>---------the 16 images</p>

<p>------pages</p>

<p>---------the page where I want to render the 16 images in</p>

<p>etc.</p>

<p>Thank you.</p>
