trpc快速上手

本文主要是介绍trpc快速上手，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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);

这篇关于trpc快速上手的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---