Nodejs GraphQL代码生成器插件graphql-code-generator的使用

Nodejs GraphQL代码生成器插件graphql-code-generator的使用
graphql-code-generator 是一个非常强大的工具，可以自动为你的 GraphQL 项目生成各种类型的代码。它支持多种语言和框架，并且可以生成客户端和服务端的代码。下面是一个简单的指南来帮助你开始使用 graphql-code-generator。

安装

首先，你需要安装 graphql-codegen 和相关的插件。你可以通过 npm 来安装：

npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations

这个命令安装了核心的 CLI 工具以及 TypeScript 相关的插件。如果你需要特定的插件（比如生成 React Apollo 客户端代码），请根据需要安装。

配置

接下来，你需要创建一个配置文件。这个文件通常命名为 codegen.yml 或者 codegen.config.js。以下是一个基本的配置示例：

overwrite: true
schema: "http://localhost:4000/graphql"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"

在这个配置中：

overwrite 设置为 true 表示生成的文件将覆盖已存在的同名文件。
schema 指定了 GraphQL 的 schema 文件的位置。这里假设你的 GraphQL 服务器运行在本地的 4000 端口上。
documents 指定了 GraphQL 查询文档的位置。
generates 部分定义了输出文件及其使用的插件。

运行代码生成

一旦你有了配置文件，就可以运行代码生成了。你可以直接在命令行中运行：

npx graphql-codegen

或者如果你希望将代码生成作为 npm 脚本的一部分，可以在 package.json 中添加如下脚本：

"scripts": {
  "generate": "graphql-codegen"
}

然后运行：

npm run generate

这将会根据你的配置生成所需的代码到指定的目录。

扩展

根据你的需求，你可以添加更多的插件和配置。例如，如果你想生成 React Apollo 客户端代码，你可以添加 typescript-react-apollo 插件。具体配置可能如下所示：

generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"

这样，graphql-codegen 将会为你生成包括 React Apollo Hooks 的类型定义。

希望这些信息能帮助你开始使用 graphql-codegen。如果你有更具体的需求或遇到问题，官方文档是一个非常好的资源：https://graphql-code-generator.com/docs/getting-started/index

vueper 1楼

当然，让我用一点幽默感来帮你理解如何使用@graphql-codegen这个Node.js的GraphQL代码生成器插件。

首先，确保你的环境中已经安装了Node.js。然后，你可以通过npm（Node包管理器）来安装@graphql-codegen/cli，就像这样：

npm install --save-dev @graphql-codegen/cli

接着，你需要初始化一个配置文件。你可以用codegen命令来启动一个向导，它会像一个友好的外星人一样询问你关于项目的所有事情：

npx @graphql-codegen init

在这个过程中，你会告诉它你的GraphQL模式在哪里，你想生成什么样的代码，以及生成的代码应该放在哪里。想象一下，这是在训练你的AI助手理解你的需求！

最后，你可以运行生成命令，比如：

npx @graphql-codegen

或者，如果你想要自动化这个过程，可以将生成命令添加到你的package.json中的scripts部分，比如：

"scripts": {
  "generate": "graphql-codegen"
}

现在，每次你想更新或生成新的代码时，只需简单地敲下npm run generate，就像是召唤出你的超级英雄一样！

希望这能帮助你开始使用@graphql-codegen！如果你觉得这个过程很有趣，不妨给你的同事也分享一下这份欢乐吧！

ionicwang 2楼

graphql-code-generator 是一个强大的工具，可以用来生成多种客户端和服务器端代码，以帮助开发者更高效地使用GraphQL。下面是安装和使用该工具的基本步骤：

安装

首先你需要全局安装 graphql-code-generator 和相关插件。你可以使用npm来完成这一步骤。

npm install -g @graphql-codegen/cli
npm install --save-dev @graphql-codegen/typescript @graphql-codegen/typescript-operations

这里我们安装了 TypeScript 语言的生成器以及用于处理操作（queries, mutations, subscriptions）的生成器。

配置

接下来，创建一个配置文件（如 codegen.yml）来指定如何生成代码。

overwrite: true
schema: "http://localhost:4000/graphql"
documents: "src/**/*.ts"
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"

上述配置中，schema 指向你的GraphQL服务器地址，documents 是要解析的GraphQL操作文件的路径模式。生成的代码将被写入 src/generated/graphql.ts 文件中。

运行

你可以通过命令行运行 graphql-code-generator 来生成代码：

graphql-codegen

或者根据你的配置文件自动运行生成过程：

npx graphql-codegen

使用生成的代码

生成的代码将包含与GraphQL操作相关的类型定义和辅助函数，使得编写客户端代码时更加安全和方便。

自定义生成器

如果你需要生成其他类型的代码或有特殊需求，可以探索更多的插件和选项。例如，可以添加 typescript-react-apollo 插件来生成React组件所需的GraphQL操作和类型。

以上就是使用 @graphql-codegen/cli 和相关插件的基本流程。这个工具非常灵活，可以根据项目的需求进行高度定制化。希望这对你有所帮助！

htzhanglong 3楼

graphql-code-generator 是一个用于生成与 GraphQL 相关代码的工具。使用步骤如下：

安装：npm install @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations

创建配置文件 codegen.yml:

overwrite: true
generates:
  src/graphql/generated.ts:
    plugins:
      - "typescript"
      - "typescript-operations"

运行生成命令：npx graphql-codegen

这将根据你的 GraphQL schema 生成对应的 TypeScript 类型定义到指定文件。可以根据需要调整配置以生成其他类型的代码。