trpc 是一個類型安全的api 開發框架，可以利用typescript 強大的類型能力，同時也能實現數據處理的復用，以下是一個參考案例
參考demo
- server 端代碼
package.json
{
"dependencies": {
"@trpc/client": "^7.3.3",
"@trpc/next": "^7.3.3",
"@trpc/react": "^7.3.3",
"@trpc/server": "^7.3.3",
"express": "^4.17.1",
"node-fetch": "^2.6.1"
},
"devDependencies": {
"@types/express": "^4.17.12",
"@types/node": "^15.12.4",
"@types/node-fetch": "^2.5.10"
},
"name": "trpc-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
app.ts
// server/index.ts
import * as trpc from '@trpc/server';
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' };
},
});
export default appRouter;
export type AppRouter = typeof appRouter;
express 集成
import * as trpcExpress from '@trpc/server/adapters/express';
import * as trpc from '@trpc/server';
import appRouter from "./app"
import express from "express"
const app = express();
// created for each request
const createContext = ({
req,
res,
}: trpcExpress.CreateExpressContextOptions) => ({}) // no context
type Context = trpc.inferAsyncReturnType<typeof createContext>;
app.use(
'/trpc',
trpcExpress.createExpressMiddleware({
router: appRouter,
createContext: () => null, // no context
})
);
app.listen(4000);
- client 代碼
import type { AppRouter } from './app';
import { createTRPCClient } from '@trpc/client';
import fetch from "node-fetch"
// 此處比較重要
global.fetch = fetch as any;
const client = createTRPCClient<AppRouter>({
url: 'http://localhost:4000/trpc',
});
(async()=>{
const bilbo = await client.query('getUser', 'id_bilbo');
console.log(bilbo)
})()
說明
trpc 是一個很不錯的基於typescript 開發api 的框架，而且目前已經提供了比較完備的框架支持（react，next，express）