How to use context in React Component class after calling Gatsby createPage

I've called this function in my gatsby-node.js file.

createPage({
        path: `/article/`,
        component: path.resolve(`./src/pages/article.js`),
        // The context is passed as props to the component as well
        // as into the component's GraphQL query.
        context: {
            craftercmsData
        },
    })

class IndexPage extends React.Component {

    constructor(crafterCmsData) {
        //how do I access my context data
    }

    render = () => {

    }

How do I access context in my IndexPage class?

Solution

context is available as a props (as pageContext), so you can easily access it using rather than a functional component or a class-based one, but it will be only available at ./src/pages/article.js:

function IndexPage(props) {
  console.log("your context is", props.pageContext);
  return <h1>Hello</h1>;
}

Or, following your class-based component:

class IndexPage extends React.Component {

class IndexPage extends React.Component {
  console.log("your context is", this.props.pageContext);
  render() {
    return <h1>Hello</h1>;
  }
}

Useful resources: