v4.14 Release Notes
firstname.lastname@example.org release (May 2022 #1)
Key highlights of this release:
- Experimental: GraphQL Typgen
- Improvements in Image and Font Loading Times
- Gatsby Functions Body Parsing Configuration
gatsby-source-drupal: Image CDN Support
- Updated Default Starter
Also check out notable bugfixes.
Bleeding Edge: Want to try new features as soon as possible? Install
gatsby@next and let us know if you have any issues.
Experimental: GraphQL Typegen
We’re adding a built-in way for automatic TypeScript type generation and better GraphQL IntelliSense in Gatsby. If you’ve used gatsby-plugin-typegen or gatsby-plugin-ts in the past you’ll be familiar with this feature and we really value your feedback on this feature!
Here’s a short video of what you’ll be able to do:
As noted already, this feature is still experimental and the API surface might change until the feature is in general availability. Please give us your feedback in the RFC: GraphQL Typegen discussion after you have tried it out.
Trying it out
Make sure that you’re on
gatsby@next. Next, edit your
gatsby-config.js to include a flag called
Then you can run
gatsby develop and files will be created inside
.cache/typegen. You can reference
.cache/typegen/graphql.config.json inside a
graphql.config.js at the root of your site to configure the GraphQL language server/VSCode extension.
Then inside your pages you can access the global namespace
Queries to get your type information. Make sure that your queries have a name!
The project graphql-typegen-testing shows all this if you want to get started quickly.
The video shown above gives autocompletion for your queries. This is achieved by using VSCode, the GraphQL Plugin, and defining a
graphql.config.js with the following contents:
We intend to document as many ways to use a GraphQL language server to benefits from this information, so we’d also love your input here.
Improvements in Image and Font Loading Times
With this release we changed Gatsby’s behavior and now lazily load non-essential scripts and assets. You can see a before and after of two waterfall diagrams on gatsbyjs.com here:
In total this lead to a 50% improvement in loading speed for gatsbyjs.com which you can see in this short video:
The website finished loading after 1.2s compared 2.2s on previous Gatsby versions. This is achieved by using the improvements in Gatsby’s core,
gatsby-plugin-gatsby-cloud’s default settings, and Gatsby Cloud.
Gatsby Functions Body Parsing Configuration
Gatsby now supports adjusting body parsing middleware for API functions. This allows users to increase request body size limit and/or support 3rd party webhook signature verification. For details and examples check
Custom body parsing documentation.
gatsby-source-drupal: Image CDN Support
Drupal now has Image CDN support. Enable it in your site by following the official
Updated Default Starter
We updated our default Starter template
gatsby-starter-default to contain references to documentation, tutorial, our monorepo examples folder, and more – and aligned its look-and-feel to that of our
npm init gatsby experience. It shows you how to use TypeScript, Server Side Rendering, and Deferred Static Generation in your Gatsby application.
Notable bugfixes & improvements
UNHANDLED EXCEPTION write EPIPEon Netlify, via PR #35513
A big Thank You to our community who contributed to this release 💜
- chrisq21: chore(gatsby): Expose
serverDataStatusfield in SSR type declaration file PR #35505
- rodet: chore(docs): Add note about optimizing GitHub publish PR #35465
- renbaoshuo: chore(docs): remove git.io urls PR #35497
- rburgst: fix(gatsby-remark-images): support resolving markdown images from child nodes PR #28093
- orinokai: fix(gatsby-plugin-preload-fonts): defer checking for write access PR #35381
- GaryPWhite: chore(gatsby): Bump
react-dev-utilsto v12 PR #35468
- axe312ger: feat(contentful): add support for tables in Rich Text PR #33870
- ascorbic: fix(gatsby): wait for worker jobs to complete PR #35513
- me4502: perf(gatsby): Minify page-data PR #35578