Skip to content

Instantly share code, notes, and snippets.

@swyxio
Last active April 1, 2022 11:19
Show Gist options
  • Save swyxio/09306ec03df7b4cd8e7469bb74c078fb to your computer and use it in GitHub Desktop.
Save swyxio/09306ec03df7b4cd8e7469bb74c078fb to your computer and use it in GitHub Desktop.
Gatsby bootstrap lifecycle

Sequence of Gatsby's bootstrap lifecycle with links to source code as of v2.0.0

  1. open and validate gatsby-config (get-config-file.js) 1.5 load themes (swyx added this note July 2019)
  2. load plugins (load-plugins/index.js) from the list given in gatsby-config.js
  3. onPreBootstrap: runs onPreBootstrap if it is implemented in any plugins, for example gatsby-plugin-typography. Receives handy apiCallArgs and pluginOptions.
  4. delete html and css files from previous builds (from the /public directory) - a simple delete
  5. delete /.cache if hash of package.json, gatsby-config.js, gatsby-node.js, and plugin versions has changed. then init or reuse /.cache/cache.
  6. copy gatsby files from the cache-dir folder in the main gatsby package into your new /.cache. Make sure ./cache/json exists and ./cache/fragments is empty. If your plugins implement gatsby-browser and gatsby-ssr, write them out to .cache/api-runner-browser-plugins.js and .cache/api-runner-ssr.js.
  7. source and transform nodes: run sourceNodes if implemented by plugins (eg gatsby-source-wikipedia), then garbage collect stale nodes
  1. building schema: runs schema/index.js to build everything involved in the RootQueryType GraphQLSchema. a lot of code here i'm skipping over.
  2. add extensions: by default gatsby handles .js and .jsx, but plugins can implement resolvableExtensions to add filetypes for other languages, eg gatsby-plugin-typescript
  3. createPages: run createPages hooks implemented by your plugins (e.g. page-hot-reloader) and your gatsby-node.js
  1. createPagesStatefully: "A variant on createPages for plugins that want to have full control over adding/removing pages." more here.
  2. onPreExtractQueries: runs the onPreExtractQueries hook for plugins like gatsby-transformer-sharp and gatsby-source-contentful.
  3. update schema: run schema AGAIN! (why? the comment says "Update Schema for SitePage."). Report conflicting field types.
  4. extract queries from components: starting from query-watcher.js, use queryCompiler to either replaceComponentQuery for pages or replaceStaticQuery for staticQueries.
  5. (if not in NODE_ENV != production) start the createPages page-hot-reloader
  6. run graphql queries: runQueriesForPathnames for pageQueries and staticQueries.
  7. write out page data: writePages!
  8. write out redirect data: writes out browser redirects to .cache/redirects.json
  9. bootstrap finished - ${process.uptime()}s: yay
  10. onPostBootstrap: calls "onPostBootstrap" hook, but no packages seem to implement it.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment