trpc

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

tRPC 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