tRPC: 타입 안전 API의 미래

pnpm add @trpc/server @trpc/client @trpc/react-query @tanstack/react-query zod

// server/trpc.ts
import { initTRPC, TRPCError } from '@trpc/server';

const t = initTRPC.context<Context>().create();

// 미들웨어 — 인증
const isAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.userId) {
    throw new TRPCError({ code: 'UNAUTHORIZED' });
  }
  return next({ ctx: { ...ctx, userId: ctx.userId } });
});

export const router = t.router;
export const publicProcedure = t.procedure;
export const protectedProcedure = t.procedure.use(isAuthed);


// server/routers/post.ts
import { z } from 'zod';
import { router, publicProcedure, protectedProcedure } from '../trpc';

export const postRouter = router({
  list: publicProcedure
    .input(z.object({
      limit: z.number().min(1).max(100).default(20),
      cursor: z.string().optional(),
    }))
    .query(async ({ input, ctx }) => {
      const items = await ctx.db.post.findMany({
        take: input.limit + 1,
        cursor: input.cursor ? { id: input.cursor } : undefined,
        orderBy: { createdAt: 'desc' },
      });

      const nextCursor = items.length > input.limit
        ? items.pop()!.id : null;

      return { items, nextCursor };
    }),

  byId: publicProcedure
    .input(z.string())
    .query(async ({ input, ctx }) => {
      const post = await ctx.db.post.findUnique({ where: { id: input } });
      if (!post) throw new TRPCError({ code: 'NOT_FOUND' });
      return post;
    }),

  create: protectedProcedure
    .input(z.object({
      title: z.string().min(1).max(200),
      content: z.string().min(1),
    }))
    .mutation(async ({ input, ctx }) => {
      return ctx.db.post.create({
        data: { ...input, authorId: ctx.userId },
      });
    }),

  update: protectedProcedure
    .input(z.object({
      id: z.string(),
      title: z.string().min(1).max(200).optional(),
      content: z.string().min(1).optional(),
    }))
    .mutation(async ({ input, ctx }) => {
      const post = await ctx.db.post.findUnique({ where: { id: input.id } });
      if (!post) throw new TRPCError({ code: 'NOT_FOUND' });
      if (post.authorId !== ctx.userId) {
        throw new TRPCError({ code: 'FORBIDDEN' });
      }
      const { id, ...data } = input;
      return ctx.db.post.update({ where: { id }, data });
    }),
});


// 통합
export const appRouter = router({
  post: postRouter,
  user: userRouter,
});

export type AppRouter = typeof appRouter;

// lib/trpc.ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server';

export const trpc = createTRPCReact<AppRouter>();


// app/providers.tsx
'use client';
import { httpBatchLink } from '@trpc/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();
const trpcClient = trpc.createClient({
  links: [httpBatchLink({ url: '/api/trpc' })],
});

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </trpc.Provider>
  );
}

function PostList() {
  // 자동 완성 + 타입 추론
  const { data, isLoading } = trpc.post.list.useQuery({ limit: 20 });

  if (isLoading) return <Skeleton />;

  return (
    <ul>
      {data?.items.map(post => (
        // post의 타입 = 서버 정의와 100% 일치
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}


function CreatePost() {
  const utils = trpc.useUtils();
  const createMutation = trpc.post.create.useMutation({
    onSuccess: () => {
      // 캐시 무효화
      utils.post.list.invalidate();
    },
  });

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      const form = new FormData(e.currentTarget);
      createMutation.mutate({
        title: form.get('title') as string,
        content: form.get('content') as string,
      });
    }}>
      <input name="title" />
      <textarea name="content" />
      <button disabled={createMutation.isPending}>
        {createMutation.isPending ? '저장 중...' : '저장'}
      </button>
    </form>
  );
}

tRPC:
✅ 풀스택 TS — 100% 타입 안전
✅ 학습 곡선 낮음 (REST와 유사)
✅ 코드 생성 불필요
❌ TS 전용 (다른 언어 클라이언트 어려움)
❌ 공개 API 부적합


GraphQL:
✅ 다양한 클라이언트
✅ 선택적 페치
❌ 셋업 복잡
❌ 캐싱 어려움


REST:
✅ 표준·생태계
✅ HTTP 캐시
❌ 타입 안전 X (별도 작업)


결론:
- 사내 풀스택 TS → tRPC (강력 추천)
- 공개 API → REST + OpenAPI
- 다양한 클라이언트 → GraphQL