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 编程技能。