How Queries Work
As part of Gatsby’s data layer, GraphQL queries can be specified as tagged graphql expressions at the bottom of your component source file (e.g. query for Gatsby frontpage), StaticQueries within your components (e.g. showcase site details), or fragments created by plugins (e.g. gatsby-source-contentful).
Note that this process only applies to queries that are specified directly in components or templates. It doesn’t apply to queries involved in the creation of dynamic pages through your site’s
gatsby-node.js file (e.g. on Gatsby’s website).
Almost all logic to do with queries is in src/query. There are two steps involved in a Query’s life time. The first is extracting it, and the second is running it. These are separated into two bootstrap phases.