GraphQL 是一种新兴的 API 技术，它允许前端开发人员从服务器上取回精确的数据，并且提供了一个良好的传输层。使用 GraphQL 时，服务端会为每个查询提供一定数量的类型信息，这样客户端就可以遵循这些类型信息来更好地结构化数据。但是对于应用程序，这样的类型信息需要转化为适合应用程序内置逻辑的工具。
apollo-codegen 是一个 npm 包，可用于解析服务端自定义的 GraphQL 查询，生成多个将要用到的代码文件，此外还能为 TypeScript 自动添加类型。在这篇文章中我会提供一些简单的示例来演示如何使用它。
安装和初始化
安装：npm install -g apollo-codegen
安装完毕后，你需要在你的项目文件夹中创建配置文件。在这个文件中，你需要设置好 graphql 服务器的完整地址，同时定义好要用到的文件以及文件输出的方式。一个简单的配置文件如下：
-- -------------------- ---- -------
-
--------- ------------------------------------------
------------ -
------------------------
------------------
--
--------- -------------
--------- -------------
-schema 是你的 GraphQL 服务端网址，需要特别注意这个地址必须指向能够访问到 schema 的 /graphql 端点，否则 apollo-codegen 无法正常使用。
documents 是一个用于提供到保存了所有我们需要生成的代码文件的目录/通配符的数组，以及包含这些文件的任何需要的链。
target 则用来说明生成要用的语言。
output 则是输出文件的存放位置和命名格式。
如何使用
在执行 apollo codegen 命令之前，你需要为其提供一个 GraphQL 查询字符串，这个查询字符串被用来生成客户端需要的代码。在代码生成器的documents属性中可以按照你的意愿指定生成查询代码的文件路径。
通过执行以下命令可以生成文件
apollo-codegen download-schema http://localhost:3000/graph/schema.json --output schema.json
将会抓取GraphQL Schema，并把结果写入 schema.json 文件中，之后就可以执行代码生成命令：
apollo-codegen generate ./src/path/to/queries/**/*.graphql --schema schema.json --target typescript --output ./src/generated/graphql-types.ts
一个示例
在这个示例中，我们将会请求一个还没有写完全的 fake API。在 apollo-codegen 帮助下，我们可以在客户端写出一个仅仅知道 处理器 / query 返回了什么信息的 mock API。
服务端
首先，我们开发一个服务端，它将提供一些假数据和少许约束。
-- -------------------- ---- ------- ---- ----- - ----------------- ------- --------- -------- ------ -------- -------- - ---- ------ - --- ---- ---------- ------- --------- ------- ------ ------ - ---- ---- - --- ---- ------ ------- ----- ------- ------ ---- ------- ------ -
客户端
其次，我们创建一个 Apollo 客户端，来发起请求并处理返回数据。
-- -------------------- ---- -------
----- ----------------------- ------- ---------- ------- -
----------------- ----------- --------- ---------- -
---------
--------
----- -
-----
-----
-
-
-在 stdout 中看到处理后的代码类似于：
-- -------------------- ---- -------
------ --------- ----------- -
------ ---- --------- - -
---------- -------
--------- -------
--
------ ---- ----- - -
------------ --------
-------- ------ - -----
--
------ ---- ------ - -
------------ ---------
----------- ------ - -----
---------- ------ - -----
------- ------ - ------- - -----
--
------ ---- ----- - -
------------ -------
------- ------ - -----
------- ------ - -----
--
-
-- -------------- --
-- ---- ---- --- ------------- --------- --- ------ --- -- -------通过 apollo-codegen，可以自动生成最终代码，并且使用跟上面类似的方式访问所有需要的数据。你也可以在代码编写时做一些自动化处理，从而充分利用 GraphQL 的强类型系统，减少后期工作。
总结
在这篇文章中，我们介绍了 apollo-codegen 的使用方法，这个包可以帮助我们更好地利用 GraphQL 的强类型系统，从 GraphQL 服务实现到前端所需的所有类型代码。同时，我们也给出了一个简单的例子以至于你可以自己动手试试。这个方案将自动化生成前端代码，并且利用 GraphQL 的类型系统，减少代码的错误率和后期大量开发代码的工作。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/109835