gatsbyjs · Aug 11, 2022 · Aug 11, 2022 · Aug 12, 2022 · Aug 12, 2022 · Aug 12, 2022
Showing 328 changed files with 6,955 additions and 45,509 deletions.
diff --git a/.jestSetup.js b/.jestSetup.js
@@ -1,5 +1,2 @@
 process.env.GATSBY_RECIPES_NO_COLOR = "true"
 process.env.GATSBY_SHOULD_TRACK_IMAGE_CDN_URLS = "true"
-
-// Potrace has a dependency on giwrap which has a process.nextTick as a sideEffect which messes up with jest.
-jest.mock(`gifwrap`, () => jest.fn())
diff --git a/docs/docs/glossary/mdx.md b/docs/docs/glossary/mdx.md
@@ -38,7 +38,7 @@ export const Figure = props => {
 Now you can import this component into your Markdown document.
 
 ```markdown
-import { Figure } from './components/Figure';
+import { Figure } from "./components/Figure"
 
 # Hello world!
 

diff --git a/docs/docs/glossary/server-side-rendering.md b/docs/docs/glossary/server-side-rendering.md
@@ -44,6 +44,6 @@ Instead of purely server-side rendering, Gatsby uses the same APIs to create sta
 
 - [Why server-side render?](/blog/2019-04-02-behind-the-scenes-what-makes-gatsby-great/#why-server-side-render) from _Behind the Scenes: What makes Gatsby Great_
 
-- [Search Engine Optimization (SEO) and Social Sharing Cards with Gatsby](/tutorial/seo-and-social-sharing-cards-tutorial/#reach-skip-nav)
+- [Adding an SEO Component](/docs/how-to/adding-common-features/adding-seo-component/)
 
 - [What is a Static Site Generator?](/docs/glossary/static-site-generator/#what-is-a-static-site-generator) from the Gatsby docs
diff --git a/docs/docs/how-to/images-and-media/using-gatsby-plugin-image.md b/docs/docs/how-to/images-and-media/using-gatsby-plugin-image.md
@@ -233,11 +233,21 @@ module.exports = {
 
 ## Using images from a CMS or CDN
 
-Many source plugins have native support for `gatsby-plugin-image`, with images served directly from a content delivery network (CDN). This means that builds are faster, because there is no need to download images and process them locally. The query syntax varies according to the plugin, as do the supported transformation features and image formats. Make sure you update to the latest version of the source plugin to ensure there is support. For plugins that are not in this list you can use [dynamic images from `gatsby-transformer-sharp`](#dynamic-images).
+### Gatsby Cloud Image CDN
 
-### Source plugins
+Image CDN is Gatsby Clouds image hosting and transformation service. It speeds up your build times by deferring image downloading and processing until the first user requests an image. Image CDN also speeds up your frontend performance by serving CDN hosted images on the same domain as your Gatsby Cloud site. In our testing this can shave up to 300ms off of frontend page load times and as a result improve your lighthouse scores.
 
-These source plugins support using `gatsby-plugin-image` with images served from their CDN.
+For more information on what Image CDN is, how to use it, and what the platform limits are, visit the [Gatsby Cloud knowledge base article on "What Is Image CDN?"](https://support.gatsbyjs.com/hc/en-us/articles/4426379634835-What-is-Image-CDN-). To learn which source plugins currently support it and how to enable and use Image CDN on Gatsby Cloud take a look at the ["How-to Enable Image CDN" article](https://support.gatsbyjs.com/hc/en-us/articles/4426393233171).
+
+For all supported source plugins, the query syntax and feature-set is identical. Check your source plugin's documentation or the [Gatsby Cloud knowledge base article on "Configuring source plugins for Image CDN"](https://support.gatsbyjs.com/hc/en-us/articles/4522338898579-Configuring-Source-Plugins-for-Image-CDN) for more info.
+
+### Source plugins with their own CDN
+
+Many source plugins have native support for `gatsby-plugin-image`, with images served directly from that CMS's content delivery network (CDN). This means that builds are faster than local images because there is no need to download images and process them. While this is faster for builds, it isn't as performant on the frontend as [Gatsby Cloud's Image CDN](#gatsby-cloud-image-cdn) due to images being served from a different domain than the domain your site is hosted on.
+
+The query syntax varies according to the plugin, as do the supported transformation features and image formats. Make sure you update to the latest version of the source plugin to ensure there is support. For plugins that are not in this list you can use [dynamic images from `gatsby-transformer-sharp`](#dynamic-images).
+
+These source plugins support using `gatsby-plugin-image` with images served from their own CDN.
 
 - [AgilityCMS](https://github.com/agility/gatsby-image-agilitycms)
 - [Contentful](/plugins/gatsby-source-contentful/#using-the-new-gatsby-image-plugin)
@@ -247,12 +257,6 @@ These source plugins support using `gatsby-plugin-image` with images served from
 - [Sanity](/plugins/gatsby-source-sanity/#using-images)
 - [Shopify](https://github.com/gatsbyjs/gatsby-source-shopify-experimental#images)
 
-### Image CDNs
-
-A dedicated image CDN can be used with sources that don't have their own CDN, or where you need more transforms or formats than the CDN offers.
-
-- [imgix](/plugins/@imgix/gatsby/)
-
 ### Plugin authors
 
 If you maintain a source plugin or image CDN, there is a toolkit to help you add support for `gatsby-plugin-image`. See [Adding Gatsby Image support to your plugin](/docs/how-to/plugins-and-themes/adding-gatsby-image-support/) for more details. You can then open a PR to add your plugin to this list.

diff --git a/docs/docs/how-to/local-development/graphql-typegen.md b/docs/docs/how-to/local-development/graphql-typegen.md
@@ -9,7 +9,7 @@ examples:
 
 If you're already using [Gatsby with TypeScript](/docs/how-to/custom-configuration/typescript) and manually typing the results of your queries, you'll learn in this guide how Gatsby's automatic GraphQL Typegen feature can make your life easier. By relying on the types that are generated by Gatsby itself and using autocompletion for GraphQL queries in your IDE you'll be able to write GraphQL queries quicker and safer.
 
-This feature was added in `gatsby@4.15.0`.
+This feature was added in `gatsby@4.15.0`. By default, this feature is only generating files during `gatsby develop`.
 
 ## Prerequisites
 
@@ -105,6 +105,54 @@ export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"]
 
 Read the [Customizing the GraphQL schema guide](/docs/reference/graphql-data-layer/schema-customization/) to learn how to explicitly define types in your site or source plugin.
 
+### GraphQL fragments
+
+Fragments allow you to reuse parts of GraphQL queries throughout your site and collocate specific parts of a query to individual files. Learn more about it in the [Using GraphQL fragments guide](/docs/reference/graphql-data-layer/using-graphql-fragments/).
+
+In the context of GraphQL Typegen fragments enable you to have individual TypeScript types for nested parts of your queries since each fragment will be its own TypeScript type. You then can use these types to e.g. type arguments of components consuming the GraphQL data.
+
+Here's an example (also used in [using-graphql-typegen](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-graphql-typegen)) with a `Info` component that gets the `buildTime` as an argument. This `Info` component and its `SiteInformation` fragment is used in the `src/pages/index.tsx` file then:
+
+```tsx:title=src/components/info.tsx
+import * as React from "react"
+import { graphql } from "gatsby"
+
+// highlight-next-line
+const Info = ({ buildTime }: { buildTime?: any }) => {
+  return (
+    <p>
+      Build time: {buildTime}
+    </p>
+  )
+}
+
+export default Info
+
+// highlight-start
+export const query = graphql`
+  fragment SiteInformation on Site {
+    buildTime
+  }
+`
+// highlight-end
+```
+
+```graphql:title=src/pages/index.tsx
+# Rest of the page above...
+
+query IndexPage {
+  site {
+    ...SiteInformation
+  }
+}
+```
+
+This way a `SiteInformationFragment` TypeScript type will be created that you can use in the `Info` component:
+
+```tsx:title=src/components/info.tsx
+const Info = ({ buildTime }: { buildTime?: Queries.SiteInformationFragment["buildTime"] }) => {}
+```
+
 ### Tips
 
 - When adding a new key to your GraphQL query you'll need to save the file before new TypeScript types are generated. The autogenerated files are only updated on file saves.

diff --git a/docs/docs/how-to/plugins-and-themes/configuring-usage-with-plugin-options.md b/docs/docs/how-to/plugins-and-themes/configuring-usage-with-plugin-options.md
@@ -48,12 +48,12 @@ Any JavaScript data type can be passed in as an option.
 
 The following table lists possible options values and an example plugin that makes use of them.
 
-| Data Type | Sample Value                     | Example Plugin                                                   |
-| --------- | -------------------------------- | ---------------------------------------------------------------- |
-| Boolean   | `true`                           | [`gatsby-plugin-sharp`](/plugins/gatsby-plugin-sharp/)           |
-| String    | `/src/data/`                     | [`gatsby-source-filesystem`](/plugins/gatsby-source-filesystem/) |
-| Array     | `["/about-us/", "/projects/*"]`  | [`gatsby-plugin-offline`](/plugins/gatsby-plugin-offline/)       |
-| Object    | `{ default: "./src/layout.js" }` | [`gatsby-plugin-mdx`](/plugins/gatsby-plugin-mdx/)               |
+| Data Type | Sample Value                    | Example Plugin                                                   |
+| --------- | ------------------------------- | ---------------------------------------------------------------- |
+| Boolean   | `true`                          | [`gatsby-plugin-sharp`](/plugins/gatsby-plugin-sharp/)           |
+| String    | `/src/data/`                    | [`gatsby-source-filesystem`](/plugins/gatsby-source-filesystem/) |
+| Array     | `["/about-us/", "/projects/*"]` | [`gatsby-plugin-offline`](/plugins/gatsby-plugin-offline/)       |
+| Object    | `{ mdxOptions: {} }`            | [`gatsby-plugin-mdx`](/plugins/gatsby-plugin-mdx/)               |
 
 **Note**: Themes (which are a type of plugin) are able to receive options from a site's `gatsby-config.js` to be used in its `gatsby-config.js` in order to allow themes to be composed together. This is done by exporting the `gatsby-config.js` as a function instead of an object. You can see an example of this in the [`gatsby-theme-blog`](https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog) and [`gatsby-theme-blog-core`](https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog-core) repositories. Plugins are not capable of this functionality.
 

diff --git a/docs/docs/how-to/plugins-and-themes/using-a-plugin-in-your-site.md b/docs/docs/how-to/plugins-and-themes/using-a-plugin-in-your-site.md
@@ -34,7 +34,7 @@ Add the plugin as a project dependency in your `package.json` file by running th
 npm install gatsby-plugin-sitemap
 ```
 
-Check the plugin's README file to see if there are any other dependencies that you also need to install. (For example, [`gatsby-plugin-mdx`](/plugins/gatsby-plugin-mdx/) also requires `@mdx-js/mdx` and `@mdx-js/react` to be installed.)
+Check the plugin's README file to see if there are any other dependencies that you also need to install. (For example, [`gatsby-plugin-mdx`](/plugins/gatsby-plugin-mdx/) also requires `@mdx-js/react` to be installed.)
 
 ### Step 2: Configure the plugin in your `gatsby-config.js` file
 

diff --git a/docs/docs/how-to/querying-data/page-query.md b/docs/docs/how-to/querying-data/page-query.md
@@ -153,7 +153,7 @@ Consider the following query:
 
 ```js:title=src/templates/blog-post.js
 export const query = graphql`
-  query MdxBlogPost {
+  query {
     mdx(title: { eq: "Using a Theme" }) {
       id
       title
@@ -168,7 +168,7 @@ In addition to hardcoding an argument directly into the page query, you can pass
 
 ```js:title=src/templates/blog-post.js
 export const query = graphql`
-  query MdxBlogPost($title: String) { // highlight-line
+  query ($title: String) { // highlight-line
     mdx(title: {eq: $title}) { // highlight-line
       id
       title

diff --git a/docs/docs/how-to/routing/customizing-components.md b/docs/docs/how-to/routing/customizing-components.md
@@ -6,7 +6,7 @@ Using MDX, you can replace every HTML element that Markdown renders with a
 custom implementation. This allows you to use a set of design system components
 when rendering.
 
-```jsx:title=src/components/layout.js
+```jsx:title=src/components/layout.jsx
 import { MDXProvider } from "@mdx-js/react"
 import * as DesignSystem from "your-design-system"
 
@@ -28,7 +28,7 @@ export default function Layout({ children }) {
 }
 ```
 
-**Note**: you can also provide your own custom components to the `MDXProvider` that make them globally available while writing MDX. You can find more details about this pattern in the [Importing and Using Components in MDX guide](/docs/mdx/importing-and-using-components#make-components-available-globally-as-shortcodes).
+**Note**: You can also provide your own custom components to the `MDXProvider` that make them globally available while writing MDX. You can find more details about this pattern in the [Importing and Using Components in MDX guide](/docs/how-to/routing/mdx#make-components-available-globally-as-shortcodes).
 
 The following components can be customized with the MDXProvider:
 
@@ -68,10 +68,10 @@ The following components can be customized with the MDXProvider:
 
 ## How does this work?
 
-Components passed to the MDXProvider are used to render the HTML elements
-that Markdown creates. It uses
-[React's Context API](https://reactjs.org/docs/context.html).
+Components passed to the MDXProvider are used to render the HTML elements that Markdown creates. It uses [React's Context API](https://reactjs.org/docs/context.html).
 
 ## Related
 
 - [MDX components](https://mdxjs.com/getting-started/)
+- [Adding Components to Markdown with MDX](/docs/how-to/routing/mdx/)
+- [gatsby-plugin-mdx README](/plugins/gatsby-plugin-mdx)