如何在现有应用中用 vanilla tRPC 客户端通过 httpBatchLink 完成首次类型安全请求【免费下载链接】trpc♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy.项目地址: https://gitcode.com/GitHub_Trending/tr/trpc如果你的应用不是 React 或 Next.js 环境或者你想从另一个服务端调用 tRPC API可以引入 tRPC 的 Vanilla Client用httpBatchLink作为终止 link 指向你的 tRPC 服务端发出第一次完整的类型安全请求。这篇文章给出从零到第一次拿到query/mutation返回值的完整操作路径并说明如何验证类型安全和批处理行为。前提是你的项目中已经有一个 tRPC 服务端或打算按仓库示例先跑一个本地服务并且客户端代码能拿到服务端的AppRouter类型。仓库中 examples/minimal 的 README 说明其运行需要 Node 18依赖全局fetch如果你要在本地起一个测试服务这是文档给出的环境要求。安装 trpc/client 与 trpc/server按 Set up a tRPC Client 的说明需要安装两个包trpc/client客户端实现和trpc/server提供一些必需的 TypeScript 类型。使用你偏好的包管理器npm install trpc/server trpc/client其他包管理器对应的命令来自文档同一处安装片段yarn add trpc/server trpc/client pnpm add trpc/server trpc/client bun add trpc/server trpc/client deno add npm:trpc/server npm:trpc/client从服务端导入 AppRouter 类型类型安全的关键是客户端导入服务端的AppRouter类型——文档原话是这个类型holds the shape of your entire API承载你整个 API 的形状。推荐用import type这样引用会在编译期被擦除不会把服务端代码打包进客户端// utils/trpc.ts import type { AppRouter } from ../server/router;一个典型的服务端路由长这样来自文档示例注意它导出了AppRouter类型// server/router.ts import { initTRPC } from trpc/server; import { z } from zod; const t initTRPC.create(); const appRouter t.router({ post: t.router({ byId: t.procedure .input(z.object({ id: z.string() })) .query(async ({ input }) { return { id: input.id, title: Hello }; }), }), }); export type AppRouter typeof appRouter;用 httpBatchLink 初始化客户端用createTRPCClient创建客户端links数组中放入一个终止 linkterminating link。根据 Links Overviewlinks数组至少需要包含一个 link且链的末尾必须是终止 link——终止 link 负责把组合好的 tRPC 操作真正发送到服务端并返回OperationResultEnvelope如果links末尾没有终止 link请求根本不会发出去。httpBatchLink是文档推荐的终止 link。最小可用配置只需urlimport { createTRPCClient, httpBatchLink } from trpc/client; import type { AppRouter } from ./server; const client createTRPCClientAppRouter({ links: [ httpBatchLink({ url: http://localhost:3000/trpc, }), ], });url指向你的 tRPC API 地址上面的地址是文档示例值替换成你自己的服务端地址。文档同时给出了带鉴权请求头的写法headers可以是对象也可以是一个接收{ opList }的回调可以 asyncimport { createTRPCClient, httpBatchLink } from trpc/client; import type { AppRouter } from ./server; declare function getAuthCookie(): string; const client createTRPCClientAppRouter({ links: [ httpBatchLink({ url: http://localhost:3000/trpc, // You can pass any HTTP headers you wish here async headers() { return { authorization: getAuthCookie(), }; }, }), ], });发起首次类型安全请求客户端底层是一个带类型的 JavaScript Proxy你可以直接按路由结构调用query和mutation。文档示例中的调用与文档标注的示例返回结果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 Overview 的说明客户端会基于AppRouter提供补全、正确类型化返回数据并且在你写出与后端形状不匹配的请求时显示错误——也就是说传入错误类型的入参、调用不存在的路由TypeScript 会在编译期直接报错这就是首次接入的核心验证点。仓库 examples/minimal 的 README 也建议通过编辑 ts 文件来观察 type checking 的实际效果。如果你需要本地起一个可命中的服务端来跑通整个链路可以参考 examples/minimal其服务端用createHTTPServer在 3000 端口监听见 src/server/index.tsREADME 给出的启动方式是npm i npm run dev该示例的客户端本身使用的是httpBatchStreamLink见 src/client/index.ts如果你坚持用httpBatchLink只需把它换成上一节的配置即可示例的运行输出Users:、Created user:等console.log可以参照判断请求是否真的返回了数据。确认批处理Promise.all 只发一个 HTTP 请求httpBatchLink是一个批处理终止 link它会把一次 tick 内的多个 tRPC 操作合并成单个 HTTP 请求。按 HTTP Batch Link 的说明把多个 procedure 放进Promise.allwill produce exactlyoneHTTP request and on the server exactlyonedatabase query恰好产生一个 HTTP 请求、服务端恰好一次数据库查询const somePosts await Promise.all([ trpc.post.byId.query(1), trpc.post.byId.query(2), trpc.post.byId.query(3), ]);如果你的服务端通过 HTTP 请求计数或访问日志能观察到这三个调用只对应一次请求批处理就按预期工作了。批处理相关的已知限制URL 过长报错批处理请求的 URL 有时会过大触发413 Payload Too Large、414 URI Too Long或404 Not Found。文档给出的对策是设置maxURLLength限制单批可合并的操作数const client createTRPCClientAppRouter({ links: [ httpBatchLink({ url: http://localhost:3000, maxURLLength: 2083, // a suitable size // alternatively, you can make all RPC-calls to be called with POST // methodOverride: POST, }), ], });maxURLLength和maxItems的默认值均为Infinity不限制以上限值为文档示例值按你的网关/代理实际限制调整。服务端限制批次大小时客户端要跟随服务端任意适配器都可以传maxBatchSize例如createHTTPServer({ maxBatchSize: 10 })超过该限制的服务端会以400 Bad Request拒绝请求。此时客户端应配置对应的maxItemsshould be the same or lower than the servers maxBatchSize超出部分会自动拆成多个 HTTP 请求。如果服务端用allowBatching: false关闭了批处理客户端应把httpBatchLink换成httpLink。完整选项参考httpBatchLink接收HTTPBatchLinkOptions在HTTPLinkOptions基础上扩展字段与用途以 HTTP Batch Link 的类型定义为准urlstring 或 URL必填指向 tRPC 服务端fetch为fetch提供 ponyfilltransformer数据转换器headers静态头对象或按opList动态返回的回调maxURLLengthURL 超过该长度时把操作拆成多个请求默认InfinitymaxItems单批请求中允许的最大操作数默认Infinity。到这里客户端已经能发出第一次类型安全请求。后续如果要在链中加入日志、条件拆分等 link可以继续阅读 Links Overview它同时说明了非终止 link如loggerLink可以放在httpBatchLink之前组进链里。【免费下载链接】trpc♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy.项目地址: https://gitcode.com/GitHub_Trending/tr/trpc创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何在现有应用中用 vanilla tRPC 客户端通过 httpBatchLink 完成首次类型安全请求
如何在现有应用中用 vanilla tRPC 客户端通过 httpBatchLink 完成首次类型安全请求【免费下载链接】trpc♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy.项目地址: https://gitcode.com/GitHub_Trending/tr/trpc如果你的应用不是 React 或 Next.js 环境或者你想从另一个服务端调用 tRPC API可以引入 tRPC 的 Vanilla Client用httpBatchLink作为终止 link 指向你的 tRPC 服务端发出第一次完整的类型安全请求。这篇文章给出从零到第一次拿到query/mutation返回值的完整操作路径并说明如何验证类型安全和批处理行为。前提是你的项目中已经有一个 tRPC 服务端或打算按仓库示例先跑一个本地服务并且客户端代码能拿到服务端的AppRouter类型。仓库中 examples/minimal 的 README 说明其运行需要 Node 18依赖全局fetch如果你要在本地起一个测试服务这是文档给出的环境要求。安装 trpc/client 与 trpc/server按 Set up a tRPC Client 的说明需要安装两个包trpc/client客户端实现和trpc/server提供一些必需的 TypeScript 类型。使用你偏好的包管理器npm install trpc/server trpc/client其他包管理器对应的命令来自文档同一处安装片段yarn add trpc/server trpc/client pnpm add trpc/server trpc/client bun add trpc/server trpc/client deno add npm:trpc/server npm:trpc/client从服务端导入 AppRouter 类型类型安全的关键是客户端导入服务端的AppRouter类型——文档原话是这个类型holds the shape of your entire API承载你整个 API 的形状。推荐用import type这样引用会在编译期被擦除不会把服务端代码打包进客户端// utils/trpc.ts import type { AppRouter } from ../server/router;一个典型的服务端路由长这样来自文档示例注意它导出了AppRouter类型// server/router.ts import { initTRPC } from trpc/server; import { z } from zod; const t initTRPC.create(); const appRouter t.router({ post: t.router({ byId: t.procedure .input(z.object({ id: z.string() })) .query(async ({ input }) { return { id: input.id, title: Hello }; }), }), }); export type AppRouter typeof appRouter;用 httpBatchLink 初始化客户端用createTRPCClient创建客户端links数组中放入一个终止 linkterminating link。根据 Links Overviewlinks数组至少需要包含一个 link且链的末尾必须是终止 link——终止 link 负责把组合好的 tRPC 操作真正发送到服务端并返回OperationResultEnvelope如果links末尾没有终止 link请求根本不会发出去。httpBatchLink是文档推荐的终止 link。最小可用配置只需urlimport { createTRPCClient, httpBatchLink } from trpc/client; import type { AppRouter } from ./server; const client createTRPCClientAppRouter({ links: [ httpBatchLink({ url: http://localhost:3000/trpc, }), ], });url指向你的 tRPC API 地址上面的地址是文档示例值替换成你自己的服务端地址。文档同时给出了带鉴权请求头的写法headers可以是对象也可以是一个接收{ opList }的回调可以 asyncimport { createTRPCClient, httpBatchLink } from trpc/client; import type { AppRouter } from ./server; declare function getAuthCookie(): string; const client createTRPCClientAppRouter({ links: [ httpBatchLink({ url: http://localhost:3000/trpc, // You can pass any HTTP headers you wish here async headers() { return { authorization: getAuthCookie(), }; }, }), ], });发起首次类型安全请求客户端底层是一个带类型的 JavaScript Proxy你可以直接按路由结构调用query和mutation。文档示例中的调用与文档标注的示例返回结果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 Overview 的说明客户端会基于AppRouter提供补全、正确类型化返回数据并且在你写出与后端形状不匹配的请求时显示错误——也就是说传入错误类型的入参、调用不存在的路由TypeScript 会在编译期直接报错这就是首次接入的核心验证点。仓库 examples/minimal 的 README 也建议通过编辑 ts 文件来观察 type checking 的实际效果。如果你需要本地起一个可命中的服务端来跑通整个链路可以参考 examples/minimal其服务端用createHTTPServer在 3000 端口监听见 src/server/index.tsREADME 给出的启动方式是npm i npm run dev该示例的客户端本身使用的是httpBatchStreamLink见 src/client/index.ts如果你坚持用httpBatchLink只需把它换成上一节的配置即可示例的运行输出Users:、Created user:等console.log可以参照判断请求是否真的返回了数据。确认批处理Promise.all 只发一个 HTTP 请求httpBatchLink是一个批处理终止 link它会把一次 tick 内的多个 tRPC 操作合并成单个 HTTP 请求。按 HTTP Batch Link 的说明把多个 procedure 放进Promise.allwill produce exactlyoneHTTP request and on the server exactlyonedatabase query恰好产生一个 HTTP 请求、服务端恰好一次数据库查询const somePosts await Promise.all([ trpc.post.byId.query(1), trpc.post.byId.query(2), trpc.post.byId.query(3), ]);如果你的服务端通过 HTTP 请求计数或访问日志能观察到这三个调用只对应一次请求批处理就按预期工作了。批处理相关的已知限制URL 过长报错批处理请求的 URL 有时会过大触发413 Payload Too Large、414 URI Too Long或404 Not Found。文档给出的对策是设置maxURLLength限制单批可合并的操作数const client createTRPCClientAppRouter({ links: [ httpBatchLink({ url: http://localhost:3000, maxURLLength: 2083, // a suitable size // alternatively, you can make all RPC-calls to be called with POST // methodOverride: POST, }), ], });maxURLLength和maxItems的默认值均为Infinity不限制以上限值为文档示例值按你的网关/代理实际限制调整。服务端限制批次大小时客户端要跟随服务端任意适配器都可以传maxBatchSize例如createHTTPServer({ maxBatchSize: 10 })超过该限制的服务端会以400 Bad Request拒绝请求。此时客户端应配置对应的maxItemsshould be the same or lower than the servers maxBatchSize超出部分会自动拆成多个 HTTP 请求。如果服务端用allowBatching: false关闭了批处理客户端应把httpBatchLink换成httpLink。完整选项参考httpBatchLink接收HTTPBatchLinkOptions在HTTPLinkOptions基础上扩展字段与用途以 HTTP Batch Link 的类型定义为准urlstring 或 URL必填指向 tRPC 服务端fetch为fetch提供 ponyfilltransformer数据转换器headers静态头对象或按opList动态返回的回调maxURLLengthURL 超过该长度时把操作拆成多个请求默认InfinitymaxItems单批请求中允许的最大操作数默认Infinity。到这里客户端已经能发出第一次类型安全请求。后续如果要在链中加入日志、条件拆分等 link可以继续阅读 Links Overview它同时说明了非终止 link如loggerLink可以放在httpBatchLink之前组进链里。【免费下载链接】trpc♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy.项目地址: https://gitcode.com/GitHub_Trending/tr/trpc创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考