前言
GraphQL 是一种用于 API 的查询语言，它是由 Facebook 在 2012 年创建的，作为一种在获取数据方面更高效、强大和易于使用的替代方案。GraphQL 允许客户端指定请求的数据形式，它在使用 REST API 的情况下可以减少请求数量。TypeScript 是一种面向对象的编程语言，它扩展了 JavaScript 的语法和功能，通过提供静态类型检查来改善代码的可维护性和可读性。在本文中，我将介绍如何使用 TypeScript 来进行 GraphQL 开发，以及实践中的技巧和最佳实践。
前置知识
在开始本文之前，你需要对 GraphQL 和 TypeScript 有一定的了解。此外，你需要安装以下软件：
- Node.js
- NPM 或 Yarn
- VS Code 或任何其他 IDE/文本编辑器
第一步：安装依赖
首先，我们需要安装以下依赖：
npm install graphql apollo-server-express express express-graphql reflect-metadata type-graphql npm install --save-dev @types/express @types/graphql @types/node @types/reflect-metadata @types/type-graphql typescript ts-node-dev
graphql是 GraphQL 库。apollo-server-express是 Express 集成的 GraphQL 服务器。express是一个简单的 Web 框架。express-graphql是 Express 中使用的 GraphQL 中间件。reflect-metadata是一个用于 TypeScript 反射的库，TypeGraphQL 使用它来实现自动化地将类声明转换为 GraphQL 类型定义。type-graphql是一个用于 TypeScript 的 GraphQL 库，它基于类和装饰器（decorators）语法实现 GraphQL schema 风格的构建。
第二步：创建类定义
在 TypeScript 中，你可以使用类定义来映射 GraphQL schema。TypeGraphQL 库为此提供了装饰器。每个装饰器都映射到一个 GraphQL 类型。以下是一些常见的装饰器函数：
@ObjectType- 将类标记为 GraphQL object 类型。@Field- 将类属性标记为 GraphQL field。@Resolver- 将类标记为 GraphQL resolver，用于从服务器上查询数据和变更数据。
以下是一个简单的例子：
-- -------------------- ---- ------- ------ - ----------- ----- - ---- --------------- ------------- ------------ -- ----- -- ------ ----- ---- - -------- ------ ------- -------- ------- ------- -
在这里，我们使用 ObjectType 装饰器标记了 Book 类，并在构造函数中添加了一个描述。同时我们使用 Field 装饰器为 title 和 author 属性添加了一个不再需要在 API schema 中解释的描述。
第三步：创建 resolver
GraphQL resolver 是我们在服务器上执行的函数。我们可以使用 resolver 来读取和变更数据。TypeGraphQL 为此提供了 @Resolver 装饰器。以下是一个简单的例子：
-- -------------------- ---- -------
------ - --------- ----- - ---- ---------------
------ - ---- - ---- ---------
-----------
------ ----- ------------ -
---------------- -- ----- - ------------ ---- --- ---- -- --- --
----- ------- ------------- -
-- ---- --------------
-
-在这里，我们标记了 BookResolver 类，使用 @Query 装饰器为 book 方法添加了一个查询类型，该方法返回一个 Promise 类型的 Book 对象。在 resolver 中我们可以从数据库或者外部 API 中获取数据。
第四步：创建 GraphQL schema
在 GraphQL 中，每个 API endpoint 都必须定义一个 schema（模板），用于解释传入和传出的数据。TypeGraphQL 为此提供了 buildSchema 方法。以下是一个简单的例子：
import { buildSchema } from 'type-graphql';
import { BookResolver } from './book-resolver';
export const schema = await buildSchema({
resolvers: [BookResolver],
emitSchemaFile: true,
validate: false,
});在这里，我们使用 buildSchema 方法生成一个完整的 GraphQL schema。resolvers 选项是一个包含我们创建的所有 resolver 的数组。emitSchemaFile 选项将生成一个 GraphQL schema 文件，它将用于 GraphQL Playground 和任何其他客户端查询库。validate 选项将启用 schema 验证。这将在加载 schema 时运行，并将捕获代码中的任何错误，有利于调试。
第五步：将 GraphQL schema 添加到服务器
现在我们需要将我们的 API 添加到服务器上。以下是一个简单的例子：
-- -------------------- ---- ------- ------ - -- ------- ---- ---------- ------ - ------------ - ---- ------------------------ ------ - ------ - ---- ----------- ----- --- - ---------- ----- ------ - --- -------------- ------ --- ------------------------ --- --- ------------ ----- ---- -- -- -- --------------- ------ ----- -- -------------------------------------------- --
在这里，我们导入 ApolloServer，并将 schema 添加到其中。然后我们将 server 和 app 集成到一起，并将 server 添加到 app 上。
总结
在本文中，我们介绍了如何使用 TypeScript 进行 GraphQL 开发和一些实践中的技巧和最佳实践。我们了解了如何使用 TypeGraphQL 创建类和 resolver，以及如何使用 Express 和 ApolloServer 将 API 添加到服务器上。TypeScript 已经成为前端开发的重要工具之一，它的类型检查可以帮助我们降低错误率，提高代码的可维护性。GraphQL 可以让我们更高效地获取数据，节省传输数据的时间。
参考资料
- https://www.apollographql.com/docs/apollo-server/integrations/middleware/
- https://www.npmjs.com/package/apollo-server-express
- https://www.npmjs.com/package/express-graphql
- https://www.npmjs.com/package/graphql
- https://typegraphql.com/docs/
- https://www.typescriptlang.org/docs/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ceefeeb5eee0b525678ea3