diff --git a/docs/docs/adding-search-with-algolia.md b/docs/docs/adding-search-with-algolia.md
index 9d7fefde6cf39..de148be4fb2e5 100644
--- a/docs/docs/adding-search-with-algolia.md
+++ b/docs/docs/adding-search-with-algolia.md
@@ -313,7 +313,7 @@ You now need to hook up the two components to each other and perform the actual
 
 ```jsx:title=src/components/search/index.js
 import algoliasearch from "algoliasearch/lite"
-import { createRef, default as React, useState } from "react"
+import { createRef, default as React, useState, useMemo } from "react"
 import { InstantSearch } from "react-instantsearch-dom"
 import { ThemeProvider } from "styled-components"
 import StyledSearchBox from "./styled-search-box"
@@ -331,9 +331,13 @@ export default function Search({ indices }) {
   const rootRef = createRef()
   const [query, setQuery] = useState()
   const [hasFocus, setFocus] = useState(false)
-  const searchClient = algoliasearch(
-    process.env.GATSBY_ALGOLIA_APP_ID,
-    process.env.GATSBY_ALGOLIA_SEARCH_KEY
+  const searchClient = useMemo(
+    () =>
+      algoliasearch(
+        process.env.GATSBY_ALGOLIA_APP_ID,
+        process.env.GATSBY_ALGOLIA_SEARCH_KEY
+      ),
+    []
   )
 
   useClickOutside(rootRef, () => setFocus(false))
@@ -362,6 +366,8 @@ The `ThemeProvider` exports variables for the CSS to use (this is the [theming](
 
 The `hasFocus` variable tracks whether the search box is currently in focus. When it is, it should display the input field (if not, only the search icon button is visible).
 
+The `searchClient` variable is [memoized](https://reactjs.org/docs/hooks-reference.html#usememo) to avoid re-creating the Algolia search client when the `Search` component is re-rendered. This is important for performance, as the client caches searches to minimise the number of requests made to Algolia.
+
 `StyledSearchRoot` is the root of the whole component. The React hook `useClickOutside` provides a callback if the user clicks anywhere else on the page, in which case it should close.
 
 `InstantSearch` from [`react-instantsearch-dom`](https://community.algolia.com/react-instantsearch) wraps the search box and search results to orchestrate the search.
diff --git a/docs/docs/conceptual/image-plugin-architecture.md b/docs/docs/conceptual/image-plugin-architecture.md
new file mode 100644
index 0000000000000..edf6ade97fb57
--- /dev/null
+++ b/docs/docs/conceptual/image-plugin-architecture.md
@@ -0,0 +1,113 @@
+# Architecture of Gatsby's image plugins
+
+This is a technical document for anyone who is interested in how images are implemented in Gatsby. This is not for learning [how to use images in Gatsby](/docs/how-to/images-and-media/using-gatsby-plugin-image/), or even [how to add image support to a plugin](/docs/how-to/plugins-and-themes/adding-gatsby-image-support/). This is for if you are working on Gatsby, or if you're curious about how it's implemented.
+
+## The image plugins
+
+Image processing in Gatsby has a large number of parts, with `gatsby-plugin-image` serving as a core, but using several other plugins in order to perform its job. We have tried to simplify this for end-users by documenting most of the features as if they were all part of `gatsby-plugin-image`, rather than trying to document the borders of responsibility between `gatsby-plugin-image`, `gatsby-plugin-sharp`, `gatsby-transformer-sharp` and `gatsby-source-filesystem`. Similarly, `StaticImage` is presented to the user as a React component, and they only need to interact with it as one. However it is in fact the front end to an image processing pipeline that includes three Gatsby plugins, two Babel plugins and several hooks into the Gatsby build process. This document will show exactly what each plugin does, and describe how the main parts are implemented. These are the plugins used for image processing and display.
+
+### `gatsby-plugin-image`
+
+This is the main plugin that users interact with. It includes two components for displaying images, as well as helper functions and a toolkit for plugin developers.
+
+#### The `GatsbyImage` component
+
+This is a React component, and is the actual component used to display all images. If somebody uses `StaticImage`, or an image component from a CMS provider, they all use `GatsbyImage` under the hood for the actual image display.
+
+#### The `StaticImage` component
+
+A a lightweight wrapper around `GatsbyImage`, this component is detected during the build process and the props are extracted to enable images to be downloaded, and processed by `gatsby-plugin-sharp` without needing GraphQL.
+
+#### Plugin toolkit
+
+`gatsby-plugin-image` includes several functions that are used by third-party source plugins to enable them to generate image data objects. This includes helpers in `gatsby-plugin-image/graphql-utils`, which help plugin authors create `gatsbyImageData` resolvers, as well as the `getImageData` function used to generate image data at runtime by plugins with URL-based image resizing APIs. It does not perform any actual image processing (and doesn't require sharp), but does ensure that the correct object is generated with all of the correct image sizes. It includes the `getLowResolutionImageURL` function which helps when generating blurred placeholders.
+
+#### Runtime helpers
+
+The plugin exports a number of other helper functions designed to help end-users work with image data objects at runtime. These include the `getImage`, `getSrc` and `getSrcSet` utilities, as well as the `withArtDirection` helper.
+
+### `gatsby-plugin-sharp`
+
+This includes the actual image processing functions from both sharp but also imagemin and potrace. It includes the functions that generate the image data object, including calculating which srcset sizes to generate. It exports `generateImageData`, which is used by `gatsby-transformer-sharp` and `gatsby-plugin-image`. It takes a `File` node and the image processing arguments, calculates which images to generate, processes these images and returns an image data object suitable for passing to `GatsbyImage`. It also exports helper functions for third party plugins to use, such as `traceSVG`.
+
+### `gatsby-transformer-sharp`
+
+This plugin attaches a `childImageSharp` node to all image `File` nodes. This includes the `gatsbyImageData` resolver, which uses `generateImageData` from `gatsby-plugin-sharp` to process images and return an image data object suitable for passing to `GatsbyImage`. The node also includes legacy `fixed` and `fluid` resolvers for the old `gatsby-image` component.
+
+### `gatsby-core-utils`
+
+Third party plugin authors can use the `fetchRemoteFile` function to download files and make use of Gatsby's caching without needing to create a file node. This is used for low-resolution placeholder images.
+
+### `gatsby-source-filesystem`
+
+The image plugin uses `createRemoteFileNode` when a `StaticImage` component has a remote URL as `src`. It does not currently use `fetchRemoteFile`, because `generateImageData` requires a `File` object.
+
+### Third-party plugins
+
+Many source plugins now support `GatsbyImage`. They do this by generating image data objects that can be passed to the `GatsbyImage` component, or by providing their own components that wrap it. This data is either returned from a custom `gatsbyImageData` resolver on the plugin's nodes, or via a runtime helper that accepts data from elsewhere. An example of the latter would be the new Shopify plugin, which includes a `getShopifyImage` function that can be used to generate images from the Shopify search or cart APIs. These plugins all use the plugin toolkit from `gatsby-plugin-image` to ensure that the object they create are compatible. These do not require sharp, as the CMS or CDN provider handles the resizing. The API for each plugin's `gatsbyImageData` resolver will depend on the individual plugin, but authors are encouraged to provide an API similar to the one from `gatsby-transformer-sharp`.
+
+## How `GatsbyImage` works
+
+`GatsbyImage` is a React component used to display performant, responsive images in Gatsby. It is used under the hood by all other compatible components such as `StaticImage` and components from CMS source plugins. It uses several performance tricks, and deserves most of the credit for improved performance scores when switching to the image plugin.
+
+### Anatomy of the component
+
+The `GatsbyImage` component wraps several other components, which are all exported by the plugin. It was originally designed to allow users to compose their own custom image components, but we have not documented this, so it should currently be considered unsupported. It is something that could be looked-at in future, but until that point `GatsbyImage` and `StaticImage` should be considered the only public components.
+
+#### Lazy hydration
+
+Throughout the component there are different versions delivered for browser and server. The reason for this is that the component performs lazy hydration: the image is loaded as soon as the SSR HTML is loaded in the browser, including blur-up and lazy-loaded images. Hydration is usually the slowest part of a React app's page load. `GatsbyImage` avoids this by skipping React for all initial image loads, leading to faster LCP. The plugin uses `onRenderBody` in `gatsby-ssr` to inject inline script and CSS tags to enable this. The JS attaches a `load` event listener to the body, which hides the placeholder and shows the main image when any `GatsbyImage` has loaded. It uses `<noscript>` tags to ensure that images still work with scripts disabled.
+
+Inside the `GatsbyImage` browser component, this means the load handling is skipped for any component that was rendered in SSR (which is indicated by adding a `data-gatsby-image-ssr` prop in the server component). However for any images that do not have this prop, this load handling happens in React. This will be the case for any image rendered after initial load, such as after page navigation or conditional rendering.
+
+The browser component is a class component, which uses `shouldComponentUpdate` to ensure that it is never hydrated as part of the normal rendering process in the browser. Instead, the image hydrates or renders itself manually, using the `lazyHydrate` function, which is itself loaded asynchronously using `import()`. This takes the `ref` of the wrapper's HTML element, and uses `hydrate` or `render` from `react-dom` to render or hydrate the inner components as their own React tree. This ensures that the hydration of the images never blocks page loading, contributing to faster TTI.
+
+#### Sizer
+
+The `GatsbyImage` component supports three types of layout, which define the resizing behavior of the images. The component uses a `Sizer` component inside `layout-wrapper.tsx` to ensure that the wrapper is the correct size, even before any image has loaded. This avoids the page needing to re-layout, which looks bad for the user and is a serious problem for performance. For fixed layout components the size is just set via CSS. For full-width images, `Sizer` uses a `padding-top` hack to maintain aspect ratio as the image scales infinitely. For constrained layouts, `Sizer` uses an `<img>` tag with an inline, empty SVG `src` to make the browser use its native `<img>` resizing behaviour, even though the main image will not have loaded at this point.
+
+#### Placeholder
+
+`GatbsyImage` supports displaying a placeholder while the main image loads. There are two kinds of placeholder that are currently supported: flat colors and images. The type of placeholder is set via the image data object, and will either be a data URI for the image, or a CSS color value. The image will either be a base64-encoded low resolution raster image (called `BLURRED` when using sharp) or a URI-encoded SVG (called `TRACED_SVG`). The raster image will by default be 20px wide, and the same aspect ratio as the main image. This will be resized to fill the full container, giving a blurred effect. The SVG image is expected to be a single-color, simplified SVG generated using [potrace](http://potrace.sourceforge.net/). While these are the defaults produced by sharp, and also used by many third-party source plugins, we do not enforce this, and it can be any URI. We strongly encourage the use of inline data URIs, as any placeholder that needs to make a network request will defeat much of the purpose of using a placeholder. The actual placeholder element is a regular `<img>` tag, even for SVGs.
+
+The alternative placeholder is a flat color. This is expected to be calculated from the dominant color of the source image. sharp supports performing this calculation, and some CMSs provide it in the image metadata. This color is applied as a background color to a placeholder `<div>` element.
+
+When the main image is loaded, the placeholder is faded-out using a 250ms CSS opacity transition. We do not currently support disabling or changing this fade-out time, but it is a common request so could be a useful addition.
+
+#### Main image
+
+The main image component displays the actual image, as defined in the image data object. There is a lot of flexibility in how this is rendered, depending on which formats are provided.
+
+In most cases, the object will include multiple sources in next-gen format such as WebP or AVIF, plus one fallback in JPEG or PNG format. In these cases, the component will render a `<picture>` tag, with multiple `<source>` elements and an `<img>` tag for the fallback. The `<source>` and `<img>` tags will always include a `srcset` prop, with multiple image resolutions according to the layout and size of the source and input images. We strongly recommend that users and source plugin authors allow the image plugin to generate these automatically. We use `w` (pixel width) units for the `srcset` rather than pixel density values, as this offers the browser the most flexibility in choosing the source to download. If there are not multiple sources provided, then an `<img>` tag will be rendered without an enclosing `<picture>` tag.
+
+We pass through `media` props to the `<source>` elements, allowing art direction to be used. However we do not attempt to do any handling of changing the aspect ratio of the container in these cases, so the user must do this themselves using CSS.
+
+## How `StaticImage` works
+
+The image plugin performs a number of tricks so that the `StaticImage` component appears to work like a regular React component, while being able to process images at build time. It can be helpful to think of `StaticImage` as a
+
+### The problem
+
+In order to process images at build time, Gatsby needs to know which images will be needed and how they will need to be sized. It needs to do this in the scope of the build process so it has access to the sharp plugin (so it can't be done in e.g. the Babel plugin) and it can't be done by actually rendering the page, because that will miss images that are conditionally rendered and has similar issues with access to sharp and the Node APIs. The solution we have used is to use static analysis of the source files. This is similar to how static queries are extracted from source files.
+
+### Build process
+
+#### Extract `StaticImage` props
+
+The static analysis happens in `gatsby-plugin-image`, during the `preprocessSource` lifecycle. This runs immediately before query extraction. The plugin uses Babel to find references to `StaticImage` imported from `gatsby-plugin-image`. It then uses [babel-jsx-utils](https://www.npmjs.com/package/babel-jsx-utils) to extract the value of the props. This calls `evaluate()` on the AST nodes, so is able to extract values and evaluate expressions in the local scope as well as inline literals. If any of these props fails to be evaluated, it generates a structured error that includes the location of the error and [a link to the docs](/docs/reference/built-in-components/gatsby-plugin-image/#restrictions-on-using-staticimage).
+
+#### Process images
+
+If all is well, all the props have been extracted. The only required prop is `src`: all the others can use default values. These props are then passed to `generateImageData` from `gatsby-plugin-sharp`. This handles the actual image processing, and returns an `IGatsbyImageData` object. If the `src` is a remote URL then the image is downloaded and cached locally. This image data object includes all of the data needed to display an image, including a list of sources, dimensions, layout, placeholder etc (though no actual image data except for data URIs of placeholders).
+
+#### Write out image data
+
+This object is then written to disk as a JSON file. The filename is generated using a hash of the props, and it is saved in `.cache/caches/gatsby-plugin-image`. If there have been any errors, an object with the error data is written instead. This is so the errors can be displayed in the browser console too.
+
+#### Injecting the data
+
+The rest of the build process then happens, and the next step where the image plugin is involved is the rendering stage. The image plugin adds a local Babel plugin `babel-plugin-parse-static-images` which once again finds the `StaticImage` components and extracts the props. However this time, the props are only used to calculate the JSON filename hash. The plugin then adds a new `__imageData` prop to the component, which is a `require()` of the image data JSON file. If there are errors either during the parsing, or passed through in the JSON file, these are inserted as an `__error` prop.
+
+#### Runtime
+
+At runtime, the `StaticImage` component behaves as a regular React component, but with the special `__imageData` prop injected by Babel. The component itself is a lightweight wrapper around `GatsbyImage`, and aside from error handling it just passes `__imageData` to the wrapped `GatsbyImage` component.
diff --git a/docs/docs/deploying-to-21yunbox.md b/docs/docs/deploying-to-21yunbox.md
index 8350d9b0311f1..d8f41682e5c40 100644
--- a/docs/docs/deploying-to-21yunbox.md
+++ b/docs/docs/deploying-to-21yunbox.md
@@ -2,14 +2,14 @@
 title: Deploying to 21YunBox
 ---
 
-[21YunBox](https://www.21yunbox.com) provides blazing fast Chinese CDN, [continuous deployment](/docs/glossary/continuous-deployment), one-click HTTPS and [other services like managed databases and backend web services](https://www.21yunbox.com/docs/v2/index.html), providing an avenue to launch web projects in China.
+[21YunBox](https://www.21yunbox.com) provides blazing fast Chinese CDN, [continuous deployment](/docs/glossary/continuous-deployment), one-click HTTPS and [other services like managed databases and backend web services](https://www.21yunbox.com/docs/), providing an avenue to launch web projects in China.
 
 21YunBox includes the following features:
 
 - Continuous, automatic builds & deploys from GitHub and Gitee
 - Automatic SSL certificates through [Let's Encrypt](https://letsencrypt.org)
 - Instant cache invalidation with a blazing fast, Chinese CDN
-- Unlimited [custom domains](https://www.21yunbox.com/docs/v2/custom-domains.html)
+- Unlimited [custom domains](https://www.21yunbox.com/docs/#/custom-domains)
 - Automatic [Brotli compression](https://en.wikipedia.org/wiki/Brotli) for faster sites
 - Native HTTP/2 support
 - Automatic HTTP → HTTPS redirects
@@ -17,7 +17,7 @@ title: Deploying to 21YunBox
 
 ## Prerequisites
 
-This guide assumes you already have a Gatsby project to deploy. If you need a project, use the [quick Start](/docs/quick-start) to get started or fork 21YunBox's [Gatsby Example](https://github.com/tobyglei/gatsby) before continuing.
+This guide assumes you already have a Gatsby project to deploy. If you need a project, use the [Quick Start](/docs/quick-start) to get started or fork 21YunBox's [Gatsby Example](https://gitee.com/eryiyunbox-examples/gatsby) before continuing.
 
 ## Setup
 
@@ -46,4 +46,4 @@ Every deploy automatically and instantly invalidates the CDN cache, so your user
 
 ## Custom domains
 
-Add your own domains to your site easily using 21YunBox's [custom domains](https://www.21yunbox.com/docs/v2/custom-domains.html) guide.
+Add your own domains to your site easily using 21YunBox's [custom domains](https://www.21yunbox.com/docs/#/custom-domains) guide.
diff --git a/docs/docs/how-to/plugins-and-themes/creating-a-source-plugin.md b/docs/docs/how-to/plugins-and-themes/creating-a-source-plugin.md
index 94e5fceb1c68a..0135a237c11ea 100644
--- a/docs/docs/how-to/plugins-and-themes/creating-a-source-plugin.md
+++ b/docs/docs/how-to/plugins-and-themes/creating-a-source-plugin.md
@@ -201,7 +201,7 @@ You can query data from any location to source at build time using functions and
 You'll use several modules from npm to making fetching data with GraphQL easier. Install them in the `source-plugin` project with:
 
 ```shell:title=source-plugin
-npm install apollo-cache-inmemory apollo-client apollo-link apollo-link-http apollo-link-ws apollo-utilities graphql graphql-tag node-fetch ws subscriptions-transport-ws
+npm install @apollo-client graphql subscriptions-transport-ws ws
 ```
 
 _Note: The libraries used here are specifically chosen so that the source plugin can support [GraphQL subscriptions](https://www.apollographql.com/docs/react/data/subscriptions/). You can fetch data the same way you would in any other Node.js app or however you are most comfortable._
@@ -214,15 +214,11 @@ Import the handful of Apollo packages that you installed to help set up an Apoll
 
 ```javascript:title=source-plugin/gatsby-node.js
 // highlight-start
-const { ApolloClient } = require("apollo-client")
-const { InMemoryCache } = require("apollo-cache-inmemory")
-const { split } = require("apollo-link")
-const { HttpLink } = require("apollo-link-http")
-const { WebSocketLink } = require("apollo-link-ws")
-const { getMainDefinition } = require("apollo-utilities")
-const fetch = require("node-fetch")
-const gql = require("graphql-tag")
+const { ApolloClient, InMemoryCache, gql, split, HttpLink } = require("@apollo-client")
+const { WebSocketLink } = require("@apollo/client/link/ws")
+const { getMainDefinition } = require("@apollo/client/utilities")
 const WebSocket = require("ws")
+const fetch = require("node-fetch")
 // highlight-end
 
 const POST_NODE_TYPE = `Post`
diff --git a/docs/docs/how-to/sourcing-data/sourcing-from-prismic.md b/docs/docs/how-to/sourcing-data/sourcing-from-prismic.md
index 3ff61a23d02fe..b154b4e783635 100644
--- a/docs/docs/how-to/sourcing-data/sourcing-from-prismic.md
+++ b/docs/docs/how-to/sourcing-data/sourcing-from-prismic.md
@@ -10,7 +10,7 @@ Moreover, their [Content Slices](https://prismic.io/feature/dynamic-layout-conte
 
 In addition to written instructions, this guide also includes videos for more complex steps. You can find all of them in a [YouTube playlist](https://www.youtube.com/playlist?list=PLB-cmN3u7PHJCG-phPyiydhHfiosyd0VC).
 
-_Note: This guide uses the Gatsby Hello World starter to provide a very basic understanding of how Prismic can work with your Gatsby site. If you'd like to start with a full blown template, check out [gatsby-starter-prismic](https://github.com/LekoArts/gatsby-starter-prismic). If you're not familiar with Prismic and its functionalities yet, check out [Prismic's official documentation](https://prismic.io/docs) which also includes user guides and tutorials. This guide assumes that you have basic knowledge of Prismic & Gatsby (See [Gatsby's official tutorial](/tutorial))._
+_Note: This guide uses the Gatsby Hello World starter to provide a very basic understanding of how Prismic can work with your Gatsby site. If you'd like to start with a full blown template, check out [gatsby-starter-prismic](https://github.com/LekoArts/gatsby-starter-prismic). If you're not familiar with Prismic and its functionalities yet, check out [Prismic's official documentation](https://prismic.io/docs/technologies/gatsby) which also includes user guides and tutorials. This guide assumes that you have basic knowledge of Prismic & Gatsby (See [Gatsby's official tutorial](/tutorial))._
 
 ## Setup
 
@@ -56,9 +56,9 @@ API_KEY=paste-your-secret-access-token-here-wou7evoh0eexuf
 
 _Note: If you want to locally build your project you'll also have to create a `.env.production` file with the same content._
 
-Now you need to configure the plugin (See all [available options](https://www.npmjs.com/package/gatsby-source-prismic#how-to-use)). The `repositoryName` is the name you have entered at the creation of the repository (you'll also find it as the subdomain in the URL). The `linkResolver` function is used to process links in your content. Fields with rich text formatting or links to internal content use this function to generate the correct link URL. The document node, field key (i.e. API ID), and field value are provided to the function. This allows you to use different [link resolver logic](https://prismic.io/docs/javascript/query-the-api/link-resolving) for each field if necessary.
+Now you need to configure the plugin (See all [available options](https://prismic.io/docs/technologies/configure-the-plugin-gatsby)). The `repositoryName` is the name you have entered at the creation of the repository (you'll also find it as the subdomain in the URL). The `linkResolver` function is used to process links in your content. Fields with rich text formatting or links to internal content use this function to generate the correct link URL. The document node, field key (i.e. API ID), and field value are provided to the function. This allows you to use different [link resolver logic](https://prismic.io/docs/technologies/link-resolver-gatsby) for each field if necessary.
 
-Remember also to add an object of Prismic custom type JSON schemas. You can copy it from Prismic's JSON editor tab in your custom type page. It's important to keep the name of JSON file **the same** as your custom type's API ID. More information can be found in the [Prismic documentation](https://user-guides.prismic.io/en/articles/380227-introduction-to-custom-type-building) and [Source Plugin README](/plugins/gatsby-source-prismic/#providing-json-schemas).
+Remember also to add an object of Prismic custom type JSON schemas. You can copy it from Prismic's JSON editor tab in your custom type page. It's important to keep the name of JSON file **the same** as your custom type's API ID. More information can be found in the [Prismic documentation](https://prismic.io/docs/technologies/configure-the-plugin-gatsby) and [Source Plugin README](/plugins/gatsby-source-prismic/#providing-json-schemas).
 
 Add the following to register the plugin:
 
@@ -75,7 +75,9 @@ module.exports = {
         repositoryName: `your-repository-name`,
         accessToken: `${process.env.API_KEY}`,
         linkResolver: ({ node, key, value }) => post => `/${post.uid}`,
-        page: require("./src/schemas/page.json"),
+        schemas: {
+          post: require("./custom_types/post.json"),
+        },
       },
     },
   ],
@@ -99,11 +101,10 @@ exports.createPages = async ({ graphql, actions }) => {
   const pages = await graphql(`
     {
       allPrismicPost {
-        edges {
-          node {
-            id
-            uid
-          }
+        nodes {
+          id
+          uid
+          url
         }
       }
     }
@@ -111,12 +112,12 @@ exports.createPages = async ({ graphql, actions }) => {
 
   const template = path.resolve("src/templates/post.jsx")
 
-  pages.data.allPrismicPost.edges.forEach(edge => {
+  pages.data.allPrismicPost.nodes.forEach(post => {
     createPage({
-      path: `/${edge.node.uid}`,
+      path: `/${post.url}`,
       component: template,
       context: {
-        uid: edge.node.uid,
+        uid: post.uid,
       },
     })
   })
@@ -127,12 +128,14 @@ exports.createPages = async ({ graphql, actions }) => {
 import React from "react"
 import { graphql } from "gatsby"
 
-const Post = ({ data: { prismicPost } }) => {
-  const { data } = prismicPost
+const Post = ({ data }) => {
+  if (!data) return null
+  const post = data.prismicPost
+
   return (
     <React.Fragment>
-      <h1>{data.title.text}</h1>
-      <div dangerouslySetInnerHTML={{ __html: data.content.html }} />
+      <h1>{post.data.title.text}</h1>
+      <div dangerouslySetInnerHTML={{ __html: post.data.content.html }} />
     </React.Fragment>
   )
 }
@@ -188,14 +191,17 @@ Single pages (like your homepage, privacy policy page etc.) don't need [GraphQL
 import React from "react"
 import { graphql, Link } from "gatsby"
 
-const Index = ({ data: { prismicHomepage } }) => (
-  <React.Fragment>
-    <h1>{prismicHomepage.data.title.text}</h1>
-    <div
-      dangerouslySetInnerHTML={{ __html: prismicHomepage.data.content.html }}
-    />
-  </React.Fragment>
-)
+const Index = ({ data }) => {
+  if (!data) return null
+  const home = data.prismicHomepage
+
+  return (
+    <React.Fragment>
+      <h1>{home.data.title.text}</h1>
+      <div dangerouslySetInnerHTML={{ __html: home.data.content.html }} />
+    </React.Fragment>
+  )
+}
 
 export default Index
 
@@ -228,3 +234,8 @@ This was an example meant to help you understand how Prismic works with Gatsby.
 As mentioned in the beginning of this guide, if you got stuck, you can compare your code to the [gatsby-starter-prismic](https://github.com/LekoArts/gatsby-starter-prismic) which is the project set up in the videos. A working example created by following this guide is available in the [commit history](https://github.com/LekoArts/gatsby-starter-prismic/tree/4aa5d52e79a0b4d90f0a671c24eb8289eb15a42b) of the aforementioned starter. More advanced usages of Prismic in Gatsby would be [Slices](https://intercom.help/prismicio/content-modeling-and-custom-types/field-reference/slices) and [Labels](https://intercom.help/prismicio/content-modeling-and-custom-types/structure-your-content/add-custom-styles-to-rich-text).
 
 <!-- Links to more advanced tutorials will go here -->
+
+## Interesting reads:
+
+1. [Official Prismic + Gatsby documentation](https://prismic.io/docs/technologies/gatsby)
+2. [Prismic & Gatsby step by step guide](https://prismic.io/docs/technologies/step-by-step-guide-gatsby)
diff --git a/docs/docs/mdx/programmatically-creating-pages.md b/docs/docs/mdx/programmatically-creating-pages.md
index 03355101da559..2089f7250ab26 100644
--- a/docs/docs/mdx/programmatically-creating-pages.md
+++ b/docs/docs/mdx/programmatically-creating-pages.md
@@ -243,7 +243,7 @@ export default function PageTemplate({ data: { mdx } }) {
     <div>
       <h1>{mdx.frontmatter.title}</h1>
       <MDXProvider components={shortcodes}>
-        <MDXRenderer>{mdx.body}</MDXRenderer>
+        <MDXRenderer frontmatter={mdx.frontmatter}>{mdx.body}</MDXRenderer>
       </MDXProvider>
     </div>
   )
@@ -285,7 +285,7 @@ export default function PageTemplate({ data: { mdx } }) {
     <div>
       <h1>{mdx.frontmatter.title}</h1>
       <MDXProvider components={shortcodes}>
-        <MDXRenderer>{mdx.body}</MDXRenderer>
+        <MDXRenderer frontmatter={mdx.frontmatter}>{mdx.body}</MDXRenderer>
       </MDXProvider>
     </div>
   )
diff --git a/docs/docs/preparing-for-deployment.md b/docs/docs/preparing-for-deployment.md
index aad946e649535..b00229e719551 100644
--- a/docs/docs/preparing-for-deployment.md
+++ b/docs/docs/preparing-for-deployment.md
@@ -56,5 +56,6 @@ If you have a server from one of the following providers, you should read the in
 - [Microsoft Internet Information Server (IIS)](/docs/deploying-to-iis)
 - [Firebase Hosting](/docs/how-to/previews-deploys-hosting/deploying-to-firebase)
 - [KintoHub](/docs/deploying-to-kintohub)
+- [21YunBox](/docs/how-to/previews-deploys-hosting/deploying-to-21yunbox)
 
 If you don't see the hosting you are interested, it's possible to add other hosting providers through [contributions to the docs](/contributing/docs-contributions).
diff --git a/packages/gatsby-plugin-image/src/components/hooks.ts b/packages/gatsby-plugin-image/src/components/hooks.ts
index 54f9afd3a9e4f..1cb84c2ccebbe 100644
--- a/packages/gatsby-plugin-image/src/components/hooks.ts
+++ b/packages/gatsby-plugin-image/src/components/hooks.ts
@@ -61,7 +61,7 @@ const isGatsbyImageDataParent = <T>(
   node: IGatsbyImageDataParent<T> | any
 ): node is IGatsbyImageDataParent<T> => Boolean(node?.gatsbyImageData)
 
-type ImageDataLike = FileNode | IGatsbyImageDataParent | IGatsbyImageData
+export type ImageDataLike = FileNode | IGatsbyImageDataParent | IGatsbyImageData
 export const getImage = (node: ImageDataLike): IGatsbyImageData | undefined => {
   if (isGatsbyImageData(node)) {
     return node
diff --git a/packages/gatsby-plugin-image/src/index.ts b/packages/gatsby-plugin-image/src/index.ts
index eb6ee653dd5e2..5961811df1506 100644
--- a/packages/gatsby-plugin-image/src/index.ts
+++ b/packages/gatsby-plugin-image/src/index.ts
@@ -15,6 +15,7 @@ export {
   IArtDirectedImage,
   IGetImageDataArgs,
   IUrlBuilderArgs,
+  ImageDataLike,
 } from "./components/hooks"
 export {
   generateImageData,
diff --git a/packages/gatsby-plugin-image/src/node-apis/image-processing.ts b/packages/gatsby-plugin-image/src/node-apis/image-processing.ts
index f9c790b71a114..6758aa54a9ed9 100644
--- a/packages/gatsby-plugin-image/src/node-apis/image-processing.ts
+++ b/packages/gatsby-plugin-image/src/node-apis/image-processing.ts
@@ -110,7 +110,7 @@ export async function writeImages({
             reporter,
           })
         } catch (err) {
-          reporter.error(`Error loading image ${src}`)
+          reporter.error(`Error loading image ${src}`, err)
           return
         }
         if (
diff --git a/packages/gatsby/index.d.ts b/packages/gatsby/index.d.ts
index 0bf5ad6530db9..23531e72f0ee2 100644
--- a/packages/gatsby/index.d.ts
+++ b/packages/gatsby/index.d.ts
@@ -207,7 +207,10 @@ export interface GatsbyConfig {
  *
  * @see https://www.gatsbyjs.org/docs/node-apis/
  */
-export interface GatsbyNode {
+export interface GatsbyNode<
+  TNode extends Record<string, unknown> = Record<string, unknown>,
+  TContext = Record<string, unknown>
+> {
   /**
    * Tell plugins to add pages. This extension point is called only after the initial
    * sourcing and transformation of nodes plus creation of the GraphQL schema are
@@ -219,9 +222,9 @@ export interface GatsbyNode {
     args: CreatePagesArgs & {
       traceId: "initial-createPages"
     },
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /**
    * Like `createPages` but for plugins who want to manage creating and removing
@@ -241,9 +244,9 @@ export interface GatsbyNode {
     args: CreatePagesArgs & {
       traceId: "initial-createPagesStatefully"
     },
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /**
    * Let plugins extend/mutate the site's Babel configuration.
@@ -252,9 +255,9 @@ export interface GatsbyNode {
    */
   onCreateBabelConfig?(
     args: CreateBabelConfigArgs,
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /**
    * Run when gatsby develop server is started, its useful to add proxy and middleware
@@ -272,9 +275,9 @@ export interface GatsbyNode {
    */
   onCreateDevServer?(
     args: CreateDevServerArgs,
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    calllback: PluginCallback<void>
+  ): void | Promise<void>
 
   /**
    * Called when a new node is created. Plugins wishing to extend or
@@ -289,11 +292,11 @@ export interface GatsbyNode {
    *   // create a new node field.
    * }
    */
-  onCreateNode?<TNode extends object = {}>(
+  onCreateNode?(
     args: CreateNodeArgs<TNode>,
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /**
    * Called before scheduling a `onCreateNode` callback for a plugin. If it returns falsy
@@ -304,9 +307,9 @@ export interface GatsbyNode {
    * @example
    * exports.unstable_shouldOnCreateNode = ({node}, pluginOptions) => node.internal.type === 'Image'
    */
-  unstable_shouldOnCreateNode?<TNode extends object = {}>(
+  unstable_shouldOnCreateNode?(
     args: { node: TNode },
-    options?: PluginOptions
+    options: PluginOptions
   ): boolean
 
   /**
@@ -317,11 +320,11 @@ export interface GatsbyNode {
    * See the guide [Creating and Modifying Pages](https://www.gatsbyjs.org/docs/creating-and-modifying-pages/)
    * for more on this API.
    */
-  onCreatePage?<TContext = Record<string, unknown>>(
+  onCreatePage?(
     args: CreatePageArgs<TContext>,
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /**
    * Let plugins extend/mutate the site's webpack configuration.
@@ -329,51 +332,51 @@ export interface GatsbyNode {
    */
   onCreateWebpackConfig?(
     args: CreateWebpackConfigArgs,
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /** Called at the end of the bootstrap process after all other extension APIs have been called. */
   onPostBootstrap?(
     args: ParentSpanPluginArgs,
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /** The last extension point called after all other parts of the build process are complete. */
   onPostBuild?(
     args: BuildArgs,
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /** Called at the end of the bootstrap process after all other extension APIs have been called. */
   onPreBootstrap?(
     args: ParentSpanPluginArgs,
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /** The first extension point called during the build process. Called after the bootstrap has completed but before the build steps start. */
   onPreBuild?(
     args: BuildArgs,
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /** Called once Gatsby has initialized itself and is ready to bootstrap your site. */
   onPreExtractQueries?(
     args: ParentSpanPluginArgs,
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /** The first API called during Gatsby execution, runs as soon as plugins are loaded, before cache initialization and bootstrap preparation. */
   onPreInit?(
     args: ParentSpanPluginArgs,
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /**
    * Ask compile-to-js plugins to process source to JavaScript so the query
@@ -381,9 +384,9 @@ export interface GatsbyNode {
    */
   preprocessSource?(
     args: PreprocessSourceArgs,
-    options?: PluginOptions,
-    callback?: PluginCallback
-  ): void
+    options: PluginOptions,
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /**
    * Lets plugins implementing support for other compile-to-js add to the list of "resolvable" file extensions. Gatsby supports `.js` and `.jsx` by default.
@@ -391,8 +394,8 @@ export interface GatsbyNode {
   resolvableExtensions?(
     args: ResolvableExtensionsArgs,
     options: PluginOptions,
-    callback: PluginCallback
-  ): any[] | Promise<any[]>
+    callback: PluginCallback<Array<string>>
+  ): Array<string> | Promise<Array<string>>
 
   /**
    * Called during the creation of the GraphQL schema. Allows plugins
@@ -413,19 +416,11 @@ export interface GatsbyNode {
    *
    * @see https://www.gatsbyjs.org/docs/node-apis/#setFieldsOnGraphQLNodeType
    */
-  setFieldsOnGraphQLNodeType?(
-    args: SetFieldsOnGraphQLNodeTypeArgs,
-    options: PluginOptions
-  ): any
-  setFieldsOnGraphQLNodeType?(
-    args: SetFieldsOnGraphQLNodeTypeArgs,
-    options: PluginOptions
-  ): Promise<any>
   setFieldsOnGraphQLNodeType?(
     args: SetFieldsOnGraphQLNodeTypeArgs,
     options: PluginOptions,
-    callback: PluginCallback
-  ): void
+    callback: PluginCallback<any>
+  ): any
 
   /**
    * Extension point to tell plugins to source nodes. This API is called during
@@ -437,13 +432,11 @@ export interface GatsbyNode {
    *
    * @see https://www.gatsbyjs.org/docs/node-apis/#sourceNodes
    */
-  sourceNodes?(args: SourceNodesArgs, options: PluginOptions): any
-  sourceNodes?(args: SourceNodesArgs, options: PluginOptions): Promise<any>
   sourceNodes?(
     args: SourceNodesArgs,
     options: PluginOptions,
-    callback: PluginCallback
-  ): void
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /**
    * Add custom field resolvers to the GraphQL schema.
@@ -482,16 +475,11 @@ export interface GatsbyNode {
    *
    * @see https://www.gatsbyjs.org/docs/node-apis/#createResolvers
    */
-  createResolvers?(args: CreateResolversArgs, options: PluginOptions): any
-  createResolvers?(
-    args: CreateResolversArgs,
-    options: PluginOptions
-  ): Promise<any>
   createResolvers?(
     args: CreateResolversArgs,
     options: PluginOptions,
-    callback: PluginCallback
-  ): void
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /**
    * Customize Gatsby’s GraphQL schema by creating type definitions, field extensions or adding third-party schemas.
@@ -503,19 +491,11 @@ export interface GatsbyNode {
    * to customize added third-party types, use the createResolvers API.
    * @see https://www.gatsbyjs.org/docs/node-apis/#createSchemaCustomization
    */
-  createSchemaCustomization?(
-    args: CreateSchemaCustomizationArgs,
-    options: PluginOptions
-  ): any
-  createSchemaCustomization?(
-    args: CreateSchemaCustomizationArgs,
-    options: PluginOptions
-  ): Promise<any>
   createSchemaCustomization?(
     args: CreateSchemaCustomizationArgs,
     options: PluginOptions,
-    callback: PluginCallback
-  ): void
+    callback: PluginCallback<void>
+  ): void | Promise<void>
 
   /**
    * Add a Joi schema for the possible options of your plugin.
@@ -529,52 +509,65 @@ export interface GatsbyNode {
  *
  * @see https://www.gatsbyjs.org/docs/browser-apis/
  */
-export interface GatsbyBrowser {
-  disableCorePrefetching?(args: BrowserPluginArgs, options: PluginOptions): any
-  onClientEntry?(args: BrowserPluginArgs, options: PluginOptions): any
-  onInitialClientRender?(args: BrowserPluginArgs, options: PluginOptions): any
+export interface GatsbyBrowser<
+  DataType = Record<string, unknown>,
+  PageContext = Record<string, unknown>,
+  LocationState = WindowLocation["state"]
+> {
+  disableCorePrefetching?(
+    args: BrowserPluginArgs,
+    options: PluginOptions
+  ): boolean
+  onClientEntry?(args: BrowserPluginArgs, options: PluginOptions): void
+  onInitialClientRender?(args: BrowserPluginArgs, options: PluginOptions): void
   onPostPrefetchPathname?(
     args: PrefetchPathnameArgs,
     options: PluginOptions
-  ): any
-  onPreRouteUpdate?(args: RouteUpdateArgs, options: PluginOptions): any
-  onPrefetchPathname?(args: PrefetchPathnameArgs, options: PluginOptions): any
-  onRouteUpdate?(args: RouteUpdateArgs, options: PluginOptions): any
+  ): void
+  onPreRouteUpdate?(args: RouteUpdateArgs, options: PluginOptions): void
+  onPrefetchPathname?(args: PrefetchPathnameArgs, options: PluginOptions): void
+  onRouteUpdate?(args: RouteUpdateArgs, options: PluginOptions): void
   onRouteUpdateDelayed?(
     args: RouteUpdateDelayedArgs,
     options: PluginOptions
-  ): any
-  onServiceWorkerActive?(args: ServiceWorkerArgs, options: PluginOptions): any
+  ): void
+  onServiceWorkerActive?(args: ServiceWorkerArgs, options: PluginOptions): void
   onServiceWorkerInstalled?(
     args: ServiceWorkerArgs,
     options: PluginOptions
-  ): any
+  ): void
   onServiceWorkerRedundant?(
     args: ServiceWorkerArgs,
     options: PluginOptions
-  ): any
+  ): void
   onServiceWorkerUpdateFound?(
     args: ServiceWorkerArgs,
     options: PluginOptions
-  ): any
+  ): void
   onServiceWorkerUpdateReady?(
     args: ServiceWorkerArgs,
     options: PluginOptions
-  ): any
-  registerServiceWorker?(args: BrowserPluginArgs, options: PluginOptions): any
+  ): void
+  registerServiceWorker?(
+    args: BrowserPluginArgs,
+    options: PluginOptions
+  ): boolean
   replaceHydrateFunction?(
     args: BrowserPluginArgs,
     options: PluginOptions
   ): Renderer
-  shouldUpdateScroll?(args: ShouldUpdateScrollArgs, options: PluginOptions): any
+  shouldUpdateScroll?(
+    args: ShouldUpdateScrollArgs,
+    options: PluginOptions
+  ): boolean | [number, number] | string
   wrapPageElement?(
-    args: WrapPageElementBrowserArgs,
+    args: WrapPageElementBrowserArgs<DataType, PageContext, LocationState>,
     options: PluginOptions
-  ): any
+  ): React.ReactElement
   wrapRootElement?(
     args: WrapRootElementBrowserArgs,
     options: PluginOptions
-  ): any
+  ): React.ReactElement
 }
 
 /**
@@ -582,7 +575,10 @@ export interface GatsbyBrowser {
  *
  * @see https://www.gatsbyjs.org/docs/ssr-apis/
  */
-export interface GatsbySSR {
+export interface GatsbySSR<
+  DataSet = Record<string, unknown>,
+  PageContext = Record<string, unknown>
+> {
   /**
    * Called after every page Gatsby server renders while building HTML so you can
    * replace head components to be rendered in your `html.js`. This is useful if
@@ -602,16 +598,7 @@ export interface GatsbySSR {
    *   replaceHeadComponents(headComponents)
    * }
    */
-  onPreRenderHTML?(args: PreRenderHTMLArgs, options: PluginOptions): any
-  onPreRenderHTML?(
-    args: PreRenderHTMLArgs,
-    options: PluginOptions
-  ): Promise<any>
-  onPreRenderHTML?(
-    args: PreRenderHTMLArgs,
-    options: PluginOptions,
-    callback: PluginCallback
-  ): void
+  onPreRenderHTML?(args: PreRenderHTMLArgs, options: PluginOptions): void
 
   /**
    * Called after every page Gatsby server renders while building HTML so you can
@@ -650,13 +637,7 @@ export interface GatsbySSR {
    *   ])
    * }
    */
-  onRenderBody?(args: RenderBodyArgs, options: PluginOptions): any
-  onRenderBody?(args: RenderBodyArgs, options: PluginOptions): Promise<any>
-  onRenderBody?(
-    args: RenderBodyArgs,
-    options: PluginOptions,
-    callback: PluginCallback
-  ): void
+  onRenderBody?(args: RenderBodyArgs, options: PluginOptions): void
 
   /**
    * Replace the default server renderer. This is useful for integration with
@@ -674,16 +655,7 @@ export interface GatsbySSR {
    *   replaceBodyHTMLString(inlinedHTML)
    * }
    */
-  replaceRenderer?(args: ReplaceRendererArgs, options: PluginOptions): any
-  replaceRenderer?(
-    args: ReplaceRendererArgs,
-    options: PluginOptions
-  ): Promise<any>
-  replaceRenderer?(
-    args: ReplaceRendererArgs,
-    options: PluginOptions,
-    callback: PluginCallback
-  ): void
+  replaceRenderer?(args: ReplaceRendererArgs, options: PluginOptions): void
 
   /**
    * Allow a plugin to wrap the page element.
@@ -702,16 +674,11 @@ export interface GatsbySSR {
    *   return <Layout {...props}>{element}</Layout>
    * }
    */
-  wrapPageElement?(args: WrapPageElementNodeArgs, options: PluginOptions): any
   wrapPageElement?(
-    args: WrapPageElementNodeArgs,
+    args: WrapPageElementNodeArgs<DataSet, PageContext>,
     options: PluginOptions
-  ): Promise<any>
-  wrapPageElement?(
-    args: WrapPageElementNodeArgs,
-    options: PluginOptions,
-    callback: PluginCallback
-  ): void
+  ): React.ReactElement
+
   /**
    * Allow a plugin to wrap the root element.
    *
@@ -734,16 +701,10 @@ export interface GatsbySSR {
    *   )
    * }
    */
-  wrapRootElement?(args: WrapRootElementNodeArgs, options: PluginOptions): any
   wrapRootElement?(
     args: WrapRootElementNodeArgs,
     options: PluginOptions
-  ): Promise<any>
-  wrapRootElement?(
-    args: WrapRootElementNodeArgs,
-    options: PluginOptions,
-    callback: PluginCallback
-  ): void
+  ): React.ReactElement
 }
 
 export interface PluginOptions {
@@ -751,7 +712,7 @@ export interface PluginOptions {
   [key: string]: unknown
 }
 
-export type PluginCallback = (err: Error | null, result?: any) => void
+export type PluginCallback<R = any> = (err: Error | null, result?: R) => void
 
 export interface CreatePagesArgs extends ParentSpanPluginArgs {
   graphql<TData, TVariables = any>(
@@ -779,9 +740,10 @@ export interface CreateDevServerArgs extends ParentSpanPluginArgs {
   app: any
 }
 
-export interface CreateNodeArgs<TNode extends object = {}>
-  extends ParentSpanPluginArgs {
-  node: Node & TNode
+export interface CreateNodeArgs<
+  TNode extends Record<string, unknown> = Record<string, unknown>
+> extends ParentSpanPluginArgs {
+  node: Node<TNode>
   traceId: string
   traceTags: {
     nodeId: string
@@ -925,16 +887,16 @@ export interface ReplaceRendererArgs extends NodePluginArgs {
 }
 
 export interface WrapPageElementNodeArgs<
-  DataType = object,
-  PageContextType = object
+  DataType = Record<string, unknown>,
+  PageContextType = Record<string, unknown>
 > extends NodePluginArgs {
-  element: object
+  element: React.ReactElement
   props: PageProps<DataType, PageContextType>
   pathname: string
 }
 
 export interface WrapRootElementNodeArgs extends NodePluginArgs {
-  element: object
+  element: React.ReactElement
 }
 
 export interface ParentSpanPluginArgs extends NodePluginArgs {
@@ -1121,8 +1083,8 @@ export interface Actions {
   deleteNode(node: NodeInput, plugin?: ActionPlugin): void
 
   /** @see https://www.gatsbyjs.org/docs/actions/#createNode */
-  createNode(
-    node: NodeInput,
+  createNode<TNode = Record<string, unknown>>(
+    node: NodeInput & TNode,
     plugin?: ActionPlugin,
     options?: ActionOptions
   ): void
@@ -1450,15 +1412,16 @@ export interface ShouldUpdateScrollArgs extends BrowserPluginArgs {
 }
 
 export interface WrapPageElementBrowserArgs<
-  DataType = object,
-  PageContextType = object
+  DataType = Record<string, unknown>,
+  PageContextType = Record<string, unknown>,
+  LocationState = WindowLocation["state"]
 > extends BrowserPluginArgs {
-  element: object
-  props: PageProps<DataType, PageContextType>
+  element: React.ReactElement
+  props: PageProps<DataType, PageContextType, LocationState>
 }
 
 export interface WrapRootElementBrowserArgs extends BrowserPluginArgs {
-  element: object
+  element: React.ReactElement
   pathname: string
 }
 
diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json
index 5e46d79a64e62..cf9e7c9ec9d8a 100644
--- a/packages/gatsby/package.json
+++ b/packages/gatsby/package.json
@@ -37,7 +37,6 @@
     "babel-plugin-remove-graphql-queries": "^3.5.0-next.0",
     "babel-preset-gatsby": "^1.5.0-next.0",
     "better-opn": "^2.0.0",
-    "better-queue": "^3.8.10",
     "bluebird": "^3.7.2",
     "body-parser": "^1.19.0",
     "browserslist": "^4.12.2",
diff --git a/packages/gatsby/src/query/__tests__/better-queue-custom-store.ts b/packages/gatsby/src/query/__tests__/better-queue-custom-store.ts
deleted file mode 100644
index 7b3171001ed33..0000000000000
--- a/packages/gatsby/src/query/__tests__/better-queue-custom-store.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-import { memoryStoreWithPriorityBuckets } from "../better-queue-custom-store"
-import pify from "pify"
-
-// those are tests copied from https://github.com/diamondio/better-queue-store-test/blob/master/tester.js
-// and converted from mocha to jest + used pify to make it nicer to read than callback chain
-describe(`Custom better-queue memory store`, () => {
-  let store
-
-  const functions = [
-    `connect`,
-    `getTask`,
-    `putTask`,
-    `deleteTask`,
-    `takeFirstN`,
-    `takeLastN`,
-    `getLock`,
-    `getRunningTasks`,
-    `releaseLock`,
-  ]
-  beforeEach(() => {
-    store = memoryStoreWithPriorityBuckets()
-    functions.forEach(fnName => {
-      if (store[fnName]) {
-        store[fnName] = pify(store[fnName])
-      }
-    })
-  })
-
-  it(`all required functions exist`, () => {
-    functions.forEach(fnName => {
-      expect(typeof store[fnName]).toBe(`function`)
-    })
-  })
-
-  it(`connect starts empty`, async () => {
-    const len = await store.connect()
-    expect(len).toBe(0)
-  })
-
-  it(`put and get`, async () => {
-    await store.connect()
-    await store.putTask(`test`, { value: `secret` }, 1)
-
-    const task = await store.getTask(`test`)
-    expect(task.value).toBe(`secret`)
-  })
-
-  it(`put 3, take last 2, take last 2`, async () => {
-    await store.connect()
-    await store.putTask(`task1`, { value: `secret 1` }, 1)
-    await store.putTask(`task2`, { value: `secret 2` }, 1)
-    await store.putTask(`task3`, { value: `secret 3` }, 1)
-
-    let lockId: string = await store.takeLastN(2)
-    let tasks: any = await store.getLock(lockId)
-
-    // should get the third task
-    expect(tasks.task3.value).toBe(`secret 3`)
-    // should get the second task
-    expect(tasks.task2.value).toBe(`secret 2`)
-    // should not get the first task
-    expect(tasks.task1).toBeUndefined()
-
-    lockId = await store.takeLastN(2)
-    tasks = await store.getLock(lockId)
-
-    // should not get the third task
-    expect(tasks.task3).toBeUndefined()
-    // should not get the second task
-    expect(tasks.task2).toBeUndefined()
-    // should get the first task
-    expect(tasks.task1.value).toBe(`secret 1`)
-  })
-
-  it(`put 3, take first 2, take first 2`, async () => {
-    await store.connect()
-    await store.putTask(`task1`, { value: `secret 1` }, 1)
-    await store.putTask(`task2`, { value: `secret 2` }, 1)
-    await store.putTask(`task3`, { value: `secret 3` }, 1)
-
-    let lockId = await store.takeFirstN(2)
-    let tasks = await store.getLock(lockId)
-
-    // should get the first task
-    expect(tasks.task1.value).toBe(`secret 1`)
-    // should get the second task
-    expect(tasks.task2.value).toBe(`secret 2`)
-    // should not get the third task
-    expect(tasks.task3).toBeUndefined()
-
-    lockId = await store.takeFirstN(2)
-    tasks = await store.getLock(lockId)
-
-    // should not get the first task
-    expect(tasks.task1).toBeUndefined()
-    // should not get the second task
-    expect(tasks.task2).toBeUndefined()
-    // should get the third task
-    expect(tasks.task3.value).toBe(`secret 3`)
-  })
-
-  it(`get and release workers`, async () => {
-    await store.connect()
-    await store.putTask(`task1`, { value: `secret 1` }, 1)
-    await store.putTask(`task2`, { value: `secret 2` }, 1)
-    await store.putTask(`task3`, { value: `secret 3` }, 1)
-
-    const lock1: string = await store.takeFirstN(1)
-    const lock2: string = await store.takeLastN(1)
-
-    let workers = await store.getRunningTasks()
-
-    // should have first lock
-    expect(workers[lock1]).toBeDefined()
-    // should have second lock
-    expect(workers[lock2]).toBeDefined()
-    // should have two workers
-    expect(Object.keys(workers).length).toBe(2)
-    // should have task1
-    expect(workers[lock1].task1.value).toBe(`secret 1`)
-    // should have task3
-    expect(workers[lock2].task3.value).toBe(`secret 3`)
-
-    await store.releaseLock(lock1)
-    await store.releaseLock(lock2)
-
-    workers = await store.getRunningTasks()
-
-    // should not have lock 1
-    expect(workers[lock1]).toBeUndefined()
-    // should not have lock 2
-    expect(workers[lock2]).toBeUndefined()
-    // should have no workers
-    expect(Object.keys(workers).length).toBe(0)
-  })
-
-  it(`put 4, delete 1, take first 2`, async () => {
-    await store.connect()
-    await store.putTask(`task1`, { value: `secret 1` }, 1)
-    await store.putTask(`task2`, { value: `secret 2` }, 1)
-    await store.putTask(`task3`, { value: `secret 3` }, 1)
-    await store.putTask(`task4`, { value: `secret 4` }, 1)
-
-    // Remove the second
-    await store.deleteTask(`task2`)
-
-    // take 2
-    const lockId: string = await store.takeFirstN(2)
-    const tasks = await store.getLock(lockId)
-
-    // should get the first task
-    expect(tasks.task1.value).toBe(`secret 1`)
-    // should not get the second task
-    expect(tasks.task2).toBeUndefined()
-    // should get the third task
-    expect(tasks.task3.value).toBe(`secret 3`)
-    // should not get the fourth task
-    expect(tasks.task4).toBeUndefined()
-  })
-
-  // extra tests to cover priority
-  it(`handles priority`, async () => {
-    await store.connect()
-    await store.putTask(`task1`, { value: `secret 1` }, 1)
-    await store.putTask(`task2`, { value: `secret 2` }, 3)
-    await store.putTask(`task3`, { value: `secret 3` }, 4)
-    await store.putTask(`task4`, { value: `secret 4` }, 2)
-
-    // take first 2
-    let lockId: string = await store.takeFirstN(2)
-    let tasks = await store.getLock(lockId)
-
-    // should get the third task
-    expect(tasks.task3.value).toBe(`secret 3`)
-    // should get the second task
-    expect(tasks.task2.value).toBe(`secret 2`)
-    // should not get first task
-    expect(tasks.task1).toBeUndefined()
-    // should not get the fourth task
-    expect(tasks.task4).toBeUndefined()
-
-    // take last 1
-    lockId = await store.takeLastN(1)
-    tasks = await store.getLock(lockId)
-
-    // should get the first task
-    expect(tasks.task1.value).toBe(`secret 1`)
-    // should not get second task
-    expect(tasks.task2).toBeUndefined()
-    // should not get third task
-    expect(tasks.task3).toBeUndefined()
-    // should not get the fourth task
-    expect(tasks.task4).toBeUndefined()
-  })
-})
diff --git a/packages/gatsby/src/query/better-queue-custom-store.ts b/packages/gatsby/src/query/better-queue-custom-store.ts
deleted file mode 100644
index 4b90626f65061..0000000000000
--- a/packages/gatsby/src/query/better-queue-custom-store.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-import { Store } from "better-queue"
-
-export function memoryStoreWithPriorityBuckets<T>(): Store<T> {
-  type RunningTasks = Record<string, T>
-  let uuid = 0
-
-  /**
-   * Task ids grouped by priority
-   */
-  const queueMap = new Map<number, Array<string>>()
-
-  /**
-   * Task id to task lookup
-   */
-  const tasks = new Map<string, T>()
-
-  /**
-   * Task id to priority lookup
-   */
-  const taskIdToPriority = new Map<string, number>()
-
-  /**
-   * Lock to running tasks object
-   */
-  const running: Record<string, RunningTasks> = {}
-
-  let priorityKeys: Array<number> = []
-  const updatePriorityKeys = (): void => {
-    priorityKeys = Array.from(queueMap.keys()).sort((a, b) => b - a)
-  }
-
-  const addTaskWithPriority = (taskId: string, priority: number): boolean => {
-    let needToUpdatePriorityKeys = false
-    let priorityTasks = queueMap.get(priority)
-    if (!priorityTasks) {
-      priorityTasks = []
-      queueMap.set(priority, priorityTasks)
-      needToUpdatePriorityKeys = true
-    }
-
-    taskIdToPriority.set(taskId, priority)
-    priorityTasks.push(taskId)
-    return needToUpdatePriorityKeys
-  }
-
-  return {
-    connect: function (cb): void {
-      cb(null, tasks.size)
-    },
-    getTask: function (taskId, cb): void {
-      // @ts-ignore
-      cb(null, tasks.get(taskId))
-    },
-    deleteTask: function (taskId, cb): void {
-      if (tasks.get(taskId)) {
-        tasks.delete(taskId)
-        const priority = taskIdToPriority.get(taskId)
-        if (priority) {
-          const priorityTasks = queueMap.get(priority) ?? []
-          priorityTasks.splice(priorityTasks.indexOf(taskId), 1)
-          taskIdToPriority.delete(taskId)
-        }
-      }
-      cb()
-    },
-    putTask: function (taskId, task, priority = 0, cb): void {
-      const oldTask = tasks.get(taskId)
-      tasks.set(taskId, task)
-      let needToUpdatePriorityKeys = false
-      if (oldTask) {
-        const oldPriority = taskIdToPriority.get(taskId)
-
-        if (oldPriority && oldPriority !== priority) {
-          const oldPriorityTasks = queueMap.get(oldPriority) ?? []
-          oldPriorityTasks.splice(oldPriorityTasks.indexOf(taskId), 1)
-
-          if (
-            addTaskWithPriority(taskId, priority) // ||
-            // oldPriorityTasks.length === 0
-          ) {
-            needToUpdatePriorityKeys = true
-          }
-        }
-      } else {
-        needToUpdatePriorityKeys = addTaskWithPriority(taskId, priority)
-      }
-
-      if (needToUpdatePriorityKeys) {
-        updatePriorityKeys()
-      }
-      cb(null)
-    },
-    takeFirstN: function (n, cb): void {
-      const lockId = String(uuid++)
-      let remainingTasks = n
-      let needToUpdatePriorityKeys = false
-      let haveSomeTasks = false
-      const tasksToRun: RunningTasks = {}
-
-      for (const priority of priorityKeys) {
-        const tasksWithSamePriority = queueMap.get(priority)
-        const grabbedTaskIds =
-          tasksWithSamePriority?.splice(0, remainingTasks) ?? []
-        grabbedTaskIds.forEach(taskId => {
-          // add task to task that will run
-          // and remove it from waiting list
-          const task = tasks.get(taskId)
-          if (task) {
-            tasksToRun[taskId] = task
-            tasks.delete(taskId)
-            taskIdToPriority.delete(taskId)
-            haveSomeTasks = true
-          }
-        })
-
-        remainingTasks -= grabbedTaskIds.length
-        if (tasksWithSamePriority?.length === 0) {
-          queueMap.delete(priority)
-          needToUpdatePriorityKeys = true
-        }
-        if (remainingTasks <= 0) {
-          break
-        }
-      }
-
-      if (needToUpdatePriorityKeys) {
-        updatePriorityKeys()
-      }
-
-      if (haveSomeTasks) {
-        running[lockId] = tasksToRun
-      }
-
-      cb(null, lockId)
-    },
-    takeLastN: function (n, cb): void {
-      // This is not really used by Gatsby, but will be implemented for
-      // completion in easiest possible way (so not very performant).
-      // Mostly done so generic test suite used by other stores passes.
-      // This is mostly C&P from takeFirstN, with array reversal and different
-      // splice args
-      const lockId = String(uuid++)
-      let remainingTasks = n
-      let needToUpdatePriorityKeys = false
-      let haveSomeTasks = false
-      const tasksToRun = {}
-
-      for (const priority of priorityKeys.reverse()) {
-        const tasksWithSamePriority = queueMap.get(priority) ?? []
-        const deleteCount = Math.min(
-          remainingTasks,
-          tasksWithSamePriority.length
-        )
-        const grabbedTaskIds = tasksWithSamePriority.splice(
-          tasksWithSamePriority.length - deleteCount,
-          deleteCount
-        )
-        grabbedTaskIds.forEach(taskId => {
-          // add task to task that will run
-          // and remove it from waiting list
-          tasksToRun[taskId] = tasks.get(taskId)
-          tasks.delete(taskId)
-          taskIdToPriority.delete(taskId)
-          haveSomeTasks = true
-        })
-
-        remainingTasks -= grabbedTaskIds.length
-        if (tasksWithSamePriority.length === 0) {
-          queueMap.delete(priority)
-          needToUpdatePriorityKeys = true
-        }
-        if (remainingTasks <= 0) {
-          break
-        }
-      }
-
-      if (needToUpdatePriorityKeys) {
-        updatePriorityKeys()
-      }
-
-      if (haveSomeTasks) {
-        running[lockId] = tasksToRun
-      }
-
-      cb(null, lockId)
-    },
-    // @ts-ignore
-    // getRunningTasks is an extension to the interface, and is only used in the tests
-    getRunningTasks: function (
-      cb: (err?: any, value?: Record<string, RunningTasks>) => void
-    ): void {
-      cb(null, running)
-    },
-    getLock: function (lockId, cb): void {
-      cb(null, running[lockId])
-    },
-    releaseLock: function (lockId, cb): void {
-      delete running[lockId]
-      cb(null)
-    },
-  }
-}
diff --git a/packages/gatsby/src/query/index.js b/packages/gatsby/src/query/index.js
index 37f02cbd64968..ba66598bfef2b 100644
--- a/packages/gatsby/src/query/index.js
+++ b/packages/gatsby/src/query/index.js
@@ -1,7 +1,19 @@
 const _ = require(`lodash`)
+const fastq = require(`fastq`)
 const { store } = require(`../redux`)
 const { hasFlag, FLAG_ERROR_EXTRACTION } = require(`../redux/reducers/queries`)
-const queryQueue = require(`./queue`)
+const { queryRunner } = require(`./query-runner`)
+const { websocketManager } = require(`../utils/websocket-manager`)
+const { GraphQLRunner } = require(`./graphql-runner`)
+
+if (process.env.GATSBY_EXPERIMENTAL_QUERY_CONCURRENCY) {
+  console.info(
+    `GATSBY_EXPERIMENTAL_QUERY_CONCURRENCY: Running with concurrency set to \`${process.env.GATSBY_EXPERIMENTAL_QUERY_CONCURRENCY}\``
+  )
+}
+
+const concurrency =
+  Number(process.env.GATSBY_EXPERIMENTAL_QUERY_CONCURRENCY) || 4
 
 /**
  * Calculates the set of dirty query IDs (page.paths, or staticQuery.id's).
@@ -9,7 +21,7 @@ const queryQueue = require(`./queue`)
  * Dirty state is tracked in `queries` reducer, here we simply filter
  * them from all tracked queries.
  */
-const calcDirtyQueryIds = state => {
+function calcDirtyQueryIds(state) {
   const { trackedQueries, trackedComponents, deletedQueries } = state.queries
 
   const queriesWithBabelErrors = new Set()
@@ -36,7 +48,7 @@ const calcDirtyQueryIds = state => {
 /**
  * groups queryIds by whether they are static or page queries.
  */
-const groupQueryIds = queryIds => {
+function groupQueryIds(queryIds) {
   const grouped = _.groupBy(queryIds, p =>
     p.slice(0, 4) === `sq--` ? `static` : `page`
   )
@@ -46,18 +58,83 @@ const groupQueryIds = queryIds => {
   }
 }
 
-const processQueries = async (
-  queryJobs,
-  { activity, graphqlRunner, graphqlTracing }
-) => {
-  const queue = queryQueue.createAppropriateQueue(graphqlRunner, {
-    graphqlTracing,
+function createQueue({
+  createJobFn,
+  state,
+  activity,
+  graphqlRunner,
+  graphqlTracing,
+}) {
+  if (!graphqlRunner) {
+    graphqlRunner = new GraphQLRunner(store, { graphqlTracing })
+  }
+  state = state || store.getState()
+
+  function worker(queryId, cb) {
+    const job = createJobFn(state, queryId)
+    if (!job) {
+      cb(null, undefined)
+      return
+    }
+    queryRunner(graphqlRunner, job, activity?.span)
+      .then(result => {
+        if (activity.tick) {
+          activity.tick()
+        }
+        cb(null, { job, result })
+      })
+      .catch(error => {
+        cb(error)
+      })
+  }
+  // Note: fastq.promise version is much slower
+  return fastq(worker, concurrency)
+}
+
+async function processQueries({
+  queryIds,
+  createJobFn,
+  onQueryDone,
+  state,
+  activity,
+  graphqlRunner,
+  graphqlTracing,
+}) {
+  return new Promise((resolve, reject) => {
+    const fastQueue = createQueue({
+      createJobFn,
+      state,
+      activity,
+      graphqlRunner,
+      graphqlTracing,
+    })
+
+    queryIds.forEach(queryId => {
+      fastQueue.push(queryId, (err, res) => {
+        if (err) {
+          fastQueue.kill()
+          reject(err)
+          return
+        }
+        if (res && onQueryDone) {
+          onQueryDone(res)
+        }
+      })
+    })
+
+    if (!fastQueue.idle()) {
+      fastQueue.drain = () => resolve()
+    } else {
+      resolve()
+    }
   })
-  return queryQueue.processBatch(queue, queryJobs, activity)
 }
 
-const createStaticQueryJob = (state, queryId) => {
+function createStaticQueryJob(state, queryId) {
   const component = state.staticQueryComponents.get(queryId)
+  if (!component) {
+    return undefined
+  }
   const { hash, id, query, componentPath } = component
   return {
     id: queryId,
@@ -68,48 +145,55 @@ const createStaticQueryJob = (state, queryId) => {
   }
 }
 
-const processStaticQueries = async (
-  queryIds,
-  { state, activity, graphqlRunner, graphqlTracing }
-) => {
-  state = state || store.getState()
-  await processQueries(
-    queryIds.map(id => createStaticQueryJob(state, id)),
-    {
-      activity,
-      graphqlRunner,
-      graphqlTracing,
-    }
-  )
+function onDevelopStaticQueryDone({ job, result }) {
+  websocketManager.emitStaticQueryData({
+    result,
+    id: job.hash,
+  })
 }
 
-const processPageQueries = async (
+async function processStaticQueries(
   queryIds,
   { state, activity, graphqlRunner, graphqlTracing }
-) => {
-  state = state || store.getState()
-  // Make sure we filter out pages that don't exist. An example is
-  // /dev-404-page/, whose SitePage node is created via
-  // `internal-data-bridge`, but the actual page object is only
-  // created during `gatsby develop`.
-
-  const jobs = []
-  queryIds.forEach(id => {
-    const page = state.pages.get(id)
-    if (page) {
-      const job = createPageQueryJob(state, page)
-      jobs.push(job)
-    }
+) {
+  return processQueries({
+    queryIds,
+    createJobFn: createStaticQueryJob,
+    onQueryDone:
+      process.env.NODE_ENV === `production`
+        ? undefined
+        : onDevelopStaticQueryDone,
+    state,
+    activity,
+    graphqlRunner,
+    graphqlTracing,
   })
+}
 
-  await processQueries(jobs, {
+async function processPageQueries(
+  queryIds,
+  { state, activity, graphqlRunner, graphqlTracing }
+) {
+  return processQueries({
+    queryIds,
+    createJobFn: createPageQueryJob,
+    state,
     activity,
     graphqlRunner,
     graphqlTracing,
   })
 }
 
-const createPageQueryJob = (state, page) => {
+function createPageQueryJob(state, queryId) {
+  const page = state.pages.get(queryId)
+
+  // Make sure we filter out pages that don't exist. An example is
+  // /dev-404-page/, whose SitePage node is created via
+  // `internal-data-bridge`, but the actual page object is only
+  // created during `gatsby develop`.
+  if (!page) {
+    return undefined
+  }
   const component = state.components.get(page.componentPath)
   const { path, componentPath, context } = page
   const { query } = component
diff --git a/packages/gatsby/src/query/queue.ts b/packages/gatsby/src/query/queue.ts
deleted file mode 100644
index 68152bae7602d..0000000000000
--- a/packages/gatsby/src/query/queue.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-import Queue from "better-queue"
-import { store } from "../redux"
-import { memoryStoreWithPriorityBuckets } from "../query/better-queue-custom-store"
-import { queryRunner } from "../query/query-runner"
-import { websocketManager } from "../utils/websocket-manager"
-import { GraphQLRunner, IGraphQLRunnerOptions } from "./graphql-runner"
-import BetterQueue from "better-queue"
-import { ProgressActivityTracker } from "../.."
-
-export type Task = any
-type TaskResult = any
-
-if (process.env.GATSBY_EXPERIMENTAL_QUERY_CONCURRENCY) {
-  console.info(
-    `GATSBY_EXPERIMENTAL_QUERY_CONCURRENCY: Running with concurrency set to \`${process.env.GATSBY_EXPERIMENTAL_QUERY_CONCURRENCY}\``
-  )
-}
-
-const createBaseOptions = (): Pick<
-  BetterQueue.QueueOptions<Task, TaskResult>,
-  "concurrent" | "store"
-> => {
-  return {
-    concurrent: Number(process.env.GATSBY_EXPERIMENTAL_QUERY_CONCURRENCY) || 4,
-    store: memoryStoreWithPriorityBuckets<Task>(),
-  }
-}
-
-const createBuildQueue = (
-  graphqlRunner: GraphQLRunner,
-  runnerOptions: IGraphQLRunnerOptions = {}
-): Queue => {
-  if (!graphqlRunner) {
-    graphqlRunner = new GraphQLRunner(store, runnerOptions)
-  }
-
-  const queueOptions: BetterQueue.QueueOptions<Task, TaskResult> = {
-    ...createBaseOptions(),
-    async process({ job, activity }, callback): Promise<void> {
-      try {
-        const result = await queryRunner(graphqlRunner, job, activity?.span)
-        callback(null, result)
-      } catch (e) {
-        callback(e)
-      }
-    },
-  }
-  return new Queue(queueOptions)
-}
-
-const createDevelopQueue = (getRunner: () => GraphQLRunner): Queue => {
-  const queueOptions: BetterQueue.QueueOptions<Task, TaskResult> = {
-    ...createBaseOptions(),
-    priority: ({ job }, cb): void => {
-      if (job.id && websocketManager.activePaths.has(job.id)) {
-        cb(null, 10)
-      } else {
-        cb(null, 1)
-      }
-    },
-    merge: (
-      _oldTask: Task,
-      newTask: Task,
-      cb: (err?: unknown, newTask?: Task) => void
-    ): void => {
-      cb(null, newTask)
-    },
-    async process({ job: queryJob, activity }, callback): Promise<void> {
-      try {
-        const result = await queryRunner(getRunner(), queryJob, activity?.span)
-        if (!queryJob.isPage) {
-          websocketManager.emitStaticQueryData({
-            result,
-            id: queryJob.hash,
-          })
-        }
-
-        callback(null, result)
-      } catch (e) {
-        callback(e)
-      }
-    },
-  }
-
-  return new Queue(queueOptions)
-}
-
-const createAppropriateQueue = (
-  graphqlRunner: GraphQLRunner,
-  runnerOptions: IGraphQLRunnerOptions = {}
-): Queue => {
-  if (process.env.NODE_ENV === `production`) {
-    return createBuildQueue(graphqlRunner, runnerOptions)
-  }
-  if (!graphqlRunner) {
-    graphqlRunner = new GraphQLRunner(store, runnerOptions)
-  }
-  return createDevelopQueue(() => graphqlRunner)
-}
-
-/**
- * Returns a promise that pushes jobs onto queue and resolves onces
- * they're all finished processing (or rejects if one or more jobs
- * fail)
- * Note: queue is reused in develop so make sure to thoroughly cleanup hooks
- */
-const processBatch = async (
-  queue: Queue<Task, TaskResult>,
-  jobs: Array<Task>,
-  activity: ProgressActivityTracker
-): Promise<unknown> => {
-  if (jobs.length === 0) {
-    return Promise.resolve()
-  }
-
-  return new Promise((resolve, reject) => {
-    let taskFinishCallback
-
-    const gc = (): void => {
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      queue.off(`task_failed`, taskFailedCallback)
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      queue.off(`drain`, drainCallback)
-      if (taskFinishCallback) {
-        queue.off(`task_finish`, taskFinishCallback)
-      }
-      // We don't want to allow the variable to be null any other time,
-      // just when marking it as eligible for garbage collection.
-      // @ts-ignore
-      queue = null
-    }
-
-    if (activity.tick) {
-      taskFinishCallback = (): unknown => activity.tick()
-      queue.on(`task_finish`, taskFinishCallback)
-    }
-
-    const taskFailedCallback = (...err: Array<unknown>): void => {
-      gc()
-      reject(err)
-    }
-
-    const drainCallback = (): void => {
-      gc()
-      resolve()
-    }
-
-    queue
-      // Note: the first arg is the path, the second the error
-      .on(`task_failed`, taskFailedCallback)
-      // Note: `drain` fires when all tasks _finish_
-      //       `empty` fires when queue is empty (but tasks are still running)
-      .on(`drain`, drainCallback)
-
-    jobs.forEach(job =>
-      queue.push({
-        job,
-        activity,
-      })
-    )
-  })
-}
-
-export {
-  createBuildQueue,
-  createDevelopQueue,
-  processBatch,
-  createAppropriateQueue,
-}