PageContext

PageContext is a mechanism in Gatsby for passing data from the build process into individual page components. The pageContext object is supplied when a page is created with the createPage API in gatsby-node.js and becomes available to the corresponding page component as props.pageContext during render.

It is intended for data that is specific to a page and used to render dynamic pages without embedding all data into a GraphQL query per page. For example, when generating blog posts, you can set context: { slug } and then reuse a single template to render all posts.

Creation and access are straightforward: in gatsby-node.js you call actions.createPage({ path: `/blog/${slug}`, component: path.resolve('./src/templates/post.js'), context: { slug } }). In the post template, you can access the value via pageContext (for example, const { slug } = pageContext or by destructuring from the component’s props). You can also parameterize a GraphQL page query with a variable $slug that Gatsby fills from the context, making data available in props.data.

Common use cases include implementing pagination, filtering, localization, or any scenario that requires passing identifiers or options to a page without repeating separate queries. pageContext is processed at build time and is serialized into the page’s JavaScript bundle; avoid placing large or sensitive data in context.