title: How do I query multiple images with gatsby-image?
body: <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>