跳至主要内容
版本：11.x

设置 tRPC 客户端

1. 安装 tRPC 客户端库​

使用您喜欢的包管理器安装 @trpc/client 库，并安装包含一些必需类型的 @trpc/server。

npm install @trpc/server@next @trpc/client@next

2. 导入您的 App Router​

将您的 AppRouter 类型导入到客户端应用程序中。此类型包含整个 API 的形状。

ts
import type { AppRouter } from '../server/router';
ts
import type { AppRouter } from '../server/router';
提示

通过使用 import type，您可以确保在编译时会剥离该引用，这意味着您不会无意中将服务器端代码导入到您的客户端。有关更多信息，请参阅 Typescript 文档。

3. 初始化 tRPC 客户端​

使用 createTRPCClient 方法创建一个 tRPC 客户端，并添加一个指向您的 API 的 终止链接 的 links 数组。要了解有关 tRPC 链接的更多信息，请点击这里。

client.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<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 { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<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 代理，它允许您以完全类型安全的方式与您的 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' };

您已全部设置！