trpc
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChinesetRPC Quick Start
tRPC快速入门
Backend Router
后端路由
typescript
import { initTRPC, TRPCError } from "@trpc/server";
import { z } from "zod";
export const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;
export const myRouter = router({
getItem: publicProcedure
.input(z.object({ id: z.string() }))
.query(async ({ input }) => {
return await getItem(input.id);
}),
updateItem: publicProcedure
.input(z.object({ id: z.string(), data: z.any() }))
.mutation(async ({ input }) => {
return await updateItem(input.id, input.data);
}),
});
export const appRouter = router({
healthCheck: publicProcedure.query(() => "OK"),
my: myRouter,
});
export type AppRouter = typeof appRouter;typescript
import { initTRPC, TRPCError } from "@trpc/server";
import { z } from "zod";
export const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;
export const myRouter = router({
getItem: publicProcedure
.input(z.object({ id: z.string() }))
.query(async ({ input }) => {
return await getItem(input.id);
}),
updateItem: publicProcedure
.input(z.object({ id: z.string(), data: z.any() }))
.mutation(async ({ input }) => {
return await updateItem(input.id, input.data);
}),
});
export const appRouter = router({
healthCheck: publicProcedure.query(() => "OK"),
my: myRouter,
});
export type AppRouter = typeof appRouter;Frontend Client
前端客户端
typescript
import { createTRPCClient, httpBatchLink } from "@trpc/client";
import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
import type { AppRouter } from "./path/to/router";
import { QueryClient } from "@tanstack/react-query";
export const queryClient = new QueryClient();
export const trpcClient = createTRPCClient<AppRouter>({
links: [httpBatchLink({ url: "/api/trpc" })],
});
export const trpc = createTRPCOptionsProxy<AppRouter>({
client: trpcClient,
queryClient,
});typescript
import { createTRPCClient, httpBatchLink } from "@trpc/client";
import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
import type { AppRouter } from "./path/to/router";
import { QueryClient } from "@tanstack/react-query";
export const queryClient = new QueryClient();
export const trpcClient = createTRPCClient<AppRouter>({
links: [httpBatchLink({ url: "/api/trpc" })],
});
export const trpc = createTRPCOptionsProxy<AppRouter>({
client: trpcClient,
queryClient,
});Usage
使用方法
typescript
const { data } = useQuery(trpc.my.getItem.queryOptions({ id }));
const mutation = useMutation(trpc.my.updateItem.mutationOptions());typescript
const { data } = useQuery(trpc.my.getItem.queryOptions({ id }));
const mutation = useMutation(trpc.my.updateItem.mutationOptions());Error Handling
错误处理
typescript
throw new TRPCError({
code: "NOT_FOUND",
message: "Resource not found",
});typescript
throw new TRPCError({
code: "NOT_FOUND",
message: "Resource not found",
});Advanced
进阶内容
- Subscriptions: See SUBSCRIPTIONS.md
- Server Adapters: See ADAPTERS.md
- Context: See CONTEXT.md
- Router Merging: See ROUTERS.md
- Middleware: See MIDDLEWARE.md
- Frontend Patterns: See FRONTEND.md
- Client Links: See LINKS.md
- Schemas: See SCHEMAS.md
- Client Errors: See CLIENT_ERRORS.md
- Install: See INSTALL.md
- 订阅功能:查看SUBSCRIPTIONS.md
- 服务器适配器:查看ADAPTERS.md
- 上下文配置:查看CONTEXT.md
- 路由合并:查看ROUTERS.md
- 中间件:查看MIDDLEWARE.md
- 前端模式:查看FRONTEND.md
- 客户端链接:查看LINKS.md
- Schema配置:查看SCHEMAS.md
- 客户端错误:查看CLIENT_ERRORS.md
- 安装指南:查看INSTALL.md