GraphQL 类型生成
简介
如果您已经在使用 TypeScript 配置 Gatsby 并手动为查询结果进行类型标注，那么本指南将向您展示 Gatsby 的自动 GraphQL Typegen 功能如何让您的工作更轻松。通过依赖 Gatsby 本身生成的类型，并在 IDE 中使用 GraphQL 查询自动补全，您将能够更快、更安全地编写 GraphQL 查询。
此功能已在 gatsby@4.15.0 中添加。默认情况下，此功能仅在 gatsby develop 期间生成文件。
先决条件
已使用
gatsby@4.15.0或更高版本设置的 Gatsby 项目。gatsby-config中的graphqlTypegen配置选项设置为true。您的项目中的
tsconfig.json设置为"include": ["./src/**/*"]。请参阅 完整的tsconfig.json示例。可选：如果您使用 VSCode，可以安装 GraphQL 扩展。
使用自动生成的 Queries 类型
为了让此示例正常工作，您需要在 gatsby-config 中的 siteMetadata 中有一个 title。
使用
gatsby develop启动开发服务器。服务器准备好后，您应该会在终端底部看到一条日志消息Generating GraphQL and TypeScript types。Gatsby 创建了一个类型生成文件，您应该在
src/gatsby-types.d.ts中看到它。它包含您的查询的 TypeScript 类型。您的tsconfig.json应该包含此文件，以便您可以在项目中任何地方访问namespace Queries。创建一个新页面
src/pages/typegen.tsx，内容如下：您的查询必须有一个名称（此处为：
query TypegenPage {}），否则自动类型生成将无法工作。我们建议将查询命名为与您的 React 组件相同，并使用 PascalCase。您可以使用graphql-eslint来强制执行此要求。像这样访问
Queries命名空间并在您的 React 组件中使用TypegenPageQuery类型：当您像这样键入站点标题时，您应该会收到 TypeScript IntelliSense
配置 gatsby-config 选项
除了在 gatsby-config 中为 graphqlTypegen 选项设置布尔值外，您还可以设置一个对象来配置它。请参阅 gatsby-config 文档中的所有详细信息。
- 使用
typesOutputPath可以指定输出路径。请确保同时更新tsconfig.json中的"include"设置，以包含新路径。 - 使用
documentSearchPaths，可以覆盖用于扫描 GraphQL 查询的文档的搜索路径。
非可空类型
由于 Gatsby 推断所有字段 — 除非用户提供了显式架构 — 它们默认是可空的。对于 GraphQL Typegen，这意味着字段可能为 null。您可以在上面的示例中看到，您不得不将 data.site?.siteMetadata?.title 键入为 siteMetadata 和 title 都是可空的。
如果您确定 siteMetadata.title 始终可用，您可以使用 Gatsby 的架构自定义 API 来显式键入您的字段：
阅读 自定义 GraphQL 架构指南，了解如何在您的站点或源插件中显式定义类型。
GraphQL 片段
片段允许您在整个站点中重用 GraphQL 查询的部分，并将查询的特定部分放在单个文件中。在 使用 GraphQL 片段指南 中了解更多信息。
在 GraphQL Typegen 的上下文中，片段使您能够为查询的嵌套部分拥有单独的 TypeScript 类型，因为每个片段都将是自己的 TypeScript 类型。然后，您可以使用这些类型来例如键入使用 GraphQL 数据的组件的参数。
这是一个示例（也用于 using-graphql-typegen），其中包含一个 Info 组件，该组件将 buildTime 作为参数。这个 Info 组件及其 SiteInformation 片段随后在 src/pages/index.tsx 文件中使用：
这样，就会创建一个 SiteInformationFragment TypeScript 类型，您可以在 Info 组件中使用它：
提示
- 在 GraphQL 查询中添加新键时，您需要保存文件，然后才会生成新的 TypeScript 类型。自动生成的文件仅在文件保存时更新。
- 在使用
gatsby-plugin-image（和 Image CDN）时，您将自动获得gatsbyImageData和gatsbyImage的正确 TypeScript 类型。 - 我们建议将
src/gatsby-types.d.ts添加到您的.gitignore中，因为它是由机器生成的代码，并且是重复的信息，这些信息已经存在于例如您的页面查询中。
配置 VSCode GraphQL 插件
在您的 VSCode 中安装 GraphQL 扩展。
在项目根目录创建
graphql.config.js文件，内容如下：VSCode 扩展将识别
graphql.config.js文件，并使用 Gatsby 的.cache目录中的自动生成文件。要了解更多关于graphql.config.js的信息，请查阅 GraphQL Config 文档。重启 VSCode 以使 GraphQL 扩展生效。
使用
gatsby develop启动开发服务器。转到您的任何查询，例如
src/pages中的页面查询，然后使用 Ctrl + Space（或使用 Shift + Space 作为备用快捷键）来获取类似 GraphiQL 的自动补全。
多个 GraphQL 项目
如果您的存储库有多个 GraphQL 项目（包括 Gatsby），您可以使用 projects 键进行配置。
子目录
如果您的 Gatsby 项目位于子目录中，例如 site，则您的配置应如下所示：
graphql-eslint
您可以选择使用 graphql-eslint 来 lint 您的 GraphQL 查询。它与您在其他步骤中创建的 graphql.config.js 文件无缝集成。
本指南假设您还没有任何现有的 ESLint 配置。如果您已经在使用 ESLint，则需要调整您的配置，并参考 graphql-eslint 的文档。
安装依赖项
编辑您的
package.json以添加两个脚本：创建一个
.eslintrc.js文件来配置 ESLint：在项目根目录创建
graphql.config.js文件，内容如下：使用
gatsby develop启动 Gatsby 开发服务器，并检查.cache/typegen/graphql.config.json是否已创建。
您现在可以使用 npm run lint 和 npm run lint:fix 来检查您的 GraphQL 查询，例如它们是否已命名。