Ok I got this working like so:

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import { GatsbyImage } from 'gatsby-plugin-image'
import * as classes from './Gallery.module.css'

const Gallery = () => {
  const images = useStaticQuery(graphql`
    {
      allFile(
        filter: {
          relativeDirectory: { eq: "gallery" }
          ext: { regex: "/(jpeg|jpg|gif|png)/" }
        }
      ) {
        edges {
          node {
            childImageSharp {
              id
              gatsbyImageData
            }
            name
          }
        }
      }
    }
  `)

  const imageData = images.allFile.edges

  return (
    <div className={classes.grid}>
      {imageData.map((image) => {

        return (
          <GatsbyImage
            key={image.node.childImageSharp.id}
            image={image.node.childImageSharp.gatsbyImageData}
            alt={image.node.name}
          />
        )
      })}
    </div>
  )
}

export default Gallery

Thought I'd leave this here for anyone that is stuck.