在前端开发中，处理数据的过程是非常重要的，GraphQL 是一个非常强大的数据查询语言，而 apollo-codegen-typescript 是一个非常好用的 npm 包，它能够根据 GraphQL 查询和 JSON 返回值自动生成 TypeScript 类型定义和查询 Hooks，大大降低了我们的工作难度，本文将会为大家介绍如何使用 apollo-codegen-typescript。
安装
首先，我们需要安装 apollo-codegen-typescript，这可以通过 npm 进行安装，打开你的终端并输入以下命令：
npm install -g apollo-codegen-typescript
接下来我们需要在项目中安装相应的 graphql 和 apollo 包，执行以下命令：
npm install graphql @apollo/client
生成 GraphQL 类型定义
之后，我们需要在终端中进入到保存了 gql 的目录下，然后执行以下命令生成 GraphQL 类型定义文件：
apollo-codegen-typescript --schema schema.json --target typescript src/**/*.graphql
其中，--schema 为指定 schema.json 文件位置，--target 为目标文件类型，这里我们选择了 TypeScript，src/**/*.graphql 表示查询语句文件夹的位置，这里我们为了简单处理就将所有的 graphql 都置于 src 文件夹下，如果您有怎样的目录结构，可以根据规则进行相应的修改。
执行完该命令后，会生成所有的 TypeScript 定义文件，这里举个例子：
-- -------------------- ---- -------
-- -------------------
----- --------
------ -------
----- ----
- -
--------
----- ------
---- -----
- -
---
-----
----
-
-
-- -------------------
------ --------- ---------------- -
----- -------
---- -------
-
------ --------- ------- -
-------- --------
-
------ --------- ------- -
--- -------
----- -------
---- -------
-生成 Hooks
接下来我们需要根据 GraphQL 查询自动生成 Hooks，执行以下命令：
apollo-codegen-typescript --schema schema.json --target typescript --output src/__generated__ src/**/*.graphql
其中，--schema 和 --target 含义和上面相同，--output 参数表示生成代码的目录。
执行时，apollo-codegen-typescript 会自动查找定义在 src 目录下的 .graphql 中的所有查询语句，并生成相应的 hooks，比如：
-- -------------------- ---- -------
-- ----------------------------
------ - -- ----- ---- ----------
------ - --- - ---- -----------------
------ - ----------------- -------- - ---- -----------------
------ ----- --------------- - ----
----- -------------- -------- ----- ----- -
------------- ------ ---- ----- -
--
----
---
-
-
--
------ -------- -----------
------------ ------------------------------- ------------------------
- -
------ ----------------------- ---------------------------------------- -------------
-我们只需要在组件中引入这个文件即可完成 Hooks 导入，比如：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ---------------------------
----- ----------- - -- -- -
----- - -------- ------ ---- - - ------------
---------- - ----- ----- ----- ---- -- --
---
-- --------- ------ ------------------
-- ------ -- ------ ------ -------- -------
----- ---- - -------------
------ -
-----
--------------------
------- --------------
------
--
--
------ ------- ------------可以看到这里已经使用了之前生成的 MyQuery 类型定义，自动生成的类型帮助我们避免了很多手写类型的问题，同时生成的 useMyQuery Hook 也让我们的 GraphQL 查询更加简单明了。
总结
通过本教程，我们已经成功的使用 apollo-codegen-typescript 生成了 GraphQL 查询的 TypeScript 类型定义和查询 Hooks，并且使用了 Hooks 以及生成的类型定义，最后对我们遇到的问题有很好的解决助益，在使用上 Apollo + GraphQL + codegen-typescript 组合是非常值得推荐的，它能够极大的提高我们的开发效率和代码的可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/195889