1. 简介
graphql-codegen-typescript-server 是一个 NPM 包，它可以根据 GraphQL 查询和模式自动生成 TypeScript 代码，使得开发者可以在后端和前端之间更轻松地共享类型和代码。它完全免费且开源，支持创建框架无关的 GraphQL 服务器，并且具有许多定制选项以满足不同的需求。
2. 安装
npm install --save-dev graphql-codegen-typescript-server
3. 配置
在项目的根目录下创建一个 codegen.yml 文件，用于配置生成的 TypeScript 代码。示例配置如下：
-- -------------------- ---- -------
---------- ----
------- ----------------------
----------
---------------------
--------
- ------------
- -----------------------
- -------------------
-------
---------- ----
---------- -------------
------------ -----------------------以上配置将生成以下代码：
-- -------------------- ---- ------- ------ - --- - ---- -------------- ------ ---- -------- - - --- ------- ----- ------- ------ ------- -- ------ ---- --------- - - ------ ----------- -- ------ ---- ------------ - - ---------------- ------- ------ -------- --------- -- ------ ---- ---------------- - - ---------- --------- -- ------ ---- ----------- - -- -- ------- ---- ---- ------ ------- ---- ------ --------- ------------- - -------- ------------ - ------ --------- ------------ - -------- ------------ ------- ------- ---------- ---- - ------ --------- ------------ - ----- ------- -
具体的配置说明如下：
overwrite：如果为true，则会在同样的文件名下覆盖已有的文件。schema：GraphQL Schema 文件的路径。generates：生成的文件和使用的插件。plugins：用于生成 TypeScript 代码的插件，包括typescript、typescript-operations、typescript-server。config：每个插件的配置选项。这里只列举了一些常用的选项。onlyQuery：如果为true，则只会生成与查询相关的代码。gqlImport：用于导入 GraphQL 查询字符串的库的名称。contextType：用于指定上下文类型的模块的路径。更多关于上下文的信息，请参见文档。
4. 使用
4.1. 生成 TypeScript 代码
npx graphql-codegen
此命令将根据 codegen.yml 文件中的配置生成 TypeScript 代码。
4.2. 集成到项目中
将生成的 TypeScript 代码复制到项目中。如果你的后端代码是使用 TypeScript 编写的，则可以像这样导入它：
-- -------------------- ---- ------- ------ - ------------- --------- - ---- ------------------- ----- ------- ------------ - - -------- --- ------- ------------------------- ---------- -- -- ------- ---- ---- ------ --------- -- ------------------
4.3. 使用示例
在前端代码中，你可以通过向服务器发送 GraphQL 查询来使用生成的 TypeScript 代码。以下是一个示例：
-- -------------------- ---- -------
------ - --- - ---- --------------
------ ------------ ---- ---------------
----- ------ - --- --------------
---- -------------------------------
---
----- ----- - ----
----- -
----- -
--
----
-----
-
-
--
-------------- ----- -------------- -- --------------------------这将输出：
-- -------------------- ---- -------
-
-------- -
-
----- --
------- -------
-------- ------------------
--
-
----- --
------- -------
-------- ------------------
-
-
-5. 结论
graphql-codegen-typescript-server 是一个非常方便的工具，可以帮助你更快地开发 GraphQL 服务器，并提供类型安全的查询和响应。感谢你阅读了本文，希望它对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad42b5cbfe1ea0610c2f