简介
在前端开发中，GraphQL 已经成为了一种流行的数据查询语言。在使用 GraphQL 进行数据查询时，通常需要使用工具来根据 GraphQL schema 自动生成 TypeScript 或 Flow 类型的定义，这极大地提升了开发效率。
其中一个经典的工具就是 apollo-codegen。npm 包 apollo-codegen-typescript-legacy 就是一个 apollo-codegen 插件，用于将 GraphQL schema 转换成 TypeScript。本文将介绍如何使用 apollo-codegen-typescript-legacy 进行代码生成，以及如何在 TypeScript 项目中使用生成的代码。
安装和配置
首先，需要在项目中安装 apollo-codegen 和 apollo-codegen-typescript-legacy：
npm install apollo-codegen apollo-codegen-typescript-legacy --save-dev
接下来，在项目的 package.json 文件中添加代码生成命令，例如：
"scripts": {
"generate:schema": "apollo-codegen download-schema https://my-graphql-endpoint.com/graphql --output schema.json",
"generate:types": "apollo-codegen generate src/**/*.{ts,tsx} --schema schema.json --target typescript --output src/queries/types.ts --legacy",
"generate": "npm run generate:schema && npm run generate:types"
}以上代码定义了三个命令：
- generate:schema：下载项目中使用到的 GraphQL schema，并保存为 JSON 文件。
- generate:types：根据 schema 文件生成 TypeScript 类型定义代码，并保存到 src/queries/types.ts 文件中。
- generate：依次执行 generate:schema 和 generate:types。
其中，generate 命令可以在编写代码时执行，以便在 schema 更新时重新生成代码文件。另外，需要注意使用的是 --legacy 参数，用于指定使用 apollo-codegen-typescript-legacy 插件进行代码生成。
使用示例
假设我们有一个 GraphQL schema，其中包含一个查询类型和一个 mutation 类型，如下所示：
-- -------------------- ---- ------- ---- ----- - --------- -------- ----------- ----- ----- - ---- -------- - ------------- -------- ---- ------ ----- - ---- ---- - --- --- ----- ------- ---- ---- -
根据该 schema ，我们可以使用以下代码生成 TypeScript 的类型定义：
-- -------------------- ---- ------- -- -------------------- ------ --------- ----------------- -- ------ --------- ---------------- - --- ------- - ------ --------- ------------------- - ----- ------- ---- ------- - ------ --------- ---- - --- ------- ----- ------- ---- ------- - ------ --------- ----- - --------- ------- -------- ----- - ------ --------- -------- - -------- ----- -
在 TypeScript 项目中使用生成的类型定义也很简单。以使用 apollo-client 进行数据查询为例：
-- -------------------- ---- -------
------ ------------ ---- ----------------
------ - ------ -------- - ---- ------------------
----- ------ - --- --------------
-- --- ----
---
----- ------------- - ----
----- -
-------- -
--
----
---
-
-
--
---------------------
------ -------------
-------------- -- -
----------------------------------
---
----- --------------- - ----
--------------- -------- ----- ----- -
------------- ------ ---- ----- -
--
----
---
-
-
--
-------------------------
--------- ----------------
---------- -
----- -------
---- --
-
-------------- -- -
---------------------------------
---在上述示例中，我们直接使用生成的类型定义中定义的 Query 和 Mutation 类型，以及其中定义的 allUsers 和 addUser 方法。这样做可以避免手写类型定义的繁琐工作，提高代码的可维护性和健壮性。需要注意的是，需要使用 client.query 或 client.mutate 方法进行数据查询，并声明期望的返回类型 Query 或 Mutation。
结论
通过使用 npm 包 apollo-codegen-typescript-legacy，我们可以方便地将 GraphQL schema 转换成 TypeScript 类型定义，避免了手写类型定义的繁琐工作，并提高了代码的可维护性和健壮性。希望本文能对大家使用 apollo-codegen-typescript-legacy 提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/197136