TypeScript 学习笔记（十）：TypeScript 与 GraphQL 的结合应用

1. 引言

在前几篇学习笔记中，我们探讨了 TypeScript 的基础知识、前后端框架的结合应用、测试与调试技巧以及数据库的结合应用。本篇将重点介绍 TypeScript 与 GraphQL 的结合应用，特别是如何使用 Apollo Server 和 TypeGraphQL 构建强类型的 GraphQL API，以实现更灵活和高效的数据查询。

2. 什么是 GraphQL

GraphQL 是 Facebook 开发的一种用于 API 的查询语言，允许客户端指定所需的数据结构，使得 API 查询更高效灵活。相比于传统的 RESTful API，GraphQL 提供了更强的类型安全和灵活性。

3. TypeGraphQL 介绍

TypeGraphQL 是一个基于 TypeScript 的库，用于构建 GraphQL API。它利用 TypeScript 的类型系统和装饰器语法，使得定义 GraphQL schema 和 resolver 更加直观和类型安全。

3.1 安装 TypeGraphQL 和 Apollo Server

首先，安装 TypeGraphQL、Apollo Server 以及其他必要的依赖。

npm install type-graphql apollo-server reflect-metadata graphql
npm install typescript ts-node @types/node --save-dev

3.2 配置 TypeScript

在项目根目录下创建 tsconfig.json 文件，配置 TypeScript。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "outDir": "./dist"
  },
  "include": ["src"]
}

4. 构建 GraphQL API

4.1 定义 GraphQL 类型

使用 TypeGraphQL 定义 GraphQL 类型。创建一个简单的 User 类型。

// src/types/User.ts
import { ObjectType, Field, Int } from "type-graphql";

@ObjectType()
export class User {
  @Field(() => Int)
  id: number;

  @Field()
  firstName: string;

  @Field()
  lastName: string;

  @Field(() => Int)
  age: number;
}

4.2 定义 GraphQL Resolver

创建一个 UserResolver 来处理用户相关的 GraphQL 查询。

// src/resolvers/UserResolver.ts
import { Resolver, Query, Arg, Mutation, Int } from "type-graphql";
import { User } from "../types/User";

@Resolver()
export class UserResolver {
  private users: User[] = [
    { id: 1, firstName: "John", lastName: "Doe", age: 25 },
    { id: 2, firstName: "Jane", lastName: "Doe", age: 30 },
  ];

  @Query(() => [User])
  getUsers(): User[] {
    return this.users;
  }

  @Query(() => User, { nullable: true })
  getUser(@Arg("id", () => Int) id: number): User | undefined {
    return this.users.find(user => user.id === id);
  }

  @Mutation(() => User)
  createUser(
    @Arg("firstName") firstName: string,
    @Arg("lastName") lastName: string,
    @Arg("age", () => Int) age: number
  ): User {
    const user = { id: this.users.length + 1, firstName, lastName, age };
    this.users.push(user);
    return user;
  }
}

4.3 设置 Apollo Server

使用 Apollo Server 来设置 GraphQL API 服务。

// src/index.ts
import "reflect-metadata";
import { ApolloServer } from "apollo-server";
import { buildSchema } from "type-graphql";
import { UserResolver } from "./resolvers/UserResolver";

async function bootstrap() {
  const schema = await buildSchema({
    resolvers: [UserResolver],
  });

  const server = new ApolloServer({ schema });

  server.listen({ port: 4000 }, () =>
    console.log("Server is running on http://localhost:4000")
  );
}

bootstrap();

5. 使用 GraphQL Playground 测试 API

GraphQL Playground 是一个交互式的 GraphQL IDE，可以在浏览器中测试和调试 GraphQL 查询。

5.1 启动服务器

使用 ts-node 启动 TypeScript 代码。

npx ts-node src/index.ts

5.2 访问 GraphQL Playground

打开浏览器，访问 http://localhost:4000，将看到 GraphQL Playground 界面。

5.3 测试查询和变更

在 GraphQL Playground 中，输入以下查询来测试获取所有用户：

query {
  getUsers {
    id
    firstName
    lastName
    age
  }
}

测试获取单个用户：

query {
  getUser(id: 1) {
    id
    firstName
    lastName
    age
  }
}

测试创建新用户：

mutation {
  createUser(firstName: "Alice", lastName: "Smith", age: 22) {
    id
    firstName
    lastName
    age
  }
}

6. 结合数据库

将 TypeGraphQL 和数据库结合使用，以实现数据持久化。以下示例中使用 TypeORM 连接 MySQL 数据库。

6.1 配置 TypeORM

在项目根目录下创建 ormconfig.json 文件，配置 TypeORM。

{
  "type": "mysql",
  "host": "localhost",
  "port": 3306,
  "username": "root",
  "password": "password",
  "database": "test",
  "synchronize": true,
  "logging": false,
  "entities": ["src/entity/**/*.ts"]
}

6.2 创建实体

将之前的 User 类型转换为 TypeORM 实体。

// src/entity/User.ts
import { Entity, PrimaryGeneratedColumn, Column } from "typeorm";
import { ObjectType, Field, Int } from "type-graphql";

@ObjectType()
@Entity()
export class User {
  @Field(() => Int)
  @PrimaryGeneratedColumn()
  id: number;

  @Field()
  @Column()
  firstName: string;

  @Field()
  @Column()
  lastName: string;

  @Field(() => Int)
  @Column()
  age: number;
}

6.3 更新 Resolver

更新 UserResolver，使用 TypeORM 进行数据库操作。

// src/resolvers/UserResolver.ts
import { Resolver, Query, Arg, Mutation, Int } from "type-graphql";
import { User } from "../entity/User";
import { getRepository } from "typeorm";

@Resolver()
export class UserResolver {
  private userRepository = getRepository(User);

  @Query(() => [User])
  async getUsers(): Promise<User[]> {
    return await this.userRepository.find();
  }

  @Query(() => User, { nullable: true })
  async getUser(@Arg("id", () => Int) id: number): Promise<User | undefined> {
    return await this.userRepository.findOne(id);
  }

  @Mutation(() => User)
  async createUser(
    @Arg("firstName") firstName: string,
    @Arg("lastName") lastName: string,
    @Arg("age", () => Int) age: number
  ): Promise<User> {
    const user = this.userRepository.create({ firstName, lastName, age });
    return await this.userRepository.save(user);
  }
}

6.4 启动服务器并测试

使用 ts-node 启动服务器并测试 GraphQL API。

npx ts-node src/index.ts

7. 结论

在本篇学习笔记中，我们探讨了 TypeScript 与 GraphQL 的结合应用，特别是如何使用 TypeGraphQL 和 Apollo Server 构建强类型的 GraphQL API，并结合 TypeORM 实现数据库操作。通过掌握这些知识，你可以在实际项目中更好地利用 TypeScript 和 GraphQL 的强大功能，提升开发效率和代码质量。

下一篇学习笔记将介绍 TypeScript 与微服务架构的结合应用，希望你能继续关注本系列的学习笔记，进一步提升 TypeScript 编程技能。