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