v4.14 Release Notes
Welcome to gatsby@4.14.0
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@latest
or gatsby@next
. Next, edit your gatsby-config.js
to include a flag called GRAPHQL_TYPEGEN
.
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.
Intellisense
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
Previously, Gatsby preloaded a large amount of JavaScript and JSON assets which may lead to Network Congestion, especially for large sites with a lot of split chunks. This didn’t allow images and fonts to load as early as possible.
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 gatsby-source-drupal
documentation.
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 gatsby new
/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
gatsby-source-contentful
:gatsby
: FixesUNHANDLED EXCEPTION write EPIPE
on Netlify, via PR #35513gatsby-plugin-image
:gatsby-source-wordpress
:
Contributors
A big Thank You to our community who contributed to this release 💜
- chrisq21: chore(gatsby): Expose
serverDataStatus
field 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-utils
to 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
- xavivars
- me4502: perf(gatsby): Minify page-data PR #35578