GraphQL dependent query in gatsby page

Question

I would like to nest two queries on my Gatsby index.js page. I have front matter on my posts that includes the name and directory of the featured image. Query #1 is to retrieve those strings and query #2 is to build a childImageSharp using a combination of those strings.

What I have tried is:

import React from "react"
import { css } from "@emotion/core"
import { graphql, compose } from "gatsby"
import { rhythm } from "../utils/typography"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"

function Home({ mdHeaderData, introImage }) {
  return (
    <div>
      {mdHeaderData.allMarkdownRemark.edges.map(({ node }) => (
        <h4>node.frontmatter.gallery</h4>
        <GatsbyImage image={getImage(introImage.node)} />
    </div>
  );
};

const mdHeaderQuery = graphql`
  query mdHeaderQuery {
    allMarkdownRemark {
      edges {
        node {
          id
          frontmatter {
            gallery
            introimage
        }
      }
    }
  }
`

const introImageQuery = graphql`
  query  introImageQuery {
    allFile(
      filter: {
        sourceInstanceName: {eq: "galleries"},
        relativePath: {eq: $introImagePath}
      }
    ) {
      nodes {
        childImageSharp {
          gatsbyImageData(
            width: 500
          )
        }
      }
    }
  }
`

export default compose(
  graphql(mdHeaderQuery, {
    name: 'mdHeaderData'
  }),
  graphql(introImageQuery, {
    name: 'introImage',
    options: ({ mdHeaderData }) => ({
      variables: {
        introImagePath: mdHeaderData.allMarkdownRemark.edges.node.frontmatter.gallery + "/" + mdHeaderData.allMarkdownRemark.edges.node.frontmatter.introimage
      }
    })
  })
) (Home)

I am getting SSR errors saying that graphql is no defined and pointing at the export default compose line.