JavaScript - tRPC 库

tRPC 是一个类型安全的 TypeScript 模块，它使用 RPC API 设计来处理 API 请求并返回结果。

RPC 指的是远程过程调用 (RPC)。tRPC 建立在 RPC 之上。RPC 是一种用于创建类似 REST API 的架构方法。RPC 取代了 Fetch API 和 REST API。

什么是 tRPC?

顾名思义，tRPC 在 RPC 架构框架中添加了一个类型安全层。传统上，我们使用 RESTful API。它支持 GET、POST、PULL 和其他请求类型。tRPC 没有请求类型。

每个发送到 tRPC 后端的请求都会经过一个查询系统，该系统会根据输入和查询返回响应。

但是，tRPC 和 react-query 提供了用于处理请求的内置函数。每个请求的处理方式相同。这取决于 API 端点是接受输入、抛出输出还是修改输出。

使用 REST 时，您需要创建一个名为 /API 的主文件夹，然后在其中路由文件。使用 tRPC 时，不需要包含大量文件的文件夹。您需要一些内置函数和一个简单的 React-Query 系统。

您无需调用 retrieve() 来处理输出等等。正如您将看到的，tRPC 使用 URL 来描述单个查询。

tRPC 的必要性

tRPC 库使 RPC 类型更加安全。这意味着您的客户端无法发送服务器无法接受的数据。例如，我无法将字符串赋值给基于数字的属性。

如果客户端尝试这样做，您将立即收到一条错误消息，提示"类型无效"。如果数据类型不匹配，IDE 和浏览器就会出现问题。

JavaScript 应用程序非常依赖类型安全。因此，tRPC 充分利用了 TypeScript。这减少了路由构建和后端处理。

tRPC 需要 Zod 库。它帮助 tRPC 为每个路由构建数据模式。模式是一个包含属性及其匹配数据类型的对象。

例如，如果某个 API 路由需要用户信息，您可以在后端创建一个对象，并使用 Zod 为每个属性提供一个数据类型。

在前端，tRPC 将确保用户或 API 请求提供的数据与后端记录的数据类型匹配。tRPC 利用了这种前后端之间的安全集成。

tRPC 的使用

只需几秒钟即可启动 Express 服务器并开始创建 tRPC 路由和查询。传统上，客户端(前端)和服务器端(后端)是分开的。因此，在本例中，我们遵循这种分离。首先，使用 React 创建客户端，然后使用 Express 通过 CORS 将其连接到服务器端。

文件夹结构

首先，创建一个名为 tRPC Demo 的目录。在此目录中，创建一个名为 trpclibrary 的新目录，用于划分客户端和服务器端，稍后将以库的形式执行。

您的服务器 (Express) 和客户端 (React) 很快将放置在 trpclibrary 目录下。

将 package.json 文件插入 tRPC Demo 根目录，并添加以下代码以连接所有文件夹，并使用单个命令运行客户端和服务器端。

{
  "name": "trpclibrary",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "private": true,
  "scripts": {
    "start": "concurrently \"wsrun --parallel start\""
  },
  "workspaces": [
    "trpclibrary/*"
  ],
  "devDependencies": {
    "concurrently": "^5.2.0",
    "wsrun": "^5.2.0"
  }
}

在根目录中完成 package.json 文件后，您可以在 trpclibrary 文件夹中设置 Express 服务器。

使用 cd <folder_name> 转到终端中的文件夹并执行指令。在本例中，您位于根目录。因此，cd.rpclibrary 可以帮助您。您也可以使用 Visual Studio Code 终端。

您可以使用 npx create-mf-app 启动器命令，使用预定义模板启动服务器，从而节省时间。

PS C: \Users\abc\Desktop	RPC-Demo	rpclibrary> npx create-mf-app
? Pick the name of your app: server-side
? Project Type: API Server
? Port number: 3005
? Template: express
Your 'server-side' project is ready to go.

Next steps:

 cd server-side
 npm install
 npm start

您可能会看到错误，提示您未安装 Express 或其他库。请放心，您可以安装所有必要的库。

创建服务器后，让我们在相同的 trpclibrary 目录中使用 React 和相同的命令创建客户端。

PS C: \Users\abc\Desktop	RPC-Demo	rpclibrary> npx create-mf-app
? Pick the name of your app: client-side
? Project Type: Application
? Port number: 3000
? Framework: react
? Language: typescript
? CSS: Tailwind
? Bundler: Webpack
Your 'client-side' project is ready to go.

Next steps:

 cd client-side
 npm install
 npm start

你的 React 客户端现在已经准备就绪。但是，你可能会被模块和包相关的大量错误弄得不知所措。所以，让我们先下载它们。

我使用的是 yarn，也建议你这样做。在 trpcDemo 根目录中，运行 yarn 命令。

也可以使用 cd.. 命令退出当前目录并进入外部目录。

TS 配置文件可能不存在于服务器端或客户端。因此，我建议在两个目录中都使用 npx tsc --init 命令。

PS C: \Users\abc\Desktop	RPC-Demo	rpclibrary> npx tsc --init         

Created a new tsconfig.json with:                                                                                       
                                TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

You can learn more at https://aka.ms/tsconfig

您现在必须在项目的服务器端安装 tRPC、CORS 和 Zod。

PS C: \Users\abc\Desktop	RPC-Demo	rpclibrary> yarn add @trpc/server zod cors 
yarn add v1.22.22
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
"workspace-aggregator-b6ab05ef-dbef-4a8e-831d-1f0ec5e2a670 > server-side > ts-node@1
warning pes/node@*".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 3 new dependencies. info Direct dependencies
info All dependencies
@trpc/server@10.45.2
cors@2.8.5
zod@3.23.8
Done in 15.15s.

接下来，安装 @trpc/client、@trpc/react-query、@tanstack/react-query、@trpc/server 以及客户端的 Zod。您将使用相同的"yarn add <package_names>"命令。

这次，我不会分享屏幕截图。请参考之前的步骤并尝试下载它们。

我们已经完成了大部分安装和设置。您的文件夹结构应如下所示:

tRPC-Demo
 trpclibrary
    client-side (React App Folder)
    server-side (Express Server Folder)
 package.json