[Typescript] tRPC: 소개

tRPC는 typescript에 기반한 RPC 프로토콜이다.
gRPC의 타입스크립트 버전이라 생각하면 된다.

MSA에도 사용할 수 있고, 단순한 웹서버<->웹 클라이언트의 구조로도 사용할 수 있다.
단순하고 편리한 형태에, Typescript 환경에 최적화되어있다는게 장점이지만, 그게 곧 단점이기도 하다.

gRPC마저도 언어마다 구현체의 미흡함이 꽤나 존재하는 마당인데, Typescript에 종속된 tRPC는 생태계가 얼마나 좋겠는가? 사실상 Node.js 환경에서만 이상적인 사용이 가능하다.
그래서 MSA의 장점을 이끌어내기에는 제한이 좀 있다.

서버 측 구현

서버부터 해보겠다.
먼저 서버용 모듈을 설치한다.

npm i @trpc/server

이번 예제에서는 "유저 목록"이 있고, 유저를 조회할 수 있는 기능을 만들어보도록 하겠다.
먼저 기본 tRPC 객체와 라우터를 정의해야 한다.

import { initTRPC } from '@trpc/server';

const trpc = initTRPC.create();

const router = trpc.router;

const userList: User[] = [
    {
        id: '1',
        name: 'John Doe',
    },
    {
        id: '2',
        name: 'Sam Smith',
    },
];

interface User {
    id: string;
    name: string;
}

const appRouter = router({});

// Export type router type signature,
// NOT the router itself.
export type AppRouter = typeof appRouter;

그리 어려울 것은 없다.

이제 여기다가 유저를 조회할 수 있는 userById 메서드를 정의해보겠다.

import { initTRPC } from '@trpc/server';

const trpc = initTRPC.create();

const router = trpc.router;

const userList: User[] = [
    {
        id: '1',
        name: 'John Doe',
    },
    {
        id: '2',
        name: 'Sam Smith',
    },
];

interface User {
    id: string;
    name: string;
}

interface UserByIdInput {
    id: string;
}

const appRouter = router({
    userById: trpc.procedure
        .input((value: any)=>{
            if(typeof value?.id !== 'string'){
                throw new Error('input.id must be an string');
            } 

            return value as UserByIdInput;
        })
        .query((request)=>{
            const input = request.input;

            return userList.find((user)=>user.id === input.id);
        })
});

// Export type router type signature,
// NOT the router itself.
export type AppRouter = typeof appRouter;

그냥 라우터에 key-value 형태로 값을 집어넣으면 각각의 route가 된다.

input 함수는 입력 값을 어떻게 검증하고 가공할지를 처리하고,
query는 input에서 가공한 값을 받아서 최종적으로 클라이언트에게 돌려줄 값을 리턴한다.
기본적인 원리는 어려울 것이 없다.

이 "라우터" 단위는 서버에서만 사용되는게 아니라, 이 자체로 하나의 규격이 된다. 클라이언트에서 연동할 경우에도 저 라우터 코드를 공유하면 된다.

그리고 저것만으로는 아무것도 하지 못한다. 그냥 tRPC를 정의하는 것일 뿐이기 때문이다.
실제로 저게 서버로서 동작하게 하려면, express 같은 기존 서버 환경에 붙여서 써야 한다.

import express from 'express'
import * as trpcExpress from '@trpc/server/adapters/express';

const server = express();

server.get('/', (req, res)=>{
    res.json('OK');
})

server.get('/', (req, res)=>{
    res.json('OK');
})

// created for each request
const createTRPCContext = ({req, res}: trpcExpress.CreateExpressContextOptions) => ({});

server.use(
    '/trpc',
    trpcExpress.createExpressMiddleware({
        router: appRouter,
        createContext: createTRPCContext,
    }),
);

server.listen(12345, ()=>{console.log('Server is Running...')});

클라이언트 측 구현

이번에는 클라이언트에서 저걸 호출해보자.
클라이언트용 모듈을 먼저 설치한다.

npm i @trpc/client

그리고 이런식으로 client 객체를 생성 후, 메서드를 호출해서 사용하면 된다.

// @filename: client.ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';

// Notice the <AppRouter> generic here.
const trpcClient = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:12345/trpc',
    }),
  ],
});

async function main() {
    const user = await trpcClient.userById.query({id: '1'});
    console.log(user);
}

main();

url에는 서버가 떠있는 URL 경로를 적어주면 되고

API를 사용할 때는 서버에서 정의했던걸 그대로 꺼내쓸 수 있다.

이렇게.

기본적인 구조는 이렇고, react 등의 프론트엔드 프레임워크들에서도 그대로 사용할 수 있다.

참조
tRPC | tRPC