Express 適配器

範例應用程式

說明	連結
使用 Node.js 的 Express 伺服器和程序呼叫。	CodeSandbox 來源

如何將 tRPC 加入現有的 Express 專案

1. 安裝依賴項

bash
yarn add @trpc/server zod

bash
yarn add @trpc/server zod

Zod 不是必要的依賴項，但它用於以下範例路由器。

2. 建立一個 tRPC 路由器

實作你的 tRPC 路由器。以下提供一個範例路由器

server.ts
ts
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
export const t = initTRPC.create();
export const appRouter = t.router({
  getUser: t.procedure.input(z.string()).query((opts) => {
    opts.input; // string
    return { id: opts.input, name: 'Bilbo' };
  }),
  createUser: t.procedure
    .input(z.object({ name: z.string().min(5) }))
    .mutation(async (opts) => {
      // use your ORM of choice
      return await UserModel.create({
        data: opts.input,
      });
    }),
});
// export type definition of API
export type AppRouter = typeof appRouter;

server.ts
ts
import { initTRPC } from '@trpc/server';
import { z } from 'zod';
export const t = initTRPC.create();
export const appRouter = t.router({
  getUser: t.procedure.input(z.string()).query((opts) => {
    opts.input; // string
    return { id: opts.input, name: 'Bilbo' };
  }),
  createUser: t.procedure
    .input(z.object({ name: z.string().min(5) }))
    .mutation(async (opts) => {
      // use your ORM of choice
      return await UserModel.create({
        data: opts.input,
      });
    }),
});
// export type definition of API
export type AppRouter = typeof appRouter;

如果你的路由器檔案開始變大，請將你的路由器分割成幾個子路由器，每個子路由器實作在自己的檔案中。然後 合併它們 成為一個單一的根appRouter。

3. 使用 Express 介面

tRPC 內建一個 Express 介面。這個介面讓你將你的 tRPC 路由器轉換成一個 Express 中介軟體。

server.ts
ts
import { initTRPC } from '@trpc/server';
import * as trpcExpress from '@trpc/server/adapters/express';
import express from 'express';
// created for each request
const createContext = ({
  req,
  res,
}: trpcExpress.CreateExpressContextOptions) => ({}); // no context
type Context = Awaited<ReturnType<typeof createContext>>;
const t = initTRPC.context<Context>().create();
const appRouter = t.router({
  // [...]
});
const app = express();
app.use(
  '/trpc',
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext,
  }),
);
app.listen(4000);

server.ts
ts
import { initTRPC } from '@trpc/server';
import * as trpcExpress from '@trpc/server/adapters/express';
import express from 'express';
// created for each request
const createContext = ({
  req,
  res,
}: trpcExpress.CreateExpressContextOptions) => ({}); // no context
type Context = Awaited<ReturnType<typeof createContext>>;
const t = initTRPC.context<Context>().create();
const appRouter = t.router({
  // [...]
});
const app = express();
app.use(
  '/trpc',
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext,
  }),
);
app.listen(4000);

你的端點現在可透過 HTTP 存取！

端點	HTTP URI
getUser	GET http://localhost:4000/trpc/getUser?input=INPUT 其中 INPUT 是 URI 編碼的 JSON 字串。
createUser	POST http://localhost:4000/trpc/createUser 其中 req.body 的型別為 {name: string}