入门

快速浏览一下 tRPC

¥A quick look at tRPC

有关 tRPC 概念的快速视频概述，请查看以下视频：

¥For a quick video overview of tRPC's concepts, check out the videos below:

• 100 秒内的 tRPC

  ¥tRPC in 100 seconds

• 5 分钟内完成 tRPC

  ¥tRPC in 5 minutes

• 15 分钟内的 tRPC

  ¥tRPC in 15 minutes

尝试一下 tRPC

¥Give tRPC a try

尝试 tRPC 的最快方法是在线 REPL。你可以尝试以下一些选项：

¥The fastest way to try tRPC is in an online REPL. Here are some options you can try out:

• 最小的例子 - 一个最小的 Node.js http 服务器，以及一个调用服务器上的函数并将请求记录到控制台的客户端。

  ¥Minimal Example - a minimal Node.js http server, and a client that calls a function on the server and logs the request to the console.

• 最小的 Next.js 示例 - 使用 tRPC 的最小可能的 Next.js 应用。它有一个返回字符串的端点，以及一个调用该端点并显示结果的页面。

  ¥Minimal Next.js Example - the smallest possible Next.js app that uses tRPC. It has a single endpoint that returns a string, and a page that calls that endpoint and displays the result.

如果你喜欢在本地环境中开始，你可以使用我们的 示例应用 之一作为你可以在本地进行试验的入门项目。

¥If you prefer to get started in your local environment, you can use one of our example apps as a starter project that you can experiment with locally.

使用 tRPC

¥Use tRPC

"使用 tRPC" 对于不同的人来说意味着不同的东西。此页面的目标是根据你的目标引导你找到正确的资源。

¥"Using tRPC" means different things to different people. The goal of this page is to guide you to the right resources based on your goals.

在现有 tRPC 项目中变得高效

¥Becoming productive in an existing tRPC project

• 阅读 concepts 页。

  ¥Read the concepts page.

• 熟悉 routers、procedures、context 和 中间件。

  ¥Become familiar with routers, procedures, context, and middleware.

• 如果你使用 React，请阅读 useQuery、useMutation 和 useUtils。

  ¥If you are using React, read about useQuery, useMutation and useUtils.

创建新项目

¥Creating a new project

由于 tRPC 可以存在于许多不同的框架中，因此你首先需要决定在哪里使用它。

¥Since tRPC can live inside of many different frameworks, you will first need to decide where you want to use it.

在后端，有适用于一系列框架的 适配器 以及普通 Node.js。在前端，你可以使用我们的 React 或 Next.js 集成、用于各种其他框架的 第三方集成 或 普通客户端，它可以在 JavaScript 运行的任何地方工作。

¥On the backend, there are adapters for a range of frameworks as well as vanilla Node.js. On the frontend, you can use our React or Next.js integrations, a third-party integration for a variety of other frameworks, or the Vanilla Client, which works anywhere JavaScript runs.

选择堆栈后，你可以使用 template 构建应用，或者使用所选后端和前端集成的文档从头开始。

¥After choosing your stack, you can either scaffold your app using a template, or start from scratch using the documentation for your chosen backend and frontend integration.

将 tRPC 添加到现有项目

¥Adding tRPC to an existing project

将 tRPC 添加到现有项目与启动新项目没有显着差异，因此适用相同的资源。主要挑战是很难知道如何将 tRPC 与现有应用集成。以下是一些提示：

¥Adding tRPC to an existing project is not significantly different from starting a new project, so the same resources apply. The main challenge is that it can feel difficult to know how to integrate tRPC with your existing application. Here are some tips:

• 你无需将所有现有后端逻辑移植到 tRPC。常见的迁移策略是最初仅将 tRPC 用于新端点，然后才将现有端点迁移到 tRPC。

  ¥You don't need to port all of your existing backend logic to tRPC. A common migration strategy is to initally only use tRPC for new endpoints, and only later migrate existing endpoints to tRPC.

• 如果你不确定从哪里开始，请检查后端 adapter 和前端实现以及 示例应用 的文档。

  ¥If you're not sure where to start, check the documentation for your backend adapter and frontend implementation, as well as the example apps.

• 如果你正在寻找 tRPC 作为更大代码库的一部分的灵感，使用 tRPC 的开源项目 中有一些示例。

  ¥If you are looking for some inspiration of how tRPC might look as part of a larger codebase, there are some examples in Open-source projects using tRPC.

加入我们的社区

¥Join our Community

加入我们的 tRPC Discord，分享你的经验、提出问题并从社区获取帮助！

¥Join us in the tRPC Discord to share your experiences, ask questions, and get help from the community!