如果你正在学习前端开发，那么你一定会遇到使用 GraphQL 的情况。GraphQL 是一种查询语言，它让你可以在客户端和服务器之间声明式地定义数据的传输。GraphQL 的主要优势在于它提高了应用程序的性能和可维护性，同时减少了网络请求。
然而，为了使用 GraphQL，需要编写大量的代码来定义查询和响应类型。这些代码很容易出错且难以维护，因此我们需要一种工具来自动生成这些代码。graphql-code-generator 就是这样一个工具，它可以根据你的 GraphQL Schema 自动生成客户端代码。
在这篇文章中，我将介绍 graphql-codegen-plugin-handlebars-helpers npm 包的使用方法，它是一款在 graphql-code-generator 中使用 Handlebars 模板的插件。
安装
首先，我们需要安装以下依赖项：
--- ------- -- -------------------- ------- ----------- --------------------------- ------------------------------------- ----------------------------------- -----------------------------------------
请注意，这里使用的是 TypeScript 和 TypeScript-Resolvers。如果你使用的是 JavaScript，只需将包的名称从 "@graphql-codegen/typescript" 更改为 "@graphql-codegen/javascript"。
配置
配置 graphql-codegen 非常容易。我们只需要在项目根目录下创建一个 .graphql-codegen 目录，并在目录下创建一个 codegen.yml 文件。
---------- ----
---------- ----------------
----------
-------------------------
--------
- ------------
- ----------------------
- --------------------
-------
------------------
-------- ---------------------------这个配置文件告诉 graphql-codegen 在我们的项目中查找所有 .graphql 文件，并将生成的代码输出到 src/generated/graphql.ts 文件中。
注意到 handlebars-helpers 单词在插件名称和配置文件中是复数，而在 npm 包名中是单数（graphql-codegen-plugin-handlebars-helpers）。这是由于 npm 会将插件名称和配置文件名转换为 snake_case，但是包名称必须使用 kebab-case。
我们还需要告诉 graphql-codegen-plugin-handlebars-helpers 去哪里查找 Handlebars helpers。我们可以使用以下配置选项：
helpers: 包含 Handlebars helpers 的目录或文件。
模板
接下来，我们需要编写我们的 Handlebars 模板。例如，我们可以编写一个查询或 mutation 的模板：
------ --- ---- --------------
------ - ----------------- - ---- ------------------------------------
------ - --- ------------- ----------- - ---- ------------- -------- ----
------ ----- --- ------------- ----------- --------------------- ------------- ------------ --- ------------- ----------- - ----
--- ----- --
--在这个模板中，我们使用 <%= ... %> 语法插入模板引擎里的变量，如 operationName 和 fileName。这些变量是在插件代码中设置的。
Helpers
接下来，我们需要编写我们的 Handlebars helpers。例如，我们可以编写一个 helpers 文件来生成日期字符串：
----- ------ - ---------------------------
-------------- - -
---------- ------------- -
------ ------------ --------------
-
-然后，我们可以在模板中使用这个 helper：
----- ---- - ------ --------- ---------------
这个代码会将 createdAt 字段转换为日期格式，并以 YYYY-MM-DD 格式返回。
生成代码
一旦我们完成了模板和 Helper 编写，我们就可以尝试生成代码了。运行以下命令：
--- ---------------
这个命令会读取 codegen.yml 文件，查找我们的 GraphQL Schema 的所有查询和 mutations，从模板生成 TypeScript 类型和代码。
结论
以上就是如何使用 graphql-codegen-plugin-handlebars-helpers npm 包的教程和指导。使用这个包，我们可以快速生成客户端代码，极大地提高了我们的开发效率。
同时，使用 Handlebars 模板和 helpers，我们可以更加灵活地自定义生成的代码，实现更多复杂的逻辑。
了解了这些内容，相信你已经有了许多想法，可以尝试使用这些工具改进你的项目。祝你一切顺利！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f3f3422dbf7be33b2567192