Page Creation

Once schema generation is complete, including schema inference and the provision of all schema root fields, utility types, and query filters, the next step in the Gatsby build lifecycle is page creation, which is conducted by invoking the createPage action. There are three primary side effects in Gatsby when a page is created.

First, the pages namespace, which is a map of each page’s path to a Page object, is updated in Redux. The pages reducer (src/redux/reducer/pages.ts) is responsible for updating this each time a CREATE_PAGE action is executed, and it creates a foreign key reference to the plugin responsible for creating the page by adding a pluginCreator___NODE field.

Second, the components namespace, which is a map of each componentPath (a file with a React component) to a Component object (the Page object but containing an empty query string), is updated in Redux. This query string will be set during query extraction, which is covered in the next section.

Finally, the onCreatePage API is executed. Every time a page is created, plugins can implement the onCreatePage API to perform certain tasks such as creating SitePage nodes or acting as a handler for plugins that manage paths, like gatsby-plugin-create-client-paths and gatsby-plugin-remove-trailing-slashes.