Welcome to gatsby@2.29.0 release (December 2020 #2)

Key highlights of this release:

Other notable changes:

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

Query on Demand

Starting with v2.29, 10% of our users are automatically opt-in to this feature. We’ve first shipped this feature behind a flag in v2.27 and feel confident now that more people can try it out. Opt-in users will receive a notice in their terminal about that opt-in behavior and a hint on how to turn it off (in case it disturbs your workflow). As a recap of what Query on Demand will improve:

Gatsby will run queries for pages as they’re requested by a browser. Think of it like lazily loading the data your pages need, when they need it! This avoids having to wait for slower queries (like image processing) if you’re editing an unrelated part of a site. What this means for you: faster local development experience, up to 2x faster in many cases!

By slowly rolling out this feature to more and more users we’ll be getting closer to a GA (general availability) release that will benefit all users of Gatsby. Please give us your feedback in the umbrella discussion.

If you want to turn it on/off, you can set the corresponding flag inside gatsby-config.js:

In v2.29 we improved the UX around it by adding a loading indicator and message to the browser console (only in gatsby develop). If you want or need to de-activate this indicator, you can! For more details please see the umbrella discussion. Here’s a preview of them in action:

Loading indicator

The loading indicator respects the user’s settings for prefers-reduced-motion and prefers-color-scheme. It also announces itself to screen readers.

Short gif demonstrating the loading indicator for Query on Demand -- this is shown when the requested page takes a bit longer

Browser console

Picture showing a note in the browser console that explains on how to disable it

Lazy Images

Similarly as with Query on Demand also Lazy Images will be automatically delivered to 10% of our users with this v2.29 release. We’ve first shipped this feature behind a flag in v2.28. Opt-in users will receive a notice in their terminal about that opt-in behavior and a hint on how to turn it off (in case it disturbs your workflow). As a recap of what Lazy Images will improve:

As more and more images are added to a Gatsby site, the slower the local development experience oftentimes becomes. You spend time waiting for images to process, instead of you know, developing! No longer! This experimental version of gatsby-plugin-sharp only does image processing when the page gets requested.

By slowly rolling out this feature to more and more users we’ll be getting closer to a GA release that will benefit all users of Gatsby. Please give us your feedback in the umbrella discussion.

If you want to turn it on/off, you can set the corresponding flag inside gatsby-config.js:

Improvements to our CLI

In v2.27 we introduced create-gatsby, a new and interactive way to create a Gatsby site. You can run it in your terminal with npm init gatsby.

A couple of papercuts were fixed but we also added new features:

  • Prompt for your site name instead of a folder name
  • Automatically add this name to your siteMetadata and package.json
  • Add -y flag. This flag bypasses all prompts other than naming your site

The regular gatsby-cli received a new command to list out all plugins in your site by running gatsby plugin ls.

Experimental: Parallel data sourcing

In v2.28 we gave a sneak peek at a new feature that enables parallel data sourcing. As a recap:

Plugin APIs in Gatsby run serially. Generally this is what we want as most API calls are CPU/IO bound so things are fastest letting each plugin have the full undivided attention of your computer. But source plugins are often network bound as they’re hitting remote APIs and waiting for responses. We tried changing the invocation of sourceNodes to parallel on a few sites with 4+ source plugins and saw a big speedup on sourcing (40%+) as they were no longer waiting on each other to start their API calls.

You’re now able to activate this experiment in the stable release of Gatsby by adding a flag to your gatsby-config.js:

Please give us your feedback in the umbrella discussion.

Performance improvements

We were able to ship a bunch of performance improvements both to Gatsby itself and its plugins:

gatsby

gatsby-source-contentful

Slugify option for File System Route API

The File System Route API uses slugify to create slugs for the generated routes. You’re now able to pass custom options to that instance, e.g. when you want to change the separator. The full details are listed in the README of gatsby-plugin-page-creator.

gatsby-image codemod

We introduced some API changes for working with images when we published the new gatsby-plugin-image in v2.26. In order to make it easier to migrate your code to work with the new plugin, we’ve created a codemod. Follow the migration instructions in the README in order to run the codemod against your project.

Notable bugfixes

  • Scroll restoration issue in the browser API was fixed in #27384 that affected e.g. page transitions
  • Do not fail in develop when eslint loader is removed in #28494
  • Respect hash as source of truth for scroll position in #28555
  • Wait for jobs to complete in onPostBuild in #28534
  • Truncated long terminal messages fixed in #26190

Contributors

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