본문으로 건너뛰기
버전: 11.x

Express 어댑터

예제 앱​

설명링크
Node.js를 사용하여 Express 서버에서 & 프로시저 호출을 수행합니다.

기존 Express 프로젝트에 tRPC 추가하기​

1. 의존성 설치​

bash
yarn add @trpc/server zod
bash
yarn add @trpc/server zod

Zod은 필수 의존성이 아니지만, 아래 샘플 라우터에서 사용됩니다.

AI 에이전트

AI 코딩 에이전트를 사용하는 경우, 더 나은 코드 생성을 위해 tRPC 스킬을 설치하세요:

bash
npx @tanstack/intent@latest install
bash
npx @tanstack/intent@latest install

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 { id: '1', ...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 { id: '1', ...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
getUserGET http://localhost:4000/trpc/getUser?input=INPUT

여기서 INPUT은 URI-인코딩된 JSON 문자열입니다.
createUserPOST http://localhost:4000/trpc/createUser

여기서 req.body의 타입은 {name: string}입니다