Creating and Modifying Pages
Gatsby makes it easy to programmatically control your pages.
Pages can be created in three ways:
- In your site’s gatsby-node.js by implementing the API
- Gatsby core automatically turns React components in
- Plugins can also implement
createPagesand create pages for you
To see what pages are being created by your code or plugins, you can query for
page information while developing in GraphiQL. Paste the following query in
the GraphiQL IDE for your site. The GraphiQL IDE is available when running
your sites development server at
context property accepts an object, and we can pass in any data we want the page to be able to access.
You can also query for any
context data you or plugins added to pages.
NOTE: There are a few reserved names that cannot be used in
context. They are:
Often you will need to programmatically create pages. For example, you have markdown files where each should be a page.
This example assumes that each markdown page has a
path set in the frontmatter
of the markdown file.
Gatsby core and plugins can automatically create pages for you. Sometimes the default isn’t quite what you want and you need to modify the created page objects.
A common reason for needing to modify automatically created pages is to remove trailing slashes.
To do this, in your site’s
gatsby-node.js add code similar to the following:
Note: There’s also a plugin that will remove all trailing slashes from pages automatically: gatsby-plugin-remove-trailing-slashes.
Note: If you need to perform an asynchronous action within
onCreatePage you can return a promise or use an
The automatically created pages can receive context and use that as variables in their GraphQL queries. To override the default and pass your own context, open your site’s
gatsby-node.js and add similar to the following:
On your pages and templates, you can access your context via the prop
pageContext like this:
Page context is serialized before being passed to pages: This means it can’t be used to pass functions into components.
In specific cases, you might want to create a site with client-only portions that are gated by authentication. For more on how to achieve this, refer to client-only routes & user authentication.