Gatsby Book Launch

“The missing guide to the modern web” launches on Thursday, Sep 29th: Modular: The Web’s New Architecture

v4.14 Release Notes

Welcome to gatsby@4.14.0 release (May 2022 #1)

Key highlights of this release:

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.

Previous release notes

Full changelog


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:

Short video of using the new GraphQL Typegen feature in Gatsby. A Queries.IndexPageQuery is added to the PageProps of the page, then the query is changed to add siteMetadata and its title. At the end this new key is used inside the page.

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:

Comparison of before and after this change on gatsbyjs.com. The left side shows "Now", the right one "Before". Both videos show how the hero section of gatsbyjs.com is loaded, below it a number showing the time in seconds is placed.

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.

Preview of the new landing page. At the top it says "Welcome to Gatsby", below that it links to the separate subpages like "TypeScript" or "Server Side Rendering". Then four blocks linking out to sections like the tutorial or examples are shown. The footer contains links to Discord, Documentation, and more.

Notable bugfixes & improvements

  • gatsby-source-contentful:
    • Add support for tables in Rich Text, via PR #33870
    • Add contentTypeFilter option, via PR #35204
  • gatsby: Fixes UNHANDLED EXCEPTION write EPIPE on Netlify, via PR #35513
  • gatsby-plugin-image:
    • Fix image flicker issues between page navigations and/or state updates, via PR #35226
    • The getImage helper function was updated to look for gatsbyImage, via PR #35507
  • gatsby-source-wordpress:
    • Always include Draft slugs for Gatsby Preview via PR #35573.
    • Use Image CDN for non-transformable images in html fields, via PR #35529
    • Prevent GraphQL errors when a union list item is null, via PR #35533

Contributors

A big Thank You to our community who contributed to this release 💜

Edit this page on GitHub
© 2022 Gatsby, Inc.