Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: gatsbyjs/gatsby
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: gatsby-plugin-feed@4.15.1
Choose a base ref
...
head repository: gatsbyjs/gatsby
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: gatsby-plugin-feed@4.16.0
Choose a head ref

Commits on May 20, 2022

  1. chore(release): Publish next pre-minor

     - babel-plugin-remove-graphql-queries@4.16.0-next.0
     - babel-preset-gatsby-package@2.16.0-next.0
     - babel-preset-gatsby@2.16.0-next.0
     - create-gatsby@2.16.0-next.0
     - gatsby-cli@4.16.0-next.0
     - gatsby-codemods@3.16.0-next.0
     - gatsby-core-utils@3.16.0-next.0
     - gatsby-cypress@2.16.0-next.0
     - gatsby-design-tokens@4.16.0-next.0
     - gatsby-dev-cli@4.16.0-next.0
     - gatsby-graphiql-explorer@2.16.0-next.0
     - gatsby-legacy-polyfills@2.16.0-next.0
     - gatsby-link@4.16.0-next.0
     - gatsby-page-utils@2.16.0-next.0
     - gatsby-parcel-config@0.7.0-next.0
     - @gatsbyjs/parcel-namer-relative-to-cwd@1.1.0-next.0
     - gatsby-plugin-benchmark-reporting@2.16.0-next.0
     - gatsby-plugin-canonical-urls@4.16.0-next.0
     - gatsby-plugin-catch-links@4.16.0-next.0
     - gatsby-plugin-coffeescript@4.16.0-next.0
     - gatsby-plugin-cxs@4.16.0-next.0
     - gatsby-plugin-emotion@7.16.0-next.0
     - gatsby-plugin-facebook-analytics@4.16.0-next.0
     - gatsby-plugin-feed@4.16.0-next.0
     - gatsby-plugin-flow@3.16.0-next.0
     - gatsby-plugin-fullstory@4.16.0-next.0
     - gatsby-plugin-gatsby-cloud@4.16.0-next.0
     - gatsby-plugin-google-analytics@4.16.0-next.0
     - gatsby-plugin-google-gtag@4.16.0-next.0
     - gatsby-plugin-google-tagmanager@4.16.0-next.0
     - gatsby-plugin-image@2.16.0-next.0
     - gatsby-plugin-jss@4.16.0-next.0
     - gatsby-plugin-layout@3.16.0-next.0
     - gatsby-plugin-less@6.16.0-next.0
     - gatsby-plugin-lodash@5.16.0-next.0
     - gatsby-plugin-manifest@4.16.0-next.0
     - gatsby-plugin-mdx@3.16.0-next.0
     - gatsby-plugin-netlify-cms@6.16.0-next.0
     - gatsby-plugin-no-sourcemaps@4.16.0-next.0
     - gatsby-plugin-nprogress@4.16.0-next.0
     - gatsby-plugin-offline@5.16.0-next.0
     - gatsby-plugin-page-creator@4.16.0-next.0
     - gatsby-plugin-postcss@5.16.0-next.0
     - gatsby-plugin-preact@6.16.0-next.0
     - gatsby-plugin-preload-fonts@3.16.0-next.0
     - gatsby-plugin-react-css-modules@4.16.0-next.0
     - gatsby-plugin-react-helmet@5.16.0-next.0
     - gatsby-plugin-remove-trailing-slashes@4.16.0-next.0
     - gatsby-plugin-sass@5.16.0-next.0
     - gatsby-plugin-schema-snapshot@3.16.0-next.0
     - gatsby-plugin-sharp@4.16.0-next.0
     - gatsby-plugin-sitemap@5.16.0-next.0
     - gatsby-plugin-styled-components@5.16.0-next.0
     - gatsby-plugin-styled-jsx@5.16.0-next.0
     - gatsby-plugin-styletron@7.16.0-next.0
     - gatsby-plugin-stylus@4.16.0-next.0
     - gatsby-plugin-subfont@4.16.0-next.0
     - gatsby-plugin-twitter@4.16.0-next.0
     - gatsby-plugin-typescript@4.16.0-next.0
     - gatsby-plugin-typography@4.16.0-next.0
     - gatsby-plugin-utils@3.10.0-next.0
     - gatsby-react-router-scroll@5.16.0-next.0
     - gatsby-remark-autolink-headers@5.16.0-next.0
     - gatsby-remark-code-repls@6.16.0-next.0
     - gatsby-remark-copy-linked-files@5.16.0-next.0
     - gatsby-remark-custom-blocks@4.16.0-next.0
     - gatsby-remark-embed-snippet@7.16.0-next.0
     - gatsby-remark-graphviz@4.16.0-next.0
     - gatsby-remark-images-contentful@5.16.0-next.0
     - gatsby-remark-images@6.16.0-next.0
     - gatsby-remark-katex@6.16.0-next.0
     - gatsby-remark-prismjs@6.16.0-next.0
     - gatsby-remark-responsive-iframe@5.16.0-next.0
     - gatsby-remark-smartypants@5.16.0-next.0
     - gatsby-script@1.1.0-next.0
     - gatsby-sharp@0.10.0-next.0
     - gatsby-source-contentful@7.14.0-next.0
     - gatsby-source-drupal@5.17.0-next.0
     - gatsby-source-faker@4.16.0-next.0
     - gatsby-source-filesystem@4.16.0-next.0
     - gatsby-source-graphql@4.16.0-next.0
     - gatsby-source-hacker-news@4.16.0-next.0
     - gatsby-source-lever@4.16.0-next.0
     - gatsby-source-medium@4.16.0-next.0
     - gatsby-source-mongodb@4.16.0-next.0
     - gatsby-source-npm-package-search@4.16.0-next.0
     - gatsby-source-shopify@7.5.0-next.0
     - gatsby-source-wikipedia@4.16.0-next.0
     - gatsby-source-wordpress@6.16.0-next.0
     - gatsby-telemetry@3.16.0-next.0
     - gatsby-transformer-asciidoc@3.16.0-next.0
     - gatsby-transformer-csv@4.16.0-next.0
     - gatsby-transformer-documentationjs@6.16.0-next.0
     - gatsby-transformer-excel@4.16.0-next.0
     - gatsby-transformer-hjson@4.16.0-next.0
     - gatsby-transformer-javascript-frontmatter@4.16.0-next.0
     - gatsby-transformer-javascript-static-exports@4.16.0-next.0
     - gatsby-transformer-json@4.16.0-next.0
     - gatsby-transformer-pdf@3.16.0-next.0
     - gatsby-transformer-react-docgen@7.16.0-next.0
     - gatsby-transformer-remark@5.16.0-next.0
     - gatsby-transformer-screenshot@4.16.0-next.0
     - gatsby-transformer-sharp@4.16.0-next.0
     - gatsby-transformer-sqip@4.16.0-next.0
     - gatsby-transformer-toml@4.16.0-next.0
     - gatsby-transformer-xml@4.16.0-next.0
     - gatsby-transformer-yaml@4.16.0-next.0
     - gatsby-worker@1.16.0-next.0
     - gatsby@4.16.0-next.0
    pieh committed May 20, 2022
    Copy the full SHA
    81b82c8 View commit details

Commits on May 23, 2022

  1. Copy the full SHA
    85c720f View commit details
  2. Copy the full SHA
    5f0b2fe View commit details
  3. feat(gatsby-script): Duplicate script callbacks if no injected script…

    … callbacks (#35717)
    
    * refactor(gatsby-script): Only dedupe if id or src exists
    
    * test(gatsby-script): Add waitForRouteChange on visits
    
    * feat(gatsby-script): Execute duplicate script callbacks even if first script has no callbacks
    
    * chore(gatsby-script): Add comment about listener behavior
    
    * feat(gatsby-script): Adjust remove event listener logic
    tyhopp authored May 23, 2022
    Copy the full SHA
    f91f477 View commit details
  4. 2
    Copy the full SHA
    09caff8 View commit details
  5. Contentful: respect gatsby-plugin-image defaults and extend tests (#3…

    …3536)
    
    Co-authored-by: Ward Peeters <ward@coding-tech.com>
    axe312ger and wardpeet authored May 23, 2022
    Copy the full SHA
    2fc7732 View commit details
  6. Copy the full SHA
    08d6090 View commit details
  7. fix(gatsby-source-drupal): Add a check for data prop (#35719)

    Added a check for data.
    Danishkhurshid authored May 23, 2022
    Copy the full SHA
    0d1f44e View commit details

Commits on May 24, 2022

  1. chore(docs): Add GraphQL Typegen (#35584)

    Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru>
    LekoArts and Dimitri POSTOLOV authored May 24, 2022
    Copy the full SHA
    1c392e6 View commit details
  2. Copy the full SHA
    e84e69b View commit details
  3. chore(deps): update starters and examples (#35609)

    Co-authored-by: Renovate Bot <bot@renovateapp.com>
    renovate[bot] and renovate-bot authored May 24, 2022
    Copy the full SHA
    00300ff View commit details
  4. chore(stale-action): Add GitHub token permissions (#35713)

    * ci: add GitHub token permissions
    
    * remove comments
    
    Co-authored-by: Lennart <lekoarts@gmail.com>
    varunsh-coder and LekoArts authored May 24, 2022
    Copy the full SHA
    763940c View commit details
  5. chore(docs): Release Notes for 4.15 (#35720)

    * initial
    
    * add placeholders for script component and typegen key highlights
    
    * Gatsby script section
    
    * add typegen
    
    * add notable improvements and bugfixes
    
    * Remove script component line about Partytown forwards and proxy
    
    * Add experimental label to off-main-thread
    
    * Added quick .com stat for script
    
    Adding the initial perf gains we saw from a small use of the new script component on .com
    
    * update welcome parapgraph
    
    * add contributors section
    
    Co-authored-by: tyhopp <hopp.ty.c@gmail.com>
    Co-authored-by: Lennart <lekoarts@gmail.com>
    Co-authored-by: pragmaticpat <72818141+pragmaticpat@users.noreply.github.com>
    4 people authored May 24, 2022
    Copy the full SHA
    b6bc590 View commit details
  6. Copy the full SHA
    21dcb6d View commit details

Commits on May 25, 2022

  1. fix(deps): update starters and examples - gatsby (#35737)

    Co-authored-by: Renovate Bot <bot@renovateapp.com>
    renovate[bot] and renovate-bot authored May 25, 2022
    Copy the full SHA
    b1f37ca View commit details
  2. chore(changelogs): update changelogs (#35741)

    * chore(changelogs): update changelogs
    
    * format
    
    Co-authored-by: LekoArts <lekoarts@gmail.com>
    gatsbybot and LekoArts authored May 25, 2022
    Copy the full SHA
    9631549 View commit details
  3. Copy the full SHA
    eed274e View commit details
  4. chore(docs): Add gatsby-script to transformIgnorePatterns in Jest con…

    …fig (#35744)
    
    * chore(docs): Add note about adding gatsby-script to transformIgnorePatterns in Jest config
    
    * Move note to end
    tyhopp authored May 25, 2022
    Copy the full SHA
    6e15964 View commit details
  5. Copy the full SHA
    8b81d12 View commit details
  6. Copy the full SHA
    f698c09 View commit details

Commits on May 26, 2022

  1. feat(contentful): new useContentfulHook to create images on client si…

    …de (#29263)
    
    * feat(contentful): new useContentfulHook to create images on client side
    
    * WIP - simplify based on new gatsby-plugin-image helpers
    
    * align to latest gatsby-plugin-image changes
    
    * add tests and make it work on SSR & browser
    
    * remove unnecessary export
    
    * add to readme
    
    * cleanup
    
    * test: update snapshots
    
    * fix: ensure auto format is properly translated to Contentful Image API
    
    * fix: use browser URLSearchParams and fall back to node
    
    * Update packages/gatsby-source-contentful/README.md
    
    Co-authored-by: Tyler Barnes <tylerdbarnes@gmail.com>
    
    * test(contentful): extend tests to make more clear what they test for
    
    * perf: useMemo with tests
    
    * test(contenful-e2e): add missing key and alt attributes
    
    * build: add missing url dependency
    
    Co-authored-by: Tyler Barnes <tylerdbarnes@gmail.com>
    axe312ger and TylerBarnes authored May 26, 2022
    Copy the full SHA
    8d8a800 View commit details

Commits on May 27, 2022

  1. Copy the full SHA
    b491560 View commit details
  2. chore(docs): Improve gatsby-script reference docs (#35759)

    * chore(docs): Improve gatsby-script reference docs
    
    * Touch ups
    
    * Remove off-main-thread limitation on CSR
    
    * Adjust Partytown limitations wording
    
    * Update intro statement
    tyhopp authored May 27, 2022
    Copy the full SHA
    7ed2ccb View commit details
  3. fix(gatsby-starter-wordpress-blog): use latest packages (#35758)

    * use latest packages
    
    * add gatsby-plugin-image
    TylerBarnes authored May 27, 2022
    Copy the full SHA
    b2869d5 View commit details
  4. chore(gatsby-plugin-gatsby-cloud): add note about auto installation (#…

    …35766)
    
    add note about auto installation
    DanielSLew authored May 27, 2022
    Copy the full SHA
    1ea9358 View commit details

Commits on May 30, 2022

  1. Copy the full SHA
    34182da View commit details
  2. chore(deps): update starters and examples (#35773)

    Co-authored-by: Renovate Bot <bot@renovateapp.com>
    renovate[bot] and renovate-bot authored May 30, 2022
    Copy the full SHA
    ac5e5fb View commit details
  3. Copy the full SHA
    f814fc4 View commit details
  4. chore: Update starters to React 18 (#35743)

    update starters to react 18
    
    Co-authored-by: Ty Hopp <tyhopp@users.noreply.github.com>
    LekoArts and tyhopp authored May 30, 2022
    Copy the full SHA
    86f1e6f View commit details
  5. Copy the full SHA
    93f7f89 View commit details
  6. fix(deps): update starters and examples - gatsby (#35754)

    Co-authored-by: Renovate Bot <bot@renovateapp.com>
    renovate[bot] and renovate-bot authored May 30, 2022
    Copy the full SHA
    f9d91a0 View commit details
  7. Copy the full SHA
    ca09aa7 View commit details
  8. chore(starters): Add GraphQL Typegen option (#35781)

    * wip
    
    * add doc link
    LekoArts authored May 30, 2022
    Copy the full SHA
    bb01abb View commit details
  9. Copy the full SHA
    8608897 View commit details
  10. Copy the full SHA
    9eab90f View commit details
  11. Copy the full SHA
    54ea494 View commit details

Commits on May 31, 2022

  1. fix(gatsby-plugin-preload-fonts): disable cache (#34633)

    * fix(gatsby-plugin-preload-fonts): disable cache
    
    Closes #34632
    
    * fix(gatsby-plugin-preload-fonts): add func to mock
    
    Co-authored-by: Ward Peeters <ward@coding-tech.com>
    Co-authored-by: Kyle Mathews <mathews.kyle@gmail.com>
    3 people authored May 31, 2022
    Copy the full SHA
    e7db715 View commit details
  2. Copy the full SHA
    2d2b323 View commit details
  3. chore(release): Publish next

     - create-gatsby@2.16.0-next.1
     - gatsby-cli@4.16.0-next.1
     - gatsby-parcel-config@0.7.0-next.1
     - @gatsbyjs/parcel-namer-relative-to-cwd@1.1.0-next.1
     - gatsby-plugin-cxs@4.16.0-next.1
     - gatsby-plugin-feed@4.16.0-next.1
     - gatsby-plugin-flow@3.16.0-next.1
     - gatsby-plugin-gatsby-cloud@4.16.0-next.1
     - gatsby-plugin-google-tagmanager@4.16.0-next.1
     - gatsby-plugin-image@2.16.0-next.1
     - gatsby-plugin-manifest@4.16.0-next.1
     - gatsby-plugin-mdx@3.16.0-next.1
     - gatsby-plugin-offline@5.16.0-next.1
     - gatsby-plugin-page-creator@4.16.0-next.1
     - gatsby-plugin-preload-fonts@3.16.0-next.1
     - gatsby-plugin-sass@5.16.0-next.1
     - gatsby-plugin-sharp@4.16.0-next.1
     - gatsby-plugin-sitemap@5.16.0-next.1
     - gatsby-plugin-twitter@4.16.0-next.1
     - gatsby-plugin-utils@3.10.0-next.1
     - gatsby-remark-autolink-headers@5.16.0-next.1
     - gatsby-remark-images@6.16.0-next.1
     - gatsby-script@1.1.0-next.1
     - gatsby-source-contentful@7.14.0-next.1
     - gatsby-source-drupal@5.17.0-next.1
     - gatsby-source-shopify@7.5.0-next.1
     - gatsby-source-wordpress@6.16.0-next.1
     - gatsby-transformer-remark@5.16.0-next.1
     - gatsby-transformer-sharp@4.16.0-next.1
     - gatsby-transformer-sqip@4.16.0-next.1
     - gatsby@4.16.0-next.1
    LekoArts committed May 31, 2022
    Copy the full SHA
    1cebb71 View commit details
  4. chore: Run Unit Tests on Node 16 and 18 (#35622)

    * initial
    
    * update node 18
    
    * fix test???
    
    * revert change
    
    * change version
    
    * update node version
    
    * mock trackError
    
    * include sourceMessage
    
    * revert version change
    LekoArts authored May 31, 2022
    Copy the full SHA
    d22a86e View commit details
  5. Copy the full SHA
    c3a3f68 View commit details
  6. Copy the full SHA
    160bbf0 View commit details

Commits on Jun 1, 2022

  1. chore(docs): Update outdated building a theme tutorial snippets (#35792)

    Fixing #35784
    
    Signed-off-by: Josh Cox <josh@webhosting.coop>
    joshuacox authored Jun 1, 2022
    Copy the full SHA
    625b141 View commit details
  2. Copy the full SHA
    4c180eb View commit details
  3. fix(gatsby-source-filesystem): Update createRemoteFileNode args (#3…

    …5422)
    
    * fixes issue #35363 and CreateFileNodeFromBufferArgs
    
    * modified tests for remote-file-node and file-node-from-buffer
    
    * updated function calls in dependencies
    
    * removed unused typescript imports
    
    Co-authored-by: Ward Peeters <ward@coding-tech.com>
    Co-authored-by: Michal Piechowiak <misiek.piechowiak@gmail.com>
    3 people authored Jun 1, 2022
    Copy the full SHA
    caaf7a5 View commit details
  4. Copy the full SHA
    5682aa0 View commit details
  5. chore(docs): Update using-web-fonts for fontsource (#35579)

    Co-authored-by: Lennart <lekoarts@gmail.com>
    tordans and LekoArts authored Jun 1, 2022
    Copy the full SHA
    caa1a8f View commit details
  6. Copy the full SHA
    b802061 View commit details
  7. Copy the full SHA
    7d93d2e View commit details
  8. chore(release): Publish next

     - gatsby-cli@4.16.0-next.2
     - gatsby-plugin-image@2.16.0-next.2
     - gatsby-plugin-sharp@4.16.0-next.2
     - gatsby-source-contentful@7.14.0-next.2
     - gatsby-source-drupal@5.17.0-next.2
     - gatsby-source-filesystem@4.16.0-next.1
     - gatsby-source-shopify@7.5.0-next.2
     - gatsby-source-wordpress@6.16.0-next.2
     - gatsby-transformer-screenshot@4.16.0-next.1
     - gatsby-transformer-sqip@4.16.0-next.2
     - gatsby@4.16.0-next.2
    LekoArts committed Jun 1, 2022
    Copy the full SHA
    ba182c6 View commit details
Showing 435 changed files with 22,248 additions and 28,456 deletions.
27 changes: 26 additions & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
@@ -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:
5 changes: 5 additions & 0 deletions .github/workflows/schedule-stale.yml
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions .jestSetup.js
Original file line number Diff line number Diff line change
@@ -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())
2 changes: 2 additions & 0 deletions .yarnrc
Original file line number Diff line number Diff line change
@@ -4,3 +4,5 @@

"--install.ignore-engines" true
yarn-path ".yarn/releases/yarn-1.21.0.js"

registry "https://registry.yarnpkg.com"
2 changes: 1 addition & 1 deletion benchmarks/create-pages/package.json
Original file line number Diff line number Diff line change
@@ -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"
},
Original file line number Diff line number Diff line change
@@ -16,7 +16,6 @@ exports.sourceNodes = ({ actions, createNodeId, store, cache }) =>
fileNode = await createRemoteFileNode({
url: url,
parentNodeId: nodeId,
store,
cache,
createNode: actions.createNode,
createNodeId,
1 change: 0 additions & 1 deletion benchmarks/source-agilitycms/gatsby-node.js
Original file line number Diff line number Diff line change
@@ -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) {
2 changes: 2 additions & 0 deletions docs/docs/awesome-gatsby-resources.md
Original file line number Diff line number Diff line change
@@ -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

4 changes: 4 additions & 0 deletions docs/docs/how-to/custom-configuration/typescript.md
Original file line number Diff line number Diff line change
@@ -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)
2 changes: 1 addition & 1 deletion docs/docs/how-to/images-and-media/working-with-video.md
Original file line number Diff line number Diff line change
@@ -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"
---
```
224 changes: 224 additions & 0 deletions docs/docs/how-to/local-development/graphql-typegen.md
Original file line number Diff line number Diff line change
@@ -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)
4 changes: 2 additions & 2 deletions docs/docs/how-to/local-development/javascript-tooling.md
Original file line number Diff line number Diff line change
@@ -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

Loading