|
| 1 | +--- |
| 2 | +date: "2022-05-10" |
| 3 | +version: "4.14.0" |
| 4 | +title: "v4.14 Release Notes" |
| 5 | +--- |
| 6 | + |
| 7 | +Welcome to `[email protected]` release (May 2022 #1) |
| 8 | + |
| 9 | +Key highlights of this release: |
| 10 | + |
| 11 | +- [Experimental: GraphQL Typgen](#experimental-graphql-typegen) |
| 12 | +- [Improvements in Image and Font Loading Times](#improvements-in-image-and-font-loading-times) |
| 13 | +- [Gatsby Functions Body Parsing Configuration](#gatsby-functions-body-parsing-configuration) |
| 14 | +- [`gatsby-source-drupal`: Image CDN Support](#gatsby-source-drupal-image-cdn-support) |
| 15 | +- [Updated Default Starter](#updated-default-starter) |
| 16 | + |
| 17 | +Also check out [notable bugfixes](#notable-bugfixes--improvements). |
| 18 | + |
| 19 | +**Bleeding Edge:** Want to try new features as soon as possible? Install `gatsby@next` and let us know if you have any [issues](https://github.com/gatsbyjs/gatsby/issues). |
| 20 | + |
| 21 | +[Previous release notes](/docs/reference/release-notes/v4.13) |
| 22 | + |
| 23 | +[Full changelog][full-changelog] |
| 24 | + |
| 25 | +--- |
| 26 | + |
| 27 | +## Experimental: GraphQL Typegen |
| 28 | + |
| 29 | +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](https://github.com/cometkim/gatsby-plugin-typegen) or [gatsby-plugin-ts](https://github.com/d4rekanguok/gatsby-typescript/tree/master/packages/gatsby-plugin-ts) in the past you'll be familiar with this feature and we really value your feedback on this feature! |
| 30 | + |
| 31 | +Here's a short video of what you'll be able to do: |
| 32 | + |
| 33 | +<img |
| 34 | + alt="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." |
| 35 | + src="https://user-images.githubusercontent.com/16143594/167390143-9188b688-a903-406a-ba01-2d4b69f32ccf.gif" |
| 36 | + loading="lazy" |
| 37 | +/> |
| 38 | + |
| 39 | +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](https://github.com/gatsbyjs/gatsby/discussions/35420) discussion after you have tried it out. |
| 40 | + |
| 41 | +### Trying it out |
| 42 | + |
| 43 | +Make sure that you're on `gatsby@latest` or `gatsby@next`. Next, edit your `gatsby-config.js` to include a flag called `GRAPHQL_TYPEGEN`. |
| 44 | + |
| 45 | +```js:title=gatsby-config.js |
| 46 | +module.exports = { |
| 47 | + flags: { |
| 48 | + GRAPHQL_TYPEGEN: true, |
| 49 | + } |
| 50 | +} |
| 51 | +``` |
| 52 | + |
| 53 | +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. |
| 54 | + |
| 55 | +Then inside your pages you can access the global namespace `Queries` to get your type information. Make sure that your queries have a name! |
| 56 | + |
| 57 | +The project [graphql-typegen-testing](https://github.com/LekoArts/graphql-typegen-testing) shows all this if you want to get started quickly. |
| 58 | + |
| 59 | +### Intellisense |
| 60 | + |
| 61 | +The video shown above gives autocompletion for your queries. This is achieved by using VSCode, the [GraphQL Plugin](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql), and defining a `graphql.config.js` with the following contents: |
| 62 | + |
| 63 | +```js:title=graphql.config.js |
| 64 | +module.exports = require("./.cache/typegen/graphql.config.json") |
| 65 | +``` |
| 66 | + |
| 67 | +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. |
| 68 | + |
| 69 | +## Improvements in Image and Font Loading Times |
| 70 | + |
| 71 | +Previously, Gatsby preloaded a large amount of JavaScript and JSON assets which may lead to [Network Congestion](https://en.wikipedia.org/wiki/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. |
| 72 | + |
| 73 | +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: |
| 74 | + |
| 75 | +- [Before Waterfall](https://user-images.githubusercontent.com/16143594/167626715-aa51688a-a38a-4cc2-bd2a-25332dce08af.png) |
| 76 | +- [After Waterfall](https://user-images.githubusercontent.com/16143594/167626724-62635e1b-32c8-4c4b-a3bd-0b4184b05fb7.png) |
| 77 | + |
| 78 | +In total this lead to a **50% improvement** in loading speed for gatsbyjs.com which you can see in this short video: |
| 79 | + |
| 80 | + |
| 81 | + |
| 82 | +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](https://www.gatsbyjs.com/products/cloud/). |
| 83 | + |
| 84 | +## Gatsby Functions Body Parsing Configuration |
| 85 | + |
| 86 | +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](/docs/reference/functions/middleware-and-helpers/#custom-body-parsing). |
| 87 | + |
| 88 | +## `gatsby-source-drupal`: Image CDN Support |
| 89 | + |
| 90 | +Drupal now has Image CDN support. Enable it in your site by following the official [`gatsby-source-drupal` documentation](/plugins/gatsby-source-drupal/#gatsby-image-cdn). |
| 91 | + |
| 92 | +## Updated Default Starter |
| 93 | + |
| 94 | +We updated our [default Starter template `gatsby-starter-default`](https://www.gatsbyjs.com/starters/gatsbyjs/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. |
| 95 | + |
| 96 | + |
| 97 | + |
| 98 | +## Notable bugfixes & improvements |
| 99 | + |
| 100 | +- `gatsby-source-contentful`: |
| 101 | + - Add support for tables in Rich Text, via [PR #33870](https://github.com/gatsbyjs/gatsby/pull/33870) |
| 102 | + - Add `contentTypeFilter` option, via [PR #35204](https://github.com/gatsbyjs/gatsby/pull/35204) |
| 103 | +- `gatsby`: Fixes `UNHANDLED EXCEPTION write EPIPE` on Netlify, via [PR #35513](https://github.com/gatsbyjs/gatsby/pull/35513) |
| 104 | +- `gatsby-plugin-image`: |
| 105 | + - Fix image flicker issues between page navigations and/or state updates, via [PR #35226](https://github.com/gatsbyjs/gatsby/pull/35226) |
| 106 | + - The `getImage` helper function was updated to look for `gatsbyImage`, via [PR #35507](https://github.com/gatsbyjs/gatsby/pull/35507) |
| 107 | +- `gatsby-source-wordpress`: |
| 108 | + - Always include Draft slugs for Gatsby Preview via [PR #35573](https://github.com/gatsbyjs/gatsby/pull/35573). |
| 109 | + - Use Image CDN for non-transformable images in html fields, via [PR #35529](https://github.com/gatsbyjs/gatsby/pull/35529) |
| 110 | + - Prevent GraphQL errors when a union list item is `null`, via [PR #35533](https://github.com/gatsbyjs/gatsby/pull/35533/files) |
| 111 | + |
| 112 | +## Contributors |
| 113 | + |
| 114 | +A big **Thank You** to [our community who contributed][full-changelog] to this release 💜 |
| 115 | + |
| 116 | +- [chrisq21](https://github.com/chrisq21): chore(gatsby): Expose `serverDataStatus` field in SSR type declaration file [PR #35505](https://github.com/gatsbyjs/gatsby/pull/35505) |
| 117 | +- [rodet](https://github.com/rodet): chore(docs): Add note about optimizing GitHub publish [PR #35465](https://github.com/gatsbyjs/gatsby/pull/35465) |
| 118 | +- [renbaoshuo](https://github.com/renbaoshuo): chore(docs): remove git.io urls [PR #35497](https://github.com/gatsbyjs/gatsby/pull/35497) |
| 119 | +- [rburgst](https://github.com/rburgst): fix(gatsby-remark-images): support resolving markdown images from child nodes [PR #28093](https://github.com/gatsbyjs/gatsby/pull/28093) |
| 120 | +- [orinokai](https://github.com/orinokai): fix(gatsby-plugin-preload-fonts): defer checking for write access [PR #35381](https://github.com/gatsbyjs/gatsby/pull/35381) |
| 121 | +- [GaryPWhite](https://github.com/GaryPWhite): chore(gatsby): Bump `react-dev-utils` to v12 [PR #35468](https://github.com/gatsbyjs/gatsby/pull/35468) |
| 122 | +- [axe312ger](https://github.com/axe312ger): feat(contentful): add support for tables in Rich Text [PR #33870](https://github.com/gatsbyjs/gatsby/pull/33870) |
| 123 | +- [ascorbic](https://github.com/ascorbic): fix(gatsby): wait for worker jobs to complete [PR #35513](https://github.com/gatsbyjs/gatsby/pull/35513) |
| 124 | +- [xavivars](https://github.com/xavivars) |
| 125 | + - fix(gatsby-source-contentful): Prevent null pointer exception [PR #35244](https://github.com/gatsbyjs/gatsby/pull/35244) |
| 126 | + - feat(gatsby-source-contentful): Add `contentTypeFilter` [PR #35204](https://github.com/gatsbyjs/gatsby/pull/35204) |
| 127 | +- [me4502](https://github.com/me4502): perf(gatsby): Minify page-data [PR #35578](https://github.com/gatsbyjs/gatsby/pull/35578) |
| 128 | + |
| 129 | +[full-changelog]: https://github.com/gatsbyjs/gatsby/compare/[email protected]@4.14.0 |
0 commit comments