query and inject single fixed gatsby image into a page

Single_Fixed_Gatsby_Image_Query

  /** @jsx jsx */
import React from "react"
import { Styled, jsx } from "theme-ui"
import { Link, graphql } from "gatsby"
import Layout from "../components/Organisms/Layout"
import SEO from "./seo"
import Img from "gatsby-image"

export const query = graphql`
  query {
    file(relativePath: { eq: "workshop.jpg" }) {
      childImageSharp {
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

const TestingPage = ({ data }) => {
  return (
    <Layout>
      <SEO title="TestingPage" />
      <Styled.h4>Testing Page</Styled.h4>

      <Styled.h6>Image should appear below</Styled.h6>
      <Img
        className="workshop"
        fixed={data.file.childImageSharp.fixed}
        alt="headshot"
      />
      <Styled.p>
        <Link to="/page-2/">Go to page 2</Link>
      </Styled.p>
    </Layout>
  )
}

export default TestingPage