본문 바로가기
버전: 9.x

Fastify와 함께 사용하기

비공식 베타 번역

이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →

예시 애플리케이션​

Fastify 어댑터를 시작하는 가장 좋은 방법은 예시 애플리케이션을 살펴보는 것입니다.

DescriptionLinks
  • Fastify server with WebSocket
  • Simple tRPC client in node

Fastify에서 tRPC 사용하기​

의존성 설치​

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

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

라우터 생성​

먼저 쿼리, 뮤테이션, 서브스크립션을 처리할 라우터가 필요합니다.

아래에 샘플 라우터가 있습니다. router.ts 파일로 저장하세요.

router.ts
router.ts
ts
import * as trpc from '@trpc/server';
import { z } from 'zod';
type User = {
  id: string;
  name: string;
  bio?: string;
};
const users: Record<string, User> = {};
export const appRouter = trpc
  .router()
  .query('getUserById', {
    input: z.string(),
    async resolve({ input }) {
      return users[input]; // input type is string
    },
  })
  .mutation('createUser', {
    // validate input with Zod
    input: z.object({
      name: z.string().min(3),
      bio: z.string().max(142).optional(),
    }),
    async resolve({ input }) {
      const id = Date.now().toString();
      const user: User = { id, ...input };
      users[user.id] = user;
      return user;
    },
  });
// export type definition of API
export type AppRouter = typeof appRouter;
router.ts
ts
import * as trpc from '@trpc/server';
import { z } from 'zod';
type User = {
  id: string;
  name: string;
  bio?: string;
};
const users: Record<string, User> = {};
export const appRouter = trpc
  .router()
  .query('getUserById', {
    input: z.string(),
    async resolve({ input }) {
      return users[input]; // input type is string
    },
  })
  .mutation('createUser', {
    // validate input with Zod
    input: z.object({
      name: z.string().min(3),
      bio: z.string().max(142).optional(),
    }),
    async resolve({ input }) {
      const id = Date.now().toString();
      const user: User = { id, ...input };
      users[user.id] = user;
      return user;
    },
  });
// export type definition of API
export type AppRouter = typeof appRouter;

라우터 파일이 너무 커지기 시작하면 라우터를 여러 개의 서브라우터로 분할하고 각각 별도 파일로 구현하세요. 그런 다음 이들을 병합하여 단일 루트 appRouter로 만드세요.

컨텍스트 생성​

그런 다음 각 요청마다 생성될 컨텍스트가 필요합니다.

아래에 샘플 컨텍스트가 있습니다. context.ts 파일로 저장하세요:

context.ts
context.ts
ts
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>;
context.ts
ts
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>;

Fastify 서버 생성​

tRPC는 기본적으로 Fastify 어댑터를 포함합니다. 이 어댑터를 사용하면 tRPC 라우터를 Fastify 플러그인으로 변환할 수 있습니다. 대량의 배치 요청 시 오류를 방지하려면 다음에 보이는 바와 같이 maxParamLength Fastify 옵션을 적절한 값으로 설정해야 합니다.

server.ts
ts
import { fastifyTRPCPlugin } from '@trpc/server/adapters/fastify';
import fastify from 'fastify';
import { createContext } from './context';
import { appRouter } from './router';
const server = fastify({
  maxParamLength: 5000,
});
server.register(fastifyTRPCPlugin, {
  prefix: '/trpc',
  trpcOptions: { router: appRouter, createContext },
});
(async () => {
  try {
    await server.listen({ port: 3000 });
  } catch (err) {
    server.log.error(err);
    process.exit(1);
  }
})();
server.ts
ts
import { fastifyTRPCPlugin } from '@trpc/server/adapters/fastify';
import fastify from 'fastify';
import { createContext } from './context';
import { appRouter } from './router';
const server = fastify({
  maxParamLength: 5000,
});
server.register(fastifyTRPCPlugin, {
  prefix: '/trpc',
  trpcOptions: { router: appRouter, createContext },
});
(async () => {
  try {
    await server.listen({ port: 3000 });
  } catch (err) {
    server.log.error(err);
    process.exit(1);
  }
})();

이제 엔드포인트를 HTTP를 통해 사용할 수 있습니다!

EndpointHTTP URI
getUserGET http://localhost:3000/trpc/getUserById?input=INPUT

where INPUT is a URI-encoded JSON string.
createUserPOST http://localhost:3000/trpc/createUser

with req.body of type User

서브스크립션 활성화 방법 (WebSocket)​

Fastify 어댑터는 @fastify/websocket 플러그인을 통해 서브스크립션을 지원합니다. 위 단계 외에 추가로 해야 할 작업은 의존성을 설치하고, 라우터에 서브스크립션을 추가한 다음 플러그인에서 useWSS 옵션을 활성화하는 것입니다. @fastify/websocket에 필요한 최소 Fastify 버전은 3.11.0입니다.

의존성 설치​

bash
yarn add @fastify/websocket
bash
yarn add @fastify/websocket

@fastify/websocket 가져오기 및 등록​

ts
import ws from '@fastify/websocket';
server.register(ws);
ts
import ws from '@fastify/websocket';
server.register(ws);

서브스크립션 추가​

이전 단계에서 생성한 router.ts 파일을 편집하고 다음 코드를 추가하세요:

router.ts
ts
export const appRouter = trpc
  .router()
  // .query(...)
  // .mutation(...)
  .subscription('randomNumber', {
    resolve() {
      return new Subscription<{ randomNumber: number }>((emit) => {
        const timer = setInterval(() => {
          emit.data({ randomNumber: Math.random() });
        }, 1000);
        return () => {
          clearInterval(timer);
        };
      });
    },
  });
router.ts
ts
export const appRouter = trpc
  .router()
  // .query(...)
  // .mutation(...)
  .subscription('randomNumber', {
    resolve() {
      return new Subscription<{ randomNumber: number }>((emit) => {
        const timer = setInterval(() => {
          emit.data({ randomNumber: Math.random() });
        }, 1000);
        return () => {
          clearInterval(timer);
        };
      });
    },
  });

useWSS 옵션 활성화​

server.ts
ts
server.register(fastifyTRPCPlugin, {
  useWSS: true,
  // ...
});
server.ts
ts
server.register(fastifyTRPCPlugin, {
  useWSS: true,
  // ...
});

이제 randomNumber 토픽을 구독할 수 있으며 매초 임의의 숫자를 받을 수 있습니다 🚀.

Fastify 플러그인 옵션​

nametypeoptionaldefaultdescription
prefixstringtrue"/trpc"
useWSSbooleantruefalse
trpcOptionsNodeHTTPHandlerOptionsfalsen/a