v4.1 Release Notes
Welcome to gatsby@4.1.0 release (November 2021 #1)
Key highlights of this release:
- Support for Deferred Static Generation in File System Route API
- JSX Runtime Options in
gatsby-config.js
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.
Support for Deferred Static Generation in File System Route API
With the introduction of Deferred Static Generation (DSG) (What is DSG?) you can defer non-critical page generation to the first user request. Currently, you can only achieve this by setting defer: true in the createPage action.
You’re now also able to use DSG with File System Route API. For this we’re introducing a new API inside File System Route templates that we’ll continue to improve: A config() function. You’ll be able to use it like this:
In the async function config() you can use GraphQL to query the data layer you’re used to. But you don’t have to — you can also use regular JavaScript or skip the outer function completely. config() must return a function itself in which you get params as an argument. params is the same object you also get as props.params in the page component (see params documentation), e.g. src/pages/{Product.name}.js has params.name.
Here’s a minimal version of config() that defers every page of the current File System Route template:
You can read the API reference or the DSG guide to learn more.
Please note: As DSG has no effect in gatsby develop at the moment you can only test config() in gatsby build right now. As this is the first iteration of the config() API we’re looking for feedback!
JSX Runtime Options in gatsby-config.js
You now can configure the jsxRuntime and jsxImportSource inside gatsby-config.js:
Setting jsxRuntime to automatic allows the use of JSX without having to import React (learn more in the official blog post). You can use the jsxImportSource option to set which package React should use as underlying JSX transformer.
Notable bugfixes & improvements
- We’ve improved our Creating a Source Plugin guide to account for changes made in v4
gatsby-source-contentful: ThedownloadLocaloption is working correctly again, via PR #33715gatsby-plugin-image:gatsby:gatsby-remark-images: Fix figure caption generation when usingGATSBY_EMPTY_ALT, via PR #30468gatsby-plugin-sharp: PassfailOnErrorto sharp when usinggatsby-plugin-image, via PR #33547
Contributors
A big Thank You to our community who contributed to this release 💜
- bicstone: chore(docs): Fix links to old tutorial docs PR #33605
- shreemaan-abhishek: docs(gatsby): fix grammar issue PR #33525
- marijoo: chore(gatsby-source-faker): Update README PR #33606
- tonyhallett
- codejet: chore(gatsby-remark-images): Fix typo in README PR #33646
- desirekaleba: chore(starters): Fix link to old GraphQL tutorial PR #33654
- abhirajkrishnan: chore(docs): Fix Broken Link For Headless CMS Definition PR #33645
- Mrtenz: chore(docs): NodeModel.findAll returns a Promise PR #33653
- sarvesh4396: chore(gatsby-source-wordpress): Fix typos PR #33639
- erikbgithub: chore(gatsby-plugin-mdx): Fix grammar PR #33485
- Simply007: chore(docs): Improve v3->v4 migration guide on
GatsbyIterablePR #33666 - Dgiordano33: chore(examples): Swapped to deploy on Gatsby Cloud PR #33686
- raresportan: fix(gatsby-plugin-image): GatsbyImage not displaying image in IE11 PR #33416
- TommasoAmici: fix(gatsby-plugin-mdx): mkdirp needs to be listed as a direct depende… PR #33724
- redabacha: fix(gatsby-plugin-sharp): pass failOnError to sharp in getImageMetadata PR #33547
- herecydev: feat(gatsby): Add JSX Runtime options to
gatsby-config.jsPR #33050 - nategiraudeau: fix(gatsby-remark-images): GATSBY_EMPTY_ALT figcaption generation PR #30468
- Rutam21: chore(docs): Improve “Adding a service worker” PR #33737