From 5e30fc2bbbc870b07ea905d79ec7efcf122746db Mon Sep 17 00:00:00 2001 From: Lennart Date: Fri, 29 Oct 2021 11:24:31 +0200 Subject: [PATCH] chore(docs): Updating deprecated syntax/information (#33730) --- docs/contributing/docs-contributions/index.md | 2 +- docs/contributing/how-to-file-an-issue.md | 11 ++---- .../how-to-make-a-reproducible-test-case.md | 4 +-- .../how-to-open-a-pull-request.md | 2 +- .../basic-hardware-software-requirements.md | 2 +- docs/docs/conceptual/graphql-concepts.md | 14 ++++---- .../conceptual/plugins-themes-and-starters.md | 2 +- .../preprocessing-external-images.md | 36 +++++++++---------- .../using-cloudinary-image-service.md | 2 +- .../troubleshooting-common-errors.md | 8 ++--- .../performance/improving-site-performance.md | 4 +-- .../using-gatsby-without-graphql.md | 2 +- docs/docs/recipes/querying-data.md | 1 - .../schema-customization.md | 17 --------- 14 files changed, 39 insertions(+), 68 deletions(-) diff --git a/docs/contributing/docs-contributions/index.md b/docs/contributing/docs-contributions/index.md index fe8fae87bda10..5aa0480967985 100644 --- a/docs/contributing/docs-contributions/index.md +++ b/docs/contributing/docs-contributions/index.md @@ -14,7 +14,7 @@ Check the GitHub repo for issues labeled with ["type: documentation" and "good f ## Options for contributing to the Gatsby docs -When working on the Gatsby.js documentation, you can choose between two major styles of working: +When working on the Gatsby documentation, you can choose between two major styles of working: - [Work directly in the GitHub UI](#modifying-markdown-files), using the "Edit this File" and commit capabilities without having to clone the repository. This is useful for quick documentation updates, typo fixes, and lightweight Markdown changes. - Clone the Gatsby.js repo and make changes to the Markdown files using your favorite text editor. Currently (as of March 2021), there is no way for community members to build the docs site locally. We are working internally to figure out a fix for this. diff --git a/docs/contributing/how-to-file-an-issue.md b/docs/contributing/how-to-file-an-issue.md index d54a77940b9c1..2fe1b61dd3764 100644 --- a/docs/contributing/how-to-file-an-issue.md +++ b/docs/contributing/how-to-file-an-issue.md @@ -2,21 +2,16 @@ title: How to File an Issue --- -The Gatsby GitHub [issue tracker](https://github.com/gatsbyjs/gatsby/issues) is the preferred channel for bug reports, documentation, feature requests and [submitting pull requests](/contributing/how-to-open-a-pull-request/). +The Gatsby GitHub [issue tracker](https://github.com/gatsbyjs/gatsby/issues) is the preferred channel for bug reports, documentation requests, and [submitting pull requests](/contributing/how-to-open-a-pull-request/). To resolve your issue, please select the appropriate category: -- Bug Reports +- Bug Report - Documentation -- Feature Requests -- New [Translation](/contributing/translation#creating-a-new-translation) Requests For bug reports, include in your issue: -- Gatsby version, Node.js version, OS version -- The contents of your `gatsby-config.js` and `package.json` as well as your - `gatsby-node.js`, `gatsby-browser.js`, and `gatsby-ssr.js` files depending on - changes you've made there. +- Follow the issue template prompting you for each entry - A [reproduction](/contributing/how-to-make-a-reproducible-test-case/) for debugging and taking action Please do not use the issue tracker for personal support requests. [Stack Overflow](https://stackoverflow.com/questions/ask?tags=gatsby) (**gatsby** tag) and the [Gatsby Discord](https://gatsby.dev/discord) are better places to get help. diff --git a/docs/contributing/how-to-make-a-reproducible-test-case.md b/docs/contributing/how-to-make-a-reproducible-test-case.md index defc714664ca9..77fe72bcc2c98 100644 --- a/docs/contributing/how-to-make-a-reproducible-test-case.md +++ b/docs/contributing/how-to-make-a-reproducible-test-case.md @@ -16,14 +16,14 @@ A reproducible test case is a great way to share a specific environment that cau ## Steps to create a reproducible test case -- Create a new Gatsby site with a starter, the official `hello-world` starter is a great 'barebones' starting point here: `gatsby new bug-repro https://github.com/gatsbyjs/gatsby-starter-hello-world` +- Create a new Gatsby site with a starter, the official `gatsby-starter-minimal` starter is a great 'barebones' starting point here: `gatsby new bug-repro https://github.com/gatsbyjs/gatsby-starter-minimal` - Add any Gatsby plugins that relate to the issue. For example, if you're having problems with Gatsby MDX you should install and configure [`gatsby-plugin-mdx`](/plugins/gatsby-plugin-mdx/). Only add plugins that are needed to demonstrate the problem. - Add the code needed to recreate the error you've seen. - Publish the code (your GitHub account is a good place to do this) and then link to it when [creating an issue](/contributing/how-to-file-an-issue/). ## Places to develop a reproducible test case -- Locally with a starter: You can start with a [Starter](/docs/starters) locally and then build it on your own machine. Gatsby's official [`hello-world`](https://github.com/gatsbyjs/gatsby/tree/master/starters/hello-world) or [`default`](https://github.com/gatsbyjs/gatsby-starter-default) starter are both good foundations for a reproducible test case. +- Locally with a starter: You can start with a starter locally and then build it on your own machine. Gatsby's official [`gatsby-starter-minimal`](https://github.com/gatsbyjs/gatsby-starter-minimal) is a good foundation for a reproducible test case. - Host on CodeSandbox: You can develop a Gatsby site straight from your browser with CodeSandbox using their [Gatsby template](https://codesandbox.io/s/github/gatsbyjs/gatsby-starter-default). CodeSandbox also hosts your site automatically, which can be useful to demonstrate the behavior of your site. ## Benefits of reproducible test cases diff --git a/docs/contributing/how-to-open-a-pull-request.md b/docs/contributing/how-to-open-a-pull-request.md index 4ddd5fa0fd2ab..65074b7ff1723 100644 --- a/docs/contributing/how-to-open-a-pull-request.md +++ b/docs/contributing/how-to-open-a-pull-request.md @@ -79,7 +79,7 @@ To test changes locally against the Gatsby [site and project files](https://gith ### Documentation PRs -The Gatsby.js docs site mostly lives in the [www](https://github.com/gatsbyjs/gatsby/tree/master/www) and [docs](https://github.com/gatsbyjs/gatsby/tree/master/docs) directories on GitHub, including docs and tutorial content. There are also some [examples in the Gatsby repo](https://github.com/gatsbyjs/gatsby/tree/master/examples) referenced in the docs. +The Gatsby docs site lives in [docs](https://github.com/gatsbyjs/gatsby/tree/master/docs) directories on GitHub, including docs and tutorial content. There are also some [examples in the Gatsby repo](https://github.com/gatsbyjs/gatsby/tree/master/examples) referenced in the docs. Additional docs PR steps: diff --git a/docs/docs/basic-hardware-software-requirements.md b/docs/docs/basic-hardware-software-requirements.md index 09f671934ad25..d9c0798059d58 100644 --- a/docs/docs/basic-hardware-software-requirements.md +++ b/docs/docs/basic-hardware-software-requirements.md @@ -18,7 +18,7 @@ This will be variable depending on the size of your site. Gatsby sites have been To develop with Gatsby, you'll need to install: -- Node.js 10.13.0 (LTS) or higher +- Node.js 14.15.0 (LTS) or higher - [npm](https://www.npmjs.com/) or [Yarn 1](https://classic.yarnpkg.com/lang/en/) package manager to install the [Gatsby CLI](/docs/reference/gatsby-cli/) and site dependencies. - npm is recommended for most developers. - Yarn is used for authoring Gatsby themes. diff --git a/docs/docs/conceptual/graphql-concepts.md b/docs/docs/conceptual/graphql-concepts.md index 2c981f3927043..2165b8d8eb60d 100644 --- a/docs/docs/conceptual/graphql-concepts.md +++ b/docs/docs/conceptual/graphql-concepts.md @@ -194,20 +194,20 @@ markdownRemark { Gatsby has rich support for processing images. Responsive images are a big part of the modern web and typically involve creating 5+ sized thumbnails per photo. With Gatsby's [`gatsby-transformer-sharp`](/plugins/gatsby-transformer-sharp/), you can _query_ your images for responsive versions. The query automatically creates all the needed responsive thumbnails and returns `src` and `srcSet` fields to add to your image element. -Combined with a special Gatsby image component, [gatsby-image](/plugins/gatsby-image/), you have a very powerful set of primitives for building sites with images. +Combined with a special Gatsby image component, [gatsby-plugin-image](/plugins/gatsby-plugin-image/), you have a very powerful set of primitives for building sites with images. -This is what a component using `gatsby-image` looks like: +This is what a component using `gatsby-plugin-image` looks like: ```jsx import React from "react" -import Img from "gatsby-image" +import { GatsbyImage } from "gatsby-plugin-image" import { graphql } from "gatsby" export default function Page({ data }) { return (
-

Hello gatsby-image

- +

Hello gatsby-plugin-image

+
) } @@ -218,9 +218,7 @@ export const query = graphql` childImageSharp { # Specify the image processing specifications right in the query. # Makes it trivial to update as your page's design changes. - fixed(width: 125, height: 125) { - ...GatsbyImageSharpFixed - } + gatsbyImageData(width: 125, height: 125, layout: FIXED) } } } diff --git a/docs/docs/conceptual/plugins-themes-and-starters.md b/docs/docs/conceptual/plugins-themes-and-starters.md index 28dbe81c31378..72634380e5876 100644 --- a/docs/docs/conceptual/plugins-themes-and-starters.md +++ b/docs/docs/conceptual/plugins-themes-and-starters.md @@ -102,7 +102,7 @@ Themes are intended to abstract several plugins into one, by making a `gatsby-co #### Custom components -Custom components are most traditionally distributed as packages in the React ecosystem. Components don't need to hook into the Gatsby build system, so if shipped with a plugin they don't need to be included in a `gatsby-config`'s plugin array. This is the case with `gatsby-image` which is a React component. It doesn't need to be included in the plugins array because it is merely a component. +Custom components are most traditionally distributed as packages in the React ecosystem. Components don't need to hook into the Gatsby build system, so if shipped with a plugin they don't need to be included in a `gatsby-config`'s plugin array. Some plugins ship with components you can use in a Gatsby site. An example is the [`` component from `gatsby-plugin-google-analytics`](/plugins/gatsby-plugin-google-analytics/?=#outboundlink-component). Other plugins, like [`gatsby-plugin-react-helmet`](/plugins/gatsby-plugin-react-helmet), require you to install components from other libraries. diff --git a/docs/docs/how-to/images-and-media/preprocessing-external-images.md b/docs/docs/how-to/images-and-media/preprocessing-external-images.md index 4e1164caef3d0..a145fb2e4eaec 100644 --- a/docs/docs/how-to/images-and-media/preprocessing-external-images.md +++ b/docs/docs/how-to/images-and-media/preprocessing-external-images.md @@ -2,7 +2,7 @@ title: Preprocessing External Images --- -Gatsby allows powerful image processing features using the [`Sharp`](https://github.com/lovell/sharp/) library to automatically process images to be performant, with features like lazy-loading. That said, this only works if the image is a `File` node in the GraphQL layer. +Gatsby allows powerful image processing features using the [`sharp`](https://github.com/lovell/sharp/) library to automatically process images to be performant, with features like lazy-loading. That said, this only works if the image is a `File` node in the GraphQL layer. If you want the same functionality for files that are remotely hosted online and not located in your Git repo, [`gatsby-source-filesystem`](/plugins/gatsby-source-filesystem/) has an API called `createRemoteFileNode` to solve this. @@ -24,7 +24,7 @@ featuredImgAlt: Mountains with a starry sky Hello World ``` -You can use a custom Frontmatter field for the URL of the featured image you want to pull down and use as part of the site. +You can use a custom frontmatter field for the URL of the featured image you want to pull down and use as part of the site. By default, this is a string value as you haven't told Gatsby yet how to interpret it. However, you can add some code into `gatsby-node.js` to modify it. @@ -43,7 +43,7 @@ exports.createSchemaCustomization = ({ actions }) => { createTypes(` type MarkdownRemark implements Node { frontmatter: Frontmatter - featuredImg: File @link(from: "featuredImg___NODE") + featuredImg: File @link(from: "fields.localFile") } type Frontmatter { @@ -56,7 +56,7 @@ exports.createSchemaCustomization = ({ actions }) => { exports.onCreateNode = async ({ node, - actions: { createNode }, + actions: { createNode, createNodeField }, store, cache, createNodeId, @@ -66,7 +66,7 @@ exports.onCreateNode = async ({ node.internal.type === "MarkdownRemark" && node.frontmatter.featuredImgUrl !== null ) { - let fileNode = await createRemoteFileNode({ + const fileNode = await createRemoteFileNode({ url: node.frontmatter.featuredImgUrl, // string that points to the URL of the image parentNodeId: node.id, // id of the parent node of the fileNode you are going to create createNode, // helper function in gatsby-node to generate the node @@ -75,9 +75,9 @@ exports.onCreateNode = async ({ store, // Gatsby's Redux store }) - // if the file was created, attach the new node to the parent node + // if the file was created, extend the node with "localFile" if (fileNode) { - node.featuredImg___NODE = fileNode.id + createNodeField({ node, name: "localFile", value: fileNode.id }) } } } @@ -85,10 +85,10 @@ exports.onCreateNode = async ({ Going step by step through the code: -1. Define some types for `MarkdownRemark` using the Schema Customization API. For `featuredImg`, use the `from` argument to point the `link` extension to the correct field name (with a `___NODE` suffix), [more details about foreign-key fields here](/docs/reference/graphql-data-layer/schema-customization/#foreign-key-fields). Defining a field for alternative text as `featuredImgAlt` can also improve accessibility, in addition to providing context for the image if it fails to load. +1. Define some types for `MarkdownRemark` using the Schema Customization API. For `featuredImg`, use the `from` argument to point the `link` extension to the correct field name (the `createNodeField` extends the node with a `fields` key), [more details about foreign-key fields here](/docs/reference/graphql-data-layer/schema-customization/#foreign-key-fields). Defining a field for alternative text as `featuredImgAlt` can also improve accessibility, in addition to providing context for the image if it fails to load. 2. Create an `onCreateNode` function so you can watch for when `MarkdownRemark` nodes are made. 3. Use `createRemoteFileNode` by passing in the various required fields and get a reference to the file afterwards. -4. If the Node is created, attach it as a child of the original Node. `___NODE` tells the GraphQL layer that the name before it is going to be a field on the parent Node that links to another Node. To do this, pass the `id` as the reference. Do note, this new node is now attached to the root of the `markdownRemark` node instead of the `frontmatter` field. +4. If the Node is created, extend the node with a `localFile` field. To do this, pass the `id` as the reference. Do note, this new node is now attached to the root of the `markdownRemark` node instead of the `frontmatter` field as `fields`. And since it is a File Node, `gatsby-transformer-sharp` will pick it up and create a `childImageSharp` child Node inside this newly created Node. @@ -114,7 +114,7 @@ query { ![GraphiQL with above query inserted](../../images/remote-file-node-graphiql-preview.png) -You can then use `gatsby-transformer-sharp` to fill in the query for a fixed image here. For more information on transforming images using parameters and fragments, check out the [Gatsby Image API docs](/docs/reference/built-in-components/gatsby-image/). +You can then use `gatsby-transformer-sharp` & `gatsby-plugin-image` to fill in the query for a fixed image here. For more information on transforming images using parameters and fragments, check out the ["Using Gatsby Plugin Image" guide](/docs/how-to/images-and-media/using-gatsby-plugin-image/). ```graphql query { @@ -122,9 +122,7 @@ query { nodes { featuredImg { childImageSharp { - fixed(width: 600) { - ...GatsbyImageSharpFixed - } + gatsbyImageData(width: 600, layout: FIXED) } } } @@ -136,7 +134,7 @@ And finally, you can update the template for this blog post to include a feature ```jsx import React from "react" -import Img from "gatsby-image" +import { GatsbyImage } from "gatsby-plugin-image" import { graphql } from "gatsby" const template = ({ data }) => { @@ -144,8 +142,10 @@ const template = ({ data }) => { <>

{data.markdownRemark.frontmatter.title}

{data.markdownRemark.featuredImg && ( - {data.markdownRemark.frontmatter.featuredImgAlt} )} @@ -166,9 +166,7 @@ export const query = graphql` html featuredImg { childImageSharp { - fixed(width: 600) { - ...GatsbyImageSharpFixed - } + gatsbyImageData(width: 600, layout: FIXED) } } } diff --git a/docs/docs/how-to/images-and-media/using-cloudinary-image-service.md b/docs/docs/how-to/images-and-media/using-cloudinary-image-service.md index 5ab438e70ee8c..9aa2950f8f775 100644 --- a/docs/docs/how-to/images-and-media/using-cloudinary-image-service.md +++ b/docs/docs/how-to/images-and-media/using-cloudinary-image-service.md @@ -19,7 +19,7 @@ Dealing with images on the web has always been a problem as unoptimized images c Cloudinary provides a couple of amazing solutions to this problem, namely: - Remote storage and delivery of images via CDN -- Offers a wider range of transformations than [gatsby-image](/docs/how-to/images-and-media/using-gatsby-image/). +- Offers a wider range of transformations than [gatsby-plugin-image](/docs/how-to/images-and-media/using-gatsby-plugin-image/). - [Digital Asset Management](https://cloudinary.com/documentation/digital_asset_management_overview) for enterprise assets ## Gatsby-source-cloudinary diff --git a/docs/docs/how-to/local-development/troubleshooting-common-errors.md b/docs/docs/how-to/local-development/troubleshooting-common-errors.md index b6100dd6a8997..b8d3395b25735 100644 --- a/docs/docs/how-to/local-development/troubleshooting-common-errors.md +++ b/docs/docs/how-to/local-development/troubleshooting-common-errors.md @@ -36,7 +36,7 @@ Here are some examples of plugins that require you to install more than just the - [gatsby-plugin-styled-components](/plugins/gatsby-plugin-styled-components/): `styled-components`, and `babel-plugin-styled-components` - [gatsby-plugin-sass](/plugins/gatsby-plugin-sass/): `node-sass`, or `sass` - [gatsby-plugin-material-ui](/plugins/gatsby-plugin-material-ui/): `@material-ui/styles` -- [gatsby-image](/plugins/gatsby-image/): `gatsby-transformer-sharp`, and `gatsby-plugin-sharp` +- [gatsby-plugin-image](/plugins/gatsby-plugin-image/): `gatsby-source-filesystem`, `gatsby-transformer-sharp`, and `gatsby-plugin-sharp` Rather than packaging up the other dependent libraries alongside these plugins, they can stay smaller in size when they are published and are able to rely on alternative implementations. One example is `gatsby-plugin-sass` that can use either the Node.js or Dart implementations of Sass. @@ -129,7 +129,7 @@ Comparing your GraphQL query to your site's schema in `http://localhost:8000/___ - neither any source plugins you are using nor your own implementation of the [`sourceNodes` API](/docs/reference/config-files/gatsby-node/#sourceNodes) are misconfigured -## Errors using gatsby-image and sharp +## Errors using gatsby-plugin-image and sharp Gatsby's image processing is broken up into different packages which need to work together to source images and transform them into different optimized versions. You might run into these errors getting them to play together nicely. @@ -158,9 +158,7 @@ allMdx { title image { childImageSharp { - fluid { - srcSet - } + gatsbyImageData } } } diff --git a/docs/docs/how-to/performance/improving-site-performance.md b/docs/docs/how-to/performance/improving-site-performance.md index b638424a3c317..0a85beacb7879 100644 --- a/docs/docs/how-to/performance/improving-site-performance.md +++ b/docs/docs/how-to/performance/improving-site-performance.md @@ -192,13 +192,13 @@ Font optimizations are usually small, but easy performance wins. Media files are often the largest files on a site, and so can delay page load significantly while they are pulled over the network, especially if their location is not well-defined. -[Gatsby Plugin Image](/docs/how-to/images-and-media/using-gatsby-image/) is our approach to optimizing image loading performance. It does three basic things: +[Gatsby Plugin Image](/docs/how-to/images-and-media/using-gatsby-plugin-image/) is our approach to optimizing image loading performance. It does three basic things: 1. It delays non-essential work for images not above the fold to avoid resource congestion. 2. It provides a placeholder during image fetch. 3. It minimizes image file size to reduce request roundtrip time. -The `gatsby-plugin-image` documentation is fairly exhaustive, ranging from [why image optimization is important](/docs/conceptual/using-gatsby-image/), or [how to implement Gatsby Plugin Image](/docs/how-to/images-and-media/using-gatsby-plugin-image/), to a [Gatsby Image reference](/docs/reference/built-in-components/gatsby-image/). +The `gatsby-plugin-image` documentation is fairly exhaustive, ranging from [why image optimization is important](/docs/conceptual/using-gatsby-image/) to [how to implement Gatsby Plugin Image](/docs/how-to/images-and-media/using-gatsby-plugin-image/). Implementing Gatsby Image is typically the bulk of image- and media-related performance optimization. diff --git a/docs/docs/how-to/querying-data/using-gatsby-without-graphql.md b/docs/docs/how-to/querying-data/using-gatsby-without-graphql.md index ca11b2eaf24a7..f2a801360bb98 100644 --- a/docs/docs/how-to/querying-data/using-gatsby-without-graphql.md +++ b/docs/docs/how-to/querying-data/using-gatsby-without-graphql.md @@ -94,7 +94,7 @@ Using Gatsby's data layer provides the following benefits: Working outside of the data layer also means foregoing the optimizations provided by transformer plugins, like: -- [`gatsby-image`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image) (speedy optimized images), +- [`gatsby-plugin-image`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image) (speedy optimized images), - [`gatsby-transformer-sharp`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sharp) (provides queryable fields for processing your images in a variety of ways including resizing, cropping, and creating responsive images), - ... the whole Gatsby ecosystem of official and community-created [transformer plugins](/plugins/?=transformer). diff --git a/docs/docs/recipes/querying-data.md b/docs/docs/recipes/querying-data.md index 4475460d1b6f5..00ca65468c964 100644 --- a/docs/docs/recipes/querying-data.md +++ b/docs/docs/recipes/querying-data.md @@ -429,7 +429,6 @@ Fragments can be nested inside other fragments, and multiple fragments can be us - [Example repo using fragments](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-fragments) - [Gatsby GraphQL reference for fragments](/docs/graphql-reference/#fragments) -- [Gatsby image fragments](/docs/reference/built-in-components/gatsby-image/#image-query-fragments) - [Example repo with co-located data](https://github.com/gatsbyjs/gatsby/tree/master/examples/gatsbygram) ## Querying data client-side with `fetch` diff --git a/docs/docs/reference/graphql-data-layer/schema-customization.md b/docs/docs/reference/graphql-data-layer/schema-customization.md index 5e5081af36afa..c723dce72e8d0 100644 --- a/docs/docs/reference/graphql-data-layer/schema-customization.md +++ b/docs/docs/reference/graphql-data-layer/schema-customization.md @@ -364,18 +364,6 @@ schema.buildObjectType({ #### Foreign-key fields -Gatsby's automatic type inference has one trick up its sleeve: for every field -that ends in `___NODE` it will interpret the field value as an `id` and create a -foreign-key relation. - -> Note: Before the introduction of the Schema Customization APIs in Gatsby v2.2, -> there were two mechanisms to create links between node types: a plugin author would use the `___NODE` -> fieldname convention (for plugins), and a user would define [mappings](/docs/reference/config-files/gatsby-config/#mapping-node-types) between fields in their `gatsby-config.js`. Both users and plugin authors can now use the `@link` extension described below. - -Creating foreign-key relations with the `createTypes` action, -i.e. without relying on type inference and the `___NODE` field naming -convention, requires a bit of manual setup. - In the example project, the `frontmatter.author` field on `MarkdownRemark` nodes to expand the provided field value to a full `AuthorJson` node. For this to work, there has to be provided a custom field resolver. (see below for @@ -478,11 +466,6 @@ For the above example you can read `@link` this way: Use the value from the fiel Keep in mind that in the example above, the link of `posts` in `AuthorJson` works because `frontmatter` and `author` are both objects. If, for example, the `Frontmatter` type had a list of `authors` instead (`frontmatter.authors.email`), it wouldn't work since the `by` argument doesn't support arrays. In that case, you'd have to provide a custom resolver with [Gatsby Type Builders](/docs/reference/graphql-data-layer/schema-customization/#gatsby-type-builders) or [createResolvers API](/docs/reference/graphql-data-layer/schema-customization/#createresolvers-api). -> Note that when using `createTypes` to fix type inference for a foreign-key field -> created by a plugin, the underlying data will probably live on a field with -> a `___NODE` suffix. Use the `from` argument to point the `link` extension to -> the correct field name. For example: `author: [AuthorJson] @link(from: "author___NODE")`. - #### Extensions and directives Out of the box, Gatsby provides [four extensions](/docs/reference/config-files/actions/#createTypes)