Skip to main content

Query Extraction

Extracting Queries from Files

Up until now, we have 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 our source files. The entrypoint to this phase is query-watcher extractQueries(), which immediately compiles all graphql queries by calling into query-compiler.js.

Query Compilation

The first thing it does is use babylon-traverse to load all JavaScript files in the site that have graphql queries in them. This produces AST results that are passed to the relay-compiler. This accomplishes a couple of things:

  1. It informs us of any malformed queries, which are promptly reported back to the user.
  2. It builds a tree of queries and fragments they depend on. And outputs a single optimized query string with the fragments.

After this step, we 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

%0 cluster_compiler query-compiler.js fragments fragments. e.g .cache/fragments/fragment1.js srcFiles source files. e.g src/pages/my-page.js components redux.state.components (via createPage) fileQueries files containing queries fragments->fileQueries srcFiles->fileQueries components->fileQueries schema Gatsby schema relayCompiler Relay Compiler schema->relayCompiler babylon parse files with babylon filter those with queries fileQueries->babylon queryAst QueryASTs babylon->queryAst queryAst->relayCompiler queries Queries filePath query relayCompiler->queries query {    name: filePath,    text: rawQueryText,    originalText: original text from file,    path: filePath,    isStaticQuery: if it is,    hash: hash of query } queries:query->query

Store Queries in Redux

We’re now in the handleQuery function.

If the query is a StaticQuery, we call the replaceStaticQuery action to save it to 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 in Static Queries. We also remove 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 we update its component’s query in the redux components namespace via the replaceComponentQuery action.

%0 cluster_watcher query-watcher.js:handleQuery() compiler query-compiler.js query {    name: filePath,    text: rawQueryText,    originalText: original text from file,    path: filePath,    isStaticQuery: if it is,    hash: hash of query } compiler->query for each compiled query replaceStaticQuery replaceStaticQuery() query->replaceStaticQuery if static query replaceComponentQuery replaceComponentQuery() query->replaceComponentQuery if not static staticQueryComponents staticQueryComponents (redux) replaceStaticQuery->staticQueryComponents components components (redux) replaceComponentQuery->components set `query` attribute

Queue for execution

Now that we’ve saved our query, we’re ready to queue it for execution. Query execution is mainly handled by page-query-runner.js, so we accomplish this by passing the component’s path to queueQueryForPathname function.

%0 cluster_watcher query-watcher.js:handleQuery() cluster_pageQueryRunner page-query-runner.js compiler query-compiler.js query {    name: filePath,    text: rawQueryText,    originalText: original text from file,    path: filePath,    isStaticQuery: if it is,    hash: hash of query } compiler->query for each compiled query queueQueryForPathname queueQueryForPathname() query->queueQueryForPathname queue for execution

Now let’s learn about Query Execution.


Was this helpful? edit this page on GitHub