【Next.js】使用GraphQL Code Generator自动化生成TypeScript类型定义！（GitHub GraphQL API）

2 年 ago

科, 雅

2 minutes

获取API数据后，我首先会手动对获取的数据进行TypeScript的类型定义。不过，如果使用GraphQL Code Generator，就可以自动进行TypeScript的类型定义。这样可以避免在类型定义过程中出现拼写错误，非常方便。但是在环境设置时会遇到各种问题，所以我写了一篇备忘录作为参考。本次说明将使用GitHub GraphQL API。

目标

GraphQL Code Generatorの仕組みがイマイチよくわからない方

环境

（GitHubトークンを取得し、エクスプローラーなどでクエリが作成できている）

最初的设置（安装软件包和生成codegen.yml）

请您从官方网站上安装所有所需内容。

这个步骤中的步骤

yarn graphql-code-generator init

当执行该操作时，将会生成codegen.yml文件。关于文件的设置等信息，下面的网站提供了很清晰的介绍，我将在此引荐给您。

由于所有内容稍后都可以更改，所以您只需要按照回车或示例中的显示输入并继续前进即可！

在2022年9月28日写这篇文章时，”@graphql-codegen/cli”的最新版本为2.13.1。然而，由于它的影响，init功能无法正常运行，因此我已降级至2.12.1并继续使用。

暫時完成的codegen.yml文件大致是這樣的。
我認為到目前為止進展相當順利。

overwrite: true
schema: "http://localhost:4000"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
  ./graphql.schema.json:
    plugins:
      - "introspection"

修改 codegen.yml 的设置

这是最重要的地方。我们将在这里对从GraphQL API获取的数据进行类型定义的设置。
在熟悉之前可能会感觉困难，但先开始逐个进行设置吧。
虽然有点啰嗦，但也是努力的地方！

架构

schema是生成类型的参考源。
通常情况下，使用终结点或GraphQL API提供的模式。
GitHub的GraphQL API有一个公共模式，可以下载并使用它。
下载的文件将作为schema.docs.graphql放在根目录下，并进行使用。

schema: "./schema.docs.graphql"

文件

在获取数据时，该文件会设置从终端节点获取数据的查询。您可以使用GitHub的GraphQL API并通过浏览器界面来创建查询。

将创建的数据放置在根目录下。这次我们给它取名为query.graphql，所以下面是相应的设置。

documents: "./query.graphql"

另外，我会参考所创建的查询并发布其内容。
该内容为按照最新更新顺序获取的5个存储库的信息，包括创建日期、更新日期和存储库的URL等信息。

query UseGitHubInfo {
    user(login: "topaoad") {
      name
      url
      repositories(last: 5, orderBy: {field: UPDATED_AT, direction: ASC}) {
        totalCount
        nodes {
          name
          description
          createdAt
          updatedAt
          url
          forkCount
          stargazerCount
          languages(orderBy: {field: SIZE, direction: DESC}, last: 10) {
            totalCount
            totalSize
            edges {
              node {
                id
                name
                color
              }
              size
            }
          }
        }
      }
    }
  }

生成

生成器根据架构和文件生成的设定来存储配置文件的路径，并设置在创建文件时要使用的插件。
由于生成后的文件是用于定义类型的，我将其设置在types目录下，与其他手动定义的文件相同。
由于个人喜好不同，可以在任意位置进行设置。

generates:
  src/types/githubGraphQL.ts:

并且，请将插件保持默认设置。

简单总结：
当从设定的GraphQL API的终点获取`documents`中设定的查询时，进行与模式的类型定义信息进行匹配。
然后创建一个附加类型的文件，并将其存储在`generates`的根目录下。
这就是整个机制。

整理完内部元素之后的codegen.yml文件的样子像这样。

overwrite: true
schema: "./schema.docs.graphql"
documents: "./query.graphql"
generates:
  src/types/githubGraphQL.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"

※ ./graphql.schema.json:由于不使用以下内容，已删除。

生成一个类型定义文件

一旦到这里，接下来就是生成类型定义文件了，生成所需的命令实际上已经在 package.json 的 scripts 中设置好了，具体设置如下：
“codegen”: “graphql-codegen –config codegen.yml”
（因为在初始化时默认为 codegen，所以按照指示进行初始化会变成这样）

"scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "codegen": "graphql-codegen --config codegen.yml"  
    }

所以，请通过npm或yarn运行codegen。
然后，在codegen.yml文件中设置的目录（src/generated/graphql.tsx）应该会生成文件。
（由于代码包含了成千上万行的export type等内容，因此省略了具体展示。）

用法说明

使用创建的类型定义文件，可以对从GraphQL API端点获取的数据进行类型化。
个人认为使用Apollo Client进行数据获取很简单明了，所以我也在文章中介绍了这种方法。
如果可以的话，请也看看这篇文章。

最后

对于初次接触，可能会有很多陌生的设置，也可能会感到困惑。
尽管实施内容本身是创建类型文件这样相对低调的内容，但我认为这将越来越成为必备的技能。
如果能对正在苦苦挣扎、难以理解的人提供帮助，那将是我的荣幸。