跳至主内容
版本：10.x

设置 tRPC 客户端

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

1. 安装 tRPC 客户端库​

使用你喜欢的包管理器安装 @trpc/client 库，同时安装包含必需类型的 @trpc/server。

bash
npm install @trpc/client @trpc/server
bash
npm install @trpc/client @trpc/server

2. 导入你的应用路由​

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

将你的 AppRouter 类型导入客户端应用中。该类型包含了整个 API 的结构定义。

ts
import type { AppRouter } from '../server/router';
ts
import type { AppRouter } from '../server/router';
技巧

使用 import type 可以确保类型引用在编译时被剥离，避免无意中将服务端代码导入客户端。更多信息请参阅 TypeScript 文档。

3. 初始化 tRPC 客户端​

使用 createTRPCProxyClient 方法创建 tRPC 客户端，并在 links 数组中添加指向你 API 的终止链接。了解更多关于 tRPC 链接的信息，请点击此处。

client.ts
ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
      // You can pass any HTTP headers you wish here
      async headers() {
        return {
          authorization: getAuthCookie(),
        };
      },
    }),
  ],
});
client.ts
ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
      // You can pass any HTTP headers you wish here
      async headers() {
        return {
          authorization: getAuthCookie(),
        };
      },
    }),
  ],
});

4. 使用 tRPC 客户端​

底层实现会创建类型化的 JavaScript Proxy，让你能够以完全类型安全的方式与 tRPC API 交互：

client.ts
ts
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
const frodo = await client.createUser.mutate({ name: 'Frodo' });
// => { id: 'id_frodo', name: 'Frodo' };
client.ts
ts
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
const frodo = await client.createUser.mutate({ name: 'Frodo' });
// => { id: 'id_frodo', name: 'Frodo' };

全部设置完成！