data not showing up from GraphQL query

I’m attempting to use gatsby-image to pull in a single hero image inside of a component. My graphql query is following the instructions from the gatsby-image README with the $hero variable coming from frontmatter via context in createPage.

export default ({ data }) => {
  return (
    <div className="heroImg">
	<Img sizes={data.file.childImageSharp.sizes} />
    </div>
  )
}

export const query = graphql`
query heroImageQuery($hero: String!) {
  file(relativePath: { eq: $hero }) {
	childImageSharp {
	  sizes(maxHeight: 350) {
		...GatsbyImageSharpSizes_withWebp_tracedSVG
	  }
	}
  }
}
`

The issue is that data is undefined. Not sure what I’m doing wrong here. If I run the query directly in GraphiQL with the image path hard coded from the value in $hero it works fine.

query heroImageQuery {
  file(relativePath: { eq: "images/heroes/portland-or-sign.jpg" }) {
	childImageSharp {
	  sizes(maxHeight: 350) {
		src
	  }
	}
  }
}

[ataylorme]

@melissamcewen I ended up running the graphQL query in the template and passing the result down to my component via props so the component could use the data. Hope that helps.

[melissamcewen]

@ataylorme how did you fix this? I’m running into the same problem