Skip to main content


This documentation isn’t up to date with the latest version of Gatsby.

Outdated areas are:

  • data.json doesn’t exist anymore
  • Add page-data.json
  • Add match-paths.json

You can help by making a PR to update this documentation.

Throughout the Gatsby code, you’ll see the below object fields and variables mentioned. Their definitions and reason for existence are defined below.


Page Object

created by calls to createPage (see Page Creation).

The above fields are explained below


The publicly accessible path in the web URL to access the page in question. E.g


It is created when the page object is created (see Page Creation)

Redux pages namespace

Contains a map of Page path -> Page object.


Think of this instead as client matchPath. It is ignored when creating pages during the build. But on the frontend, when resolving the page from the path (find-path.js), it is used (via reach router) to find the matching page. Note that the pages are sorted so that those with matchPaths are at the end, so that explicit paths are matched first.

This is also used by gatsby-plugin-create-client-paths. It duplicates pages whose path match some client-only prefix (e.g. /app/). The duplicated page has a matchPath so that it is resolved first on the frontend.

It is also used by gatsby-plugin-netlify when creating _redirects.


The logical name for the page’s query json result. The name is constructed during createPage using a kebabHash of page path. E.g. For the above page path, it is:


The actual json file is written to disk after Query Execution.


The path on disk to the JavaScript file containing the React component. E.g


Think of this as componentPath instead.

Redux components namespace

Mapping from component (path on disk) to its Page object. It is created every time a page is created (by listening to CREATE_PAGE).

Query starts off as empty, but is set during the extractQueries phase by query-watcher/handleQuery, once the query has compiled by relay (see Query Extraction).


The [name] portion of the webpack chunkFilename ([name]-[contenthash].js) (see Production App webpack config). Its name is the concatenation of component--- and the component name passed through kebab-hash. E.g, the componentChunkName for component




This is used extensively throughout Gatsby, but especially during Code Splitting.


If the path is /, internalComponentName = ComponentIndex. Otherwise, for a path of /blog/foo, it would be ComponentBlogFoo.

Created as part of page, but currently unused.


This is merged with the page itself and then is passed to graphql queries as the context parameter.



Path to the page’s query result. Relative to /public/static/d/{modInt}. Name is kebab hash on path--${jsonName}-result->sha1->base64. E.g


Set after Query Execution has finished.

Redux jsonDataPaths namespace (dataPaths)

Map of page jsonName to dataPath. Updated after Query Execution. E.g

This is also known via the dataPaths variable.

Query result file




This is the actual result of the GraphQL query that was run for the page /blog/2018-07-17-announcing-gatsby-preview/. The contents would look something like:

For a query such as:

Webpack stuff


See Write Out Pages.


See Write Out Pages.

Edit this page on GitHub