How to pass context from pages in Gatsby?

Hi Guys, what is the way to pass context from a page to child Product component without manually adding lines in each page.

            path: variation.slug,
            component: slash(
              require.resolve(`./src/pages/` + productSlug + ".jsx")
            context: { ...variation }, // pass single page data in context, so its available in the singlePostTemplate in props.pageContext.

Page ->page component-> product component
This is the component down the line where i want to get access to, without manually adding stuff in page and page component

function Product_( props, ref) {
    return <PlasmicProduct root={{ ref }} 

Not really sure what you mean… Does React context not work for this use case?

@chungwu when i pass variation variable via context it doesn’t get passed down to Product. And I want to avoid prop drilling. I failed at creating a Provider at gatsby-node level. Any other suggestions?

function PageUnderSlashPages({ pageContext }) {
  return <PlasmicPageUnderSlashPages  product={{
    props: pageContext <- omit this somehow?

And also i want to omit WrapPageElement and WrapRootElement

hmm if you want to avoid prop drilling, React context is the only way, and it looks like wrapPageElement() is the right place to do it…