This documentation isn’t up to date with the latest version of Gatsby.
Outdated areas are:
- queries in dependencies (node_modules) and themes are now extracted as well
- add meta key for hook in JSON in diagram
You can help by making a PR to update this documentation.
Up until now, Gatsby has sourced all nodes into Redux, inferred a schema from them, and created all pages. The next step is to extract and compile all GraphQL queries from your source files. The entrypoint to this phase is query-watcher extractQueries(), which immediately compiles all GraphQL queries by calling into query-compiler.js.
- It informs us of any malformed queries, which are promptly reported back to the user.
- It builds a tree of queries and fragments they depend on. And outputs a single optimized query string with the fragments.
After this step, Gatsby will have a map of file paths (of site files with queries in them) to Query Objects, which contain the raw optimized query text, as well as other metadata such as the component path and page
jsonName. The following diagram shows the flow involved during query compilation
Gatsby is now in the handleQuery function.
If the query is a
StaticQuery, Gatsby will call the
replaceStaticQuery action to save it to the
staticQueryComponents namespace which is a mapping from a component’s path to an object that contains the raw GraphQL Query amongst other things. More details can be found in the doc on Static Queries. Gatsby also removes a component’s
jsonName from the
components Redux namespace. See Page -> Node Dependencies.
If the query is just a normal every-day query (not StaticQuery), then Gatsby updates its component’s
query in the redux
components namespace via the replaceComponentQuery action.
Now that Gatsby has saved your query, it’s ready to queue for execution. Query execution is mainly handled by page-query-runner.ts, so it accomplishes this by passing the component’s path to
Now let’s learn about Query Execution.