v4.15 Release Notes

Welcome to gatsby@4.15.0 release (May 2022 #2)

Key highlights of this release:

• Script Component
• GraphQL Typegen

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

Script Component

We’re releasing a built-in <Script> component that aids in loading third-party scripts performantly.

As a familiar React component, migration to the <Script> component is as simple as importing and capitalizing your existing script tags in most cases:

This will load your script after your page has hydrated by default, offering performance benefits over the native <script> tag (even with async or defer applied).

In our testing so far, we’ve noted a 20% reduction in Total Blocking Time for Gatsbyjs.com by moving 3 third party scripts to use the off-main-thread strategy via the new component. With the benefit of gradually migrating scripts to the new component, we’ll be able to continue to fine tune scripts to the appropriate strategies, and provide the very best frontend speed to visitors of Gatsbyjs.com.

The Gatsby <Script> component includes three loading strategies that you can define, allowing a great deal of flexibility via a single strategy attribute:

• post-hydrate - Loads after the page has hydrated
• idle - Loads after the page has become idle
• off-main-thread (experimental) - Loads off the main thread in a web worker via Partytown

In addition, these features are supported out of the box:

• Inline scripts via template literals and the dangerouslySetInnerHTML property
• onLoad and onError callbacks for post-hydrate and idle scripts with sources

For full details, see the Gatsby Script reference documentation.

Note - If you are using Jest, you will need to include gatsby-script in your transformIgnorePatterns key in your Jest config since gatsby-script is an ES module. See the unit testing documentation on Jest configuration for more details.

GraphQL Typegen

In the last v4.14 release we’ve added GraphQL Typegen as an experimental feature. After some bugfixing and improving its documentation the feature is now generally available behind a gatsby-config option.

Read the GraphQL Typegen guide to learn how you can use it today and continue to give us your feedback in the RFC discussion.

Notable bugfixes & improvements

• gatsby:
  • Improved performance of “Building development bundle”, via PR #35641
  • Don’t apply trailing slashes to “.pdf” or “.xml” links, via PR #35681
• gatsby-cli: Default to production NODE_ENV for gatsby serve to be consistent with gatsby build, via PR #35693
• gatsby-source-wordpress: handle media edit (for example rotation or rename) properly for IMAGE_CDN, via PR #35687
• gatsby-source-drupal:
  • Warn about corrupt files and don’t create enable IMAGE_CDN if skipFileDownloads is not enabled, via PR #35619
  • Add missing placeholderStyleName plugin config option, via PR #35644

Contributors

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

• chuckreynolds: sitemap plugin readme has incorrect array name reference PR #35659
• admir4l: chore(gatsby, gatsby-cli, gatsby-plugin-sharp): remove old unused UUID dependency PR #35657
• feedm3: fix(gatsby): use correct types for the response headers PR #35633
• alvis: fix(gatsby): correct the types of createNode action return PR #32522