How to pass context from pages in Gatsby?

Developer Support
1

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

createPage({
            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 }} 
}
2

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

3

@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?
  }}/>

image.png
image.png911×386 51.6 KB

4

And also i want to omit WrapPageElement and WrapRootElement

5

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…