Skip to main content
Version: 10.x

tRPC 客户端

¥tRPC Client

"普通" tRPC 客户端可用于调用你的 API 过程,就好像它们是本地函数一样,从而实现无缝的开发体验。

¥The "Vanilla" tRPC client can be used to call your API procedures as if they are local functions, enabling a seamless development experience.

ts
import type { AppRouter } from '../path/to/server/trpc';
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
ts
import type { AppRouter } from '../path/to/server/trpc';
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };

何时使用 Vanilla 客户端?

¥When to use the Vanilla Client?

你可能会在两种情况下使用此客户端:

¥You are likely to use this client in two scenarios:

  • 使用我们没有官方集成的前端框架

    ¥With a frontend framework for which we don't have an official integration

  • 使用用 TypeScript 编写的单独后端服务。

    ¥With a separate backend service written in TypeScript.

什么时候不应该使用 Vanilla 客户端?

¥When NOT to use the Vanilla Client?

  • 虽然你可以使用客户端从 React 组件调用过程,但你通常应该使用我们的 React 查询集成。它提供了许多附加功能,例如管理加载和错误状态、缓存和失效的能力。

    ¥While you can use the client to call procedures from a React component, you should usually use our React Query Integration. It offers many additional features such as the ability to manage loading and error state, caching, and invalidation.

  • 我们建议你在调用同一 API 实例的过程时不要使用此客户端,因为调用必须经过网络层。有关调用当前 API 中的过程的完整建议,你可以 在这里阅读更多内容

    ¥We recommend you do not use this client when calling procedures of the same API instance, this is because the invocation has to pass through the network layer. For complete recommendations on invoking a procedure in the current API, you can read more here.