ภาพรวมไคลเอนต์ tRPC ที่ปลอดภัยด้านชนิด

ยินดีต้อนรับ

tRPC คืออะไร

การกำหนดเราเตอร์ฝั่งเซิร์ฟเวอร์

import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
const appRouter = t.router({
  getUser: t.procedure.input(z.number()).query(({ input }) => db.getUser(input)),
});

การอนุมานชนิด

export type AppRouter = typeof appRouter;

การตั้งค่าไคลเอ็นต์

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
const trpc = createTRPCProxyClient<AppRouter>({
  links: [httpBatchLink({ url: '/api/trpc' })],
});

การเรียกใช้ไคลเอ็นต์แบบมีชนิด

const user = await trpc.getUser.query(1);
// user is typed as the return type of getUser

การตรวจสอบอินพุตด้วย Zod

t.procedure.input(z.object({ name: z.string(), email: z.string().email() })).mutation(...)

การกลายพันธุ์

const router = t.router({
  createUser: t.procedure.input(CreateUserSchema).mutation(({ input }) => db.create(input)),
});

การผสานรวมกับ React Query

const { data: user } = trpc.getUser.useQuery(1);
// data is typed automatically

การจัดการข้อผิดพลาดใน tRPC

import { TRPCError } from '@trpc/server';
if (!user) throw new TRPCError({ code: 'NOT_FOUND', message: 'User not found' });

tRPC เทียบกับ REST และ GraphQL

ตรวจสอบสั้น ๆ

สรุปภาพรวมไคลเอ็นต์ tRPC แบบปลอดภัยตามชนิด