Gatsby: Passing context from gatsby-node to the component

[LpmRaven]

Is it possible to pass context from the gatsby-node to the component itself?

I am trying to pass a title to the orderedListTemplate, I have no use for it in my graphql query, but the component (template) is re-usable so I can't declare it in the component itself. This component is used for multiple page all with different sorts. I dont want to duplicate the component simply to change a title.

createPage({
     component: orderedListTemplate,
      path: `${category}/best-${subCategory}-of-2019`,
      context: {
            category,
             subCategory,
             sort: { "fields": ["verdictRating"], "order": "DESC" }
             title: "This is the title for this type of page"
        },
})

createPage({
       component: orderedListTemplate,
       path: `${category}/latest-reviews-for-${subCategory}`,
       context: {
             category,
             subCategory,
             sort: { "fields": ["publishDate"], "order": "DESC" }
             title: "This is a different title with a different sort"
        },
})

[sidharthachatterjee]

Absolutely @LpmRaven

You can access the context object in props.pageContext in your component.

[LpmRaven]

Perfect, thanks @sidharthachatterjee. Exactly what I was looking for. I'm not sure if this information is currently anywhere in the docs? I could only find information saying that the context is passed to the page graphql query.

[sidharthachatterjee]

You're right @LpmRaven

Looks like we missed that one. Would you like to contribute it back to the documentation? 🙂

[sidharthachatterjee]

For anyone else seeing this in the future pageContext is documented at https://www.gatsbyjs.org/docs/actions/#createPage

[Dsingh-wp]

Hello There,

How I can pass this pageContext to class component

[woeterman94]

When I try to access a context parameter in the HTML by using

<p>test: {data.pageContext.id}</p>

I get: TypeError: Cannot read property 'id' of undefined