.circleci/config.yml

@@ -110,6 +110,8 @@ aliases:
       - lint
       - typecheck
       - unit_tests_node14
+      - unit_tests_node16
+      - unit_tests_node18
 
   e2e_tests_production_runtime_alias: &e2e_tests_production_runtime_alias
     <<: *e2e-executor
@@ -221,12 +223,23 @@ jobs:
       - run: yarn check-repo-fields
 
   unit_tests_node14:
-    # GATSBY_EXPERIMENTAL_LMDB_INDEXES is not activated yet
     executor:
       name: node
       image: "14.15.0"
     <<: *test_template
 
+  unit_tests_node16:
+    executor:
+      name: node
+      image: "16.15.0"
+    <<: *test_template
+
+  unit_tests_node18:
+    executor:
+      name: node
+      image: "18.2.0"
+    <<: *test_template
+
   integration_tests_gatsby_source_wordpress:
     machine:
       image: "ubuntu-2004:202107-02"
@@ -593,6 +606,18 @@ workflows:
             - lint
             - typecheck
             - bootstrap
+      - unit_tests_node16:
+          <<: *ignore_docs
+          requires:
+            - lint
+            - typecheck
+            - bootstrap
+      - unit_tests_node18:
+          <<: *ignore_docs
+          requires:
+            - lint
+            - typecheck
+            - bootstrap
       - integration_tests_gatsby_source_wordpress:
           <<: *e2e-test-workflow
       - integration_tests_node_manifest:

.github/workflows/schedule-stale.yml

@@ -2,8 +2,13 @@ name: Stale Bot
 on:
   schedule:
     - cron: "0 */12 * * *"
+permissions:
+  contents: read
 jobs:
   stale:
+    permissions:
+      contents: read
+      issues: write
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2

.jestSetup.js

@@ -1,4 +1,5 @@
 process.env.GATSBY_RECIPES_NO_COLOR = "true"
+process.env.GATSBY_SHOULD_TRACK_IMAGE_CDN_URLS = "true"
 
 // Potrace has a dependency on giwrap which has a process.nextTick as a sideEffect which messes up with jest.
 jest.mock(`gifwrap`, () => jest.fn())

.yarnrc

@@ -4,3 +4,5 @@
 
 "--install.ignore-engines" true
 yarn-path ".yarn/releases/yarn-1.21.0.js"
+
+registry "https://registry.yarnpkg.com"

benchmarks/create-pages/package.json

@@ -9,7 +9,7 @@
     "serve": "gatsby serve"
   },
   "dependencies": {
-    "gatsby": "^3.4.0",
+    "gatsby": "^4.14.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },

benchmarks/image-processing/plugins/gatsby-source-remote-images/gatsby-node.js

@@ -16,7 +16,6 @@ exports.sourceNodes = ({ actions, createNodeId, store, cache }) =>
         fileNode = await createRemoteFileNode({
           url: url,
           parentNodeId: nodeId,
-          store,
           cache,
           createNode: actions.createNode,
           createNodeId,

benchmarks/source-agilitycms/gatsby-node.js

@@ -46,7 +46,6 @@ exports.onCreateNode = async ({
 				createNode, // helper function in gatsby-node to generate the node
 				createNodeId, // helper function in gatsby-node to generate the node id
 				cache, // Gatsby's cache
-				store, // Gatsby's redux store
 			})
 			// if the file was created, attach the new node to the parent node
 			if (fileNode) {

docs/docs/awesome-gatsby-resources.md

@@ -96,6 +96,8 @@ See the [unofficial list of themes](https://gatsbytemplates.io/)
 - [Headless WordPress: Why Gatsby Should Be Next on Your List of Things to Learn](https://deliciousbrains.com/gatsby-headless-wordpress/)
 - [Gatsby Tutorials \[video series\] — Michael Uloth](https://www.youtube.com/watch?v=jAa1wh5ATm0&list=PLHBEcHVSROXQQhXpNhmiVKKcw72Cc0V-U)
 - [Guiding Digital's "Gatsby" Playlist](https://www.youtube.com/playlist?list=PLlKF6nzQe39fzz4MHc19l8-PtSqyseqok)
+- [Image Processing in Gatsby](https://www.useanvil.com/blog/engineering/gatsby-image-processing/)
+- [Improving build times in Gatsby](https://www.useanvil.com/blog/engineering/build-times-in-a-static-site-generated-website/)
 
 ### German
 

docs/docs/how-to/custom-configuration/typescript.md

@@ -83,6 +83,8 @@ export const query = graphql`
 `
 ```
 
+If you don't want to manually type out `DataProps` you can use Gatsby's [GraphQL Typegen](/docs/how-to/local-development/graphql-typegen) feature.
+
 ### `gatsby-browser.tsx` / `gatsby-ssr.tsx`
 
 > Support added in `gatsby@4.8.0`
@@ -337,6 +339,8 @@ Progress on this is tracked in [Parcel #6925](https://github.com/parcel-bundler/
 
 TypeScript integration for pages is supported through automatically including [`gatsby-plugin-typescript`](/plugins/gatsby-plugin-typescript/). Visit that link to see configuration options and limitations of this setup.
 
+You can also use Gatsby's [GraphQL Typegen](/docs/how-to/local-development/graphql-typegen) feature to have type-safety for your GraphQL results and autocompletion in your favorite IDE.
+
 If you are new to TypeScript, check out these other resources to learn more:
 
 - [TypeScript Documentation](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)

docs/docs/how-to/images-and-media/working-with-video.md

@@ -73,7 +73,7 @@ If a Markdown page or post has a featured video, you might want to include a vid
 path: "/blog/my-first-post"
 date: "2019-03-27"
 title: "My first blog post"
-videoSourceURL: https://www.youtube.com/embed/dQw4w9WgXcQ
+videoSrcURL: https://www.youtube.com/embed/dQw4w9WgXcQ
 videoTitle: "Gatsby is Never Gonna Give You Up"
 ---
 ```

docs/docs/how-to/local-development/graphql-typegen.md

@@ -0,0 +1,224 @@
+---
+title: GraphQL Typegen
+examples:
+  - label: Using GraphQL Typegen
+    href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-graphql-typegen"
+---
+
+## Introduction
+
+If you're already using [Gatsby with TypeScript](/docs/how-to/custom-configuration/typescript) and manually typing the results of your queries, you'll learn in this guide how Gatsby's automatic GraphQL Typegen feature can make your life easier. By relying on the types that are generated by Gatsby itself and using autocompletion for GraphQL queries in your IDE you'll be able to write GraphQL queries quicker and safer.
+
+This feature was added in `gatsby@4.15.0`.
+
+## Prerequisites
+
+- A Gatsby project set up with `gatsby@4.15.0` or later.
+- The config option [`graphqlTypegen`](/docs/reference/config-files/gatsby-config/#graphqltypegen) set to `true` inside `gatsby-config`.
+  ```js:title=gatsby-config.js
+  module.exports = {
+    graphqlTypegen: true,
+  }
+  ```
+- A `tsconfig.json` in your project with `"include": ["./src/**/*"]` set. See [full `tsconfig.json` example](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-graphql-typegen/tsconfig.json).
+- Optional: If you use VSCode you may install the [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql).
+
+## Using the autogenerated `Queries` types
+
+For this example to work you'll have to have a `title` inside your `siteMetadata` (in `gatsby-config`).
+
+1. Start the development server with `gatsby develop`. Once the server is ready you should see a log message `Generating GraphQL and TypeScript types` at the bottom of your terminal.
+1. Gatsby created a type generation file which you should see at `src/gatsby-types.d.ts`. It contains the TypeScript types for your queries. Your `tsconfig.json` should include this file so that you can access the `namespace Queries` everywhere in your project.
+1. Create a new page at `src/pages/typegen.tsx` with the following contents:
+
+   ```tsx:title=src/pages/typegen.tsx
+   import * as React from "react"
+   import { graphql, PageProps } from "gatsby"
+
+   const TypegenPage = ({ data }: PageProps) => {
+     return (
+       <main style={pageStyles}>
+         <p>Site title: TODO</p>
+         <hr />
+         <p>Query Result:</p>
+         <pre>
+           <code>{JSON.stringify(data, null, 2)}</code>
+         </pre>
+       </main>
+     )
+   }
+
+   export default TypegenPage
+
+   export const query = graphql`
+     query TypegenPage {
+       site {
+         siteMetadata {
+           title
+         }
+       }
+     }
+   `
+   ```
+
+   It is important that your query has a name (here: `query TypegenPage {}`) as otherwise the automatic type generation doesn't work. We recommend naming the query the same as your React component and using [PascalCase](https://en.wiktionary.org/wiki/Pascal_case). You can enforce this requirement by using [`graphql-eslint`](#graphql-eslint).
+
+1. Access the `Queries` namespace and use the `TypegenPage` type in your React component like so:
+
+   ```tsx
+   ({ data }: PageProps<Queries.TypegenPage>)
+   ```
+
+   When you type out the site title like this you should get TypeScript IntelliSense:
+
+   ```tsx
+   <p>Site title: {data.site?.siteMetadata?.title}</p>
+   ```
+
+### Non-Nullable types
+
+As Gatsby [infers all fields](/docs/glossary#inference) — unless an explicit schema by the user is provided — they are nullable by default. For GraphQL Typegen this means that fields are possibly `null`. You can see this in the example above where you had to type `data.site?.siteMetadata?.title` as both `siteMetadata` and `title` are nullable.
+
+If you're sure that `siteMetadata.title` is always available you can use Gatsby's schema customization API to explicitly type your fields:
+
+```ts:title=gatsby-node.ts
+import { GatsbyNode } from "gatsby"
+
+export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"] = ({ actions }) => {
+  actions.createTypes(`
+    type Site {
+      siteMetadata: SiteMetadata!
+    }
+
+    type SiteMetadata {
+      title: String!
+    }
+  `)
+}
+```
+
+Read the [Customizing the GraphQL schema guide](/docs/reference/graphql-data-layer/schema-customization/) to learn how to explicitly define types in your site or source plugin.
+
+### Tips
+
+- When adding a new key to your GraphQL query you'll need to save the file before new TypeScript types are generated. The autogenerated files are only updated on file saves.
+- When using `gatsby-plugin-image` (and Image CDN) you'll get the correct TypeScript types for `gatsbyImageData` and `gatsbyImage` automatically.
+- We recommend adding `src/gatsby-types.d.ts` to your `.gitignore` as it's machine generated code and duplicated information that is already existent in e.g. your page queries.
+
+## Configuring the VSCode GraphQL plugin
+
+1. Install the [GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) in your VSCode.
+1. Create a `graphql.config.js` at the root of your project with the following contents:
+
+   ```js:title=graphql.config.js
+   module.exports = require("./.cache/typegen/graphql.config.json")
+   ```
+
+   The VSCode extension will pick up the `graphql.config.js` file and use the autogenerated file from Gatsby's `.cache` directory.
+   To learn more about `graphql.config.js` head to the [GraphQL Config documentation](https://www.graphql-config.com/docs/user/user-usage).
+
+1. Restart VSCode so that the GraphQL extension takes effect.
+1. Start the development server with `gatsby develop`.
+1. Go to any of your queries, e.g. a page query inside `src/pages` and use <kbd>Ctrl + Space</kbd> (or use <kbd>Shift + Space</kbd> as an alternate keyboard shortcut) to get autocompletion like in GraphiQL.
+
+### Multiple GraphQL projects
+
+If your repository has multiple GraphQL projects including Gatsby, you can configure it with the [`projects` key](https://www.graphql-config.com/docs/user/user-usage#projects):
+
+```js:title=graphql.config.js
+module.exports = {
+  projects: {
+    site: require("./.cache/typegen/graphql.config.json"),
+    other: {
+      // other config
+    }
+  }
+}
+```
+
+### Subdirectory
+
+If your Gatsby project is in a subdirectory, e.g. `site` your config should look like this:
+
+```js:title=graphql.config.js
+module.exports = require("./site/.cache/typegen/graphql.config.json")
+```
+
+## `graphql-eslint`
+
+You can optionally use [`graphql-eslint`](https://github.com/B2o5T/graphql-eslint) to lint your GraphQL queries. It seamlessly integrates with the `graphql.config.js` file you created in the other step.
+
+This guide assumes that you don't have any existing ESLint configuration yet. You'll need to adapt your configuration if you're already using ESLint and refer to [`graphql-eslint`'s documentation](https://github.com/B2o5T/graphql-eslint/tree/master/docs).
+
+1. Install dependencies
+
+   ```shell
+   npm install --save-dev eslint @graphql-eslint/eslint-plugin @typescript-eslint/eslint-plugin @typescript-eslint/parser
+   ```
+
+1. Edit your `package.json` to add two scripts:
+
+   ```json:title=package.json
+   {
+     "scripts": {
+       "lint": "eslint --ignore-path .gitignore .",
+       "lint:fix": "npm run lint -- --fix"
+     },
+   }
+   ```
+
+1. Create a `.eslintrc.js` file to configure ESLint:
+
+   ```js:title=.eslintrc.js
+   module.exports = {
+     root: true,
+     overrides: [
+       {
+         files: ['*.ts', '*.tsx'],
+         processor: '@graphql-eslint/graphql',
+         parser: "@typescript-eslint/parser",
+         extends: [
+           "eslint:recommended",
+           "plugin:@typescript-eslint/recommended"
+         ],
+         env: {
+           es6: true,
+         },
+       },
+       {
+         files: ['*.graphql'],
+         parser: '@graphql-eslint/eslint-plugin',
+         plugins: ['@graphql-eslint'],
+         rules: {
+           '@graphql-eslint/no-anonymous-operations': 'error',
+           '@graphql-eslint/naming-convention': [
+             'error',
+             {
+               OperationDefinition: {
+                 style: 'PascalCase',
+                 forbiddenPrefixes: ['Query', 'Mutation', 'Subscription', 'Get'],
+                 forbiddenSuffixes: ['Query', 'Mutation', 'Subscription'],
+               },
+             },
+           ],
+         },
+       },
+     ],
+   }
+   ```
+
+1. Create a `graphql.config.js` at the root of your project with the following contents:
+
+   ```js:title=graphql.config.js
+   module.exports = require("./.cache/typegen/graphql.config.json")
+   ```
+
+1. Start the Gatsby development server with `gatsby develop` and check that `.cache/typegen/graphql.config.json` was created.
+
+You can now use `npm run lint` and `npm run lint:fix` to check your GraphQL queries, e.g. if they are named.
+
+## Additional Resources
+
+- [Gatsby with TypeScript](/docs/how-to/custom-configuration/typescript)
+- [VSCode GraphQL Plugin](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql)
+- [IntelliJ GraphQL Plugin](https://plugins.jetbrains.com/plugin/8097-graphql)

docs/docs/how-to/local-development/javascript-tooling.md

@@ -4,9 +4,9 @@ title: Javascript tooling
 
 Gatsby offers support for the standard Javascript toolchain.
 
-## Typescript
+## TypeScript
 
-Gatsby supports [Typescript](https://www.typescriptlang.org/) automatically, with the [ability to modify the default configuration](/plugins/gatsby-plugin-typescript/) if desired.
+Gatsby supports [TypeScript](https://www.typescriptlang.org/) automatically, with the [ability to modify the default configuration](/plugins/gatsby-plugin-typescript/) if desired. Gatsby also supports [GraphQL Typegen](/docs/how-to/local-development/graphql-typegen).
 
 ## Bundling and transpilation