tRPC (Type-safe Remote Procedure Call) 是一个用于构建类型安全的 API 的框架,它能够在前端和后端之间共享类型,确保类型安全性。这对于使用 TypeScript 的项目特别有用,因为它消除了前后端类型不一致的问题,提高了开发效率和代码质量。
trpc也可以集成到 Express, Fastify,Next中。Example Apps | tRPC
server/index.ts
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import { appRouter } from './router';
import cors from 'cors';
const server = createHTTPServer({
middleware: cors(),
router: appRouter,
});
server.listen(3000, () => {
console.log("server running on 127.0.0.1:3000");
});
server/router.ts
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;
// 将定义类型传递给客户端
export type AppRouter = typeof appRouter;
export const appRouter = router({
// 查询
userList: publicProcedure
// 挂载中间件
.use(async (opts) => {
console.log('middleware1!');
return opts.next();
})
.use(async (opts) => {
console.log('middleware2!');
return opts.next();
})
// 定义响应数据类型
.output(
z.array(z.object({
id: z.number(),
name: z.string(),
age: z.number(),
})),
)
.query(async () => {
return [{ id: 1, name: "Tom", age: 21 }];
})
,
// 参数查询
userById: publicProcedure
// 定义接收参数类型
.input(z.string())
.query(async (opts) => {
const { input } = opts;
console.log("userById receive params:", input);
return 'ok';
}),
// 修改
userCreate: publicProcedure
.input(z.object({ name: z.string() }))
.mutation(async (opts) => {
const { input } = opts;
console.log("userCreate receive params:", input);
return 'update';
}),
});
client.ts
import { createTRPCClient, httpLink, httpBatchLink, loggerLink } from '@trpc/client';
import type { AppRouter } from '../server/router';
// httpBatchLink 也能单独发送请求,会进行一定会时间等待
const trpc = createTRPCClient<AppRouter>({
links: [
loggerLink({ enabled: (_opts) => false, }),
httpBatchLink({
url: 'http://localhost:3000',
}),
httpLink({
url: 'http://localhost:3000',
})
],
});
// const list=await trpc.userList.query();
// console.log(list);
// 发送条件查询
const user = await trpc.userById.query('1');
console.log(user);
// 发送修改请求
const createdUser = await trpc.userCreate.mutate({ name: 'sachinraja' });
console.log(createdUser);
// const user2 = await trpc.userById.query(123);
// console.log(user2);
// const createdUser2 = await trpc.userCreate.mutate({ name:"123", age: 21 });
// console.log(createdUser2);