trpc
约 2 分钟阅读
- trpc/trpcGitHubtrpc/trpctrpc/trpc · @trpc/next - NextJS · spec · https://trpc.io/docs/rpc · 参考 · jlalmes/trpc-openapi · 使用 meta 定义路由 · - · 使用 zod 定义 input 和 output笔记:trpc
- @trpc/next - NextJS
- spec
- trpc.io/docs/rpc链接trpc.io/docs/rpctrpc/trpc · @trpc/next - NextJS · spec · https://trpc.io/docs/rpc · 参考 · jlalmes/trpc-openapi · 使用 meta 定义路由 · - · 使用 zod 定义 input 和 output笔记:trpc
- 参考
- jlalmes/trpc-openapiGitHubjlalmes/trpc-openapitrpc/trpc · @trpc/next - NextJS · spec · https://trpc.io/docs/rpc · 参考 · jlalmes/trpc-openapi · 使用 meta 定义路由 · - · 使用 zod 定义 input 和 output笔记:trpc
- 使用 meta 定义路由
.meta({openapi: { method: 'GET', path: '/say-hello', headers: [] } })
- 使用 zod 定义 input 和 output
- 创建新的路由
- 路由忽略大小写,忽略 Trailing slashes
- API Handler
- createOpenApiNextHandler
- createOpenApiHttpHandler - node
- createExpressMiddleware
- ⚠️ 暂不支持 fastify - jlalmes/trpc-openapi#87GitHub Issuejlalmes/trpc-openapi#87trpc/trpc · @trpc/next - NextJS · spec · https://trpc.io/docs/rpc · 参考 · jlalmes/trpc-openapi · 使用 meta 定义路由 · - · 使用 zod 定义 input 和 output笔记:trpc
- generateOpenApiDocument 生成 Schema
- 使用 meta 定义路由
- jlalmes/trpc-openapiGitHubjlalmes/trpc-openapitrpc/trpc · @trpc/next - NextJS · spec · https://trpc.io/docs/rpc · 参考 · jlalmes/trpc-openapi · 使用 meta 定义路由 · - · 使用 zod 定义 input 和 output笔记:trpc
- 因为核心是使用 typescript 类型,类型不好 bundle,不方便分享给别的项目
- Support for additional Content-Types #1937GitHub Issuetrpc/trpc#1937
- 合并多个 trpc 会有点麻烦 - SOA
- React Query 只能一个上下文 trpc
- 基于路径请求不同 trpc 服务端
- examples/soa/client/client.ts#L11-L41GitHub 文件trpc/trpc/examples/soa/client/client.ts#L11-L41
- 大项目 trpc 的全局类型反应会很慢
- v11 #3496GitHub Issuetrpc/trpc#3496
npm add @trpc/client @trpc/serverimport * as trpc from '@trpc/server';
import { z } from 'zod';
const appRouter = trpc
.router()
.query('getUser', {
input: (val: unknown) => {
if (typeof val === 'string') return val;
throw new Error(`Invalid input: ${typeof val}`);
},
async resolve(req) {
req.input; // string
return { id: req.input, name: 'Bilbo' };
},
})
.mutation('createUser', {
// validate input with Zod
input: z.object({ name: z.string().min(5) }),
async resolve(req) {
// use your ORM of choice
return await UserModel.create({
data: req.input,
});
},
});
export type AppRouter = typeof appRouter;- 适配 - trpc/trpc/packages/server/src/adaptersGitHub 文件trpc/trpc/packages/server/src/adapters
- next
- createNextApiHandler
- standalone
- createHTTPHandler
- createHTTPServer
- ws
- applyWSSHandler
- 基于 ws 包
- fastify
- fastifyTRPCPlugin
- fastifyRequestHandler
- express
- createExpressMiddleware
- node-http
- nodeHTTPRequestHandler
- aws-lambda
- fetch
- fetchRequestHandler
- lambda
- next
fastify
import { inferAsyncReturnType } from '@trpc/server';
import { CreateFastifyContextOptions } from '@trpc/server/adapters/fastify';
export function createContext({ req, res }: CreateFastifyContextOptions) {
const user = { name: req.headers.username ?? 'anonymous' };
return { req, res, user };
}
export type Context = inferAsyncReturnType<typeof createContext>;import { fastifyTRPCPlugin } from '@trpc/server/adapters/fastify';
import fastify from 'fastify';
import { createContext } from './context';
import { appRouter } from './router';
import ws from '@fastify/websocket';
const server = fastify({
maxParamLength: 5000,
});
// 支持 subscription
server.register(ws);
server.register(fastifyTRPCPlugin, {
prefix: '/trpc',
trpcOptions: { router: appRouter, createContext },
});
(async () => {
try {
await server.listen(3000);
} catch (err) {
server.log.error(err);
process.exit(1);
}
})();openapi
- 支持 fetch jlalmes/trpc-openapi#315GitHub PRjlalmes/trpc-openapi#315
import { initTRPC } from '@trpc/server';
import { OpenApiMeta } from 'trpc-openapi';
const t = initTRPC.meta<OpenApiMeta>().create();
export const appRouter = t.router({
sayHello: t.procedure
// 定义接口
.meta({ /* 👉 */ openapi: { method: 'GET', path: '/say-hello' } })
.input(z.object({ name: z.string() }))
.output(z.object({ greeting: z.string() }))
.query(({ input }) => {
return { greeting: `Hello ${input.name}!` };
});
});
// 生成
export const openApiDocument = generateOpenApiDocument(appRouter, {
title: 'tRPC OpenAPI',
version: '1.0.0',
baseUrl: 'http://localhost:3000',
});
import http from 'http';
import { createOpenApiHttpHandler } from 'trpc-openapi';
// 服务端
const server = http.createServer(createOpenApiHttpHandler({ router: appRouter })); /* 👈 */
server.listen(3000);FAQ
Rollup typing
- bundle/rollup d.ts笔记Typescript FAQ部分类型参数推导 #26242 · monorepo 类型问题 TypeScript#25376 · 目前就 npm monorepo 工作相对正常 · interface 定义 static · TypeScript#34516 · specifying interface implements clauses #33892章节:bundle/rollup d.ts打开:/notes/web/script/typescript/faq
typebox
import { TypeCompiler } from '@sinclair/typebox/compiler';
import { Type, TSchema } from '@sinclair/typebox';
import { initTRPC } from '@trpc/server';
export function Compile<T extends TSchema>(schema: T, references: TSchema[] = []) {
const check = TypeCompiler.Compile(schema, references);
return (input: unknown) => {
if (check.Check(input)) return input;
throw Error('Invalid Input');
};
}
const t = initTRPC.create();
const appRouter = t.router({
hello: t.procedure.input(Compile(Type.Number())).query(({ input }) => {
console.log(input);
}),
});关联信息
反向链接、本文链接的其他页面和外部资料。
反向链接
- zod笔记 · tRPC
colinhacks/zod · adpoted by: tRPC · 参考 · zod.dev · StefanTerdell/zod-to-json-schema · fabien0102/ts-to-zod · asteasolutions/zod-to-openapi
站内链接
- Typescript FAQ笔记 · bundle/rollup d.ts · bundlerollup dts
部分类型参数推导 #26242 · monorepo 类型问题 TypeScript#25376 · 目前就 npm monorepo 工作相对正常 · interface 定义 static · TypeScript#34516 · specifying interface implements clauses #33892
参考资料
GitHub9 条
- jlalmes/trpc-openapigithub.com/jlalmes/trpc-openapi
- jlalmes/trpc-openapi#315github.com/jlalmes/trpc-openapi/pull/315
- jlalmes/trpc-openapi#87github.com/jlalmes/trpc-openapi/issues/87
- trpc/trpcgithub.com/trpc/trpc
- trpc/trpc/discussions/1860github.com/trpc/trpc/discussions/1860
- trpc/trpc/examples/soa/client/client.ts#L11-L41github.com/trpc/trpc/blob/c49e0333ced133a883d276e51679c10de2f575e8/examples/soa/client/client.ts
- trpc/trpc/packages/server/src/adaptersgithub.com/trpc/trpc/tree/main/packages/server/src/adapters
- trpc/trpc#1937github.com/trpc/trpc/issues/1937
- trpc/trpc#3496github.com/trpc/trpc/issues/3496
其他外链1 条
- trpc.io/docs/rpctrpc.io/docs/rpc