Web
🥌tRPC & Zod
00 分钟
2023-3-28
2023-3-29
type
status
date
slug
summary
tags
category
icon
password
Edited
Mar 29, 2023 04:14 PM
Created
Mar 28, 2023 08:49 AM

RPC

RPC协议的主要目的是做到不同服务间调用方法像同一服务间调用本地方法一样
RPC（Remote Procedure Call）远程过程调用协议，一种通过网络从远程计算机上请求服务，而不需要了解底层网络技术的协议。RPC它假定某些协议的存在，例如TPC/UDP等，为通信程序之间携带信息数据。在OSI网络七层模型中，RPC跨越了传输层和应用层，RPC使得开发，包括网络分布式多程序在内的应用程序更加容易。

tRPC

tRPC - Move Fast and Break Nothing. End-to-end typesafe APIs made easy. | tRPC
End-to-end typesafe APIs made easy. Automatic typesafety & autocompletion inferred from your API-paths, their input data, & outputs 🧙‍♂️
tRPC - Move Fast and Break Nothing. End-to-end typesafe APIs made easy. | tRPC
https://trpc.io/
tRPC - Move Fast and Break Nothing. End-to-end typesafe APIs made easy. | tRPC
tRPC 是一个基于 TypeScript 的远程过程调用框架，旨在简化客户端与服务端之间的通信过程，并提供高效的类型安全。它允许您使用类似本地函数调用的方式来调用远程函数，同时自动处理序列化和反序列化、错误处理和通信协议等底层细节。
官方 Feature
  • Automatic type-safety（自动类型安全）
  • Snappy DX（敏捷高效的开发者体验）
  • Is framework agnostic （不依赖于特定框架）
  • Amazing autocompletion（出色的自动补全功能）
  • Light bundle size（轻量级打包大小）
完全可以使用 trpc 来替代 http，只不过写法上从 发送 http 请求 ⇒ 调用本地函数
 
而 trpc 又以类型安全与高效著称，如果你的 Web 应用的程序是基于 typescript，并且需要有高效的性能，那么 tRPC 就是一个很好的选择。
tRPC 可以作为 REST/GraphQL 的替代品，如果前端与后端共享代码的 TypeScript monorepo，trpc 则可以无需任何类型转换，也不太会有心智负担。
请记住，tRPC 只有当您在诸如 Next、Nuxt、SvelteKit、SolidStart 等全栈项目中使用 TypeScript 时，tRPC 才会发挥其优势。
 
我们将使用 NextJS 来使用tRPC

Next.js Integration

集成了 React Query
我们的 Next.js 集成建立在与一些 Next.js 特定 API 的 React Query 集成 之上，以处理客户端和服务器端渲染。
使用 Next.js 集成时，您将获得以下功能：
  • Server-sider rendering
      • 可以指示 tRPC 在服务器上呈现页面，然后在客户端上向它们注水。这样，您将避免初始加载状态，尽管服务器将阻止第一个字节的时间。
  • Static site generation
      • 在服务器上预查询并生成可供使用的静态 HTML 文件。
  • Automatic Provider Wrapping
      • 提供高阶组件 （HOC），该组件使用必要的提供程序包装应用，因此您不必自己执行此操作。@trpc/next

文件结构

Zod

TypeScript-first schema validation with static type inference
TypeScript-first schema validation with static type inference
https://zod.dev/
TypeScript-first schema validation with static type inference
Zod 是一个以 TypeScript 为首的模式声明和验证库 ，弥补了 TypeScript 无法在运行时进行校验的问题
Zod 既可以用在服务端也可以运行在客户端，以保障 Web Apps 的类型安全

安装

要求：
  • TypeScript 4.5+!
  • 您必须在tsconfig.json中启用严格模式。这是所有TypeScript项目的最佳实践。
  • install

基本用法

创建一个简单的字符串模式

创建对象模式

被用于校验未知的 API 返回内容

基本

coerce 原始值

 
📌
… 更多类型检验可以看官网
或
【超详细】Zod 入门教程 - 掘金
Zod 是一个以 TypeScript 为首的模式声明和验证库 ，弥补了 TypeScript 无法在运行时进行校验的问题 ，既可以用在服务端也可以运行在客户端，以保障 Web Apps 的类型安全
【超详细】Zod 入门教程 - 掘金
https://juejin.cn/post/7163548790787358756#heading-13

Next & tRPC & Zod使用

1. 安装

安装Next
安装tRPC
安装Zod

2. 启用 TypeScript 严格模式

3. 创建 tRPC 路由

server/trpc.ts
 
server/routers/_app.ts
 
pages/api/trpc/[trpc].ts

4. 创建 tRPC hooks

utils/trpc.ts

5. 配置 _app.tsx

在trpc中包装您的根应用程序页面。withTRPC高阶组件
pages/_app.tsx

6. API 请求

pages/index.tsx
到目前为止，我们就可以在首页上访问到查询的API了
 

深入

procedure

用于向路由器添加查询过程/端点。此过程的两种方法是：procedure.query()
  • input
      • （可选）：如果提供，这应该是一个验证和强制转换此过程输入的函数。当输入有效时，它应返回强类型值，如果输入无效，则应引发错误。我们建议使用 TypeScript 验证库（如 Zod）进行输入验证。
  • query
      • 这是过程的实现（“解析器”）。它是一个具有单个参数的函数，用于表示传入的请求。经过验证的（和强类型！）输入将传递到 。req req.input

mutation procedure

类似与POST请求

client 使用

 
 
📌
实现端到端的类型安全
通过服务端的AppRouter，导入type到client使用
 

配置 tRPC

Context

上下文，全局属性
Context | tRPC
Your context holds data that all of your tRPC procedures will have access to, and is a great place to put things like database connections or authentication information.
Context | tRPC
https://trpc.io/docs/server/context
Context | tRPC

Middlewares

中间件
Middlewares | tRPC
You are able to add middleware(s) to a procedure with the t.procedure.use() method. The middleware(s) will wrap the invocation of the procedure and must pass through its return value.
Middlewares | tRPC
https://trpc.io/docs/server/middlewares
Middlewares | tRPC

多路由

Merging Routers | tRPC
Writing all API-code in your code in the same file is not a great idea. It's easy to merge routers with other routers.
Merging Routers | tRPC
https://trpc.io/docs/server/merging-routers
Merging Routers | tRPC
 

T3

Create T3 App
The best way to start a full-stack, typesafe Next.js app.
Create T3 App
https://create.t3.gg/
Create T3 App
The best way to start a full-stack, typesafe Next.js app
notion image
 

参考链接

  1. Typescript 全栈最值得学习的技术栈 TRPC - 掘金 (juejin.cn)
  1. Quickstart | tRPC
  1. Zod | Documentation
 
上一篇
NextAuth
下一篇
框架原理 —— mini-react
评论
Loading...
目录