Vanilla 클라이언트

비공식 베타 번역

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

tRPC의 핵심 매직은 코드 생성에 의존하지 않고 강력한 타입 지원 API 호출을 가능하게 한다는 점입니다. 풀스택 TypeScript 프로젝트에서는 서버의 타입을 클라이언트로 직접 임포트할 수 있습니다! 이는 tRPC가 작동하는 방식의 핵심 요소입니다.

루트 tRPC 라우터가 정의된 파일에서 AppRouter 타입을 클라이언트로 임포트하세요. 이 단일 타입은 전체 API의 타입 시그니처를 표현합니다.

client.ts
ts
import type { AppRouter } from '../path/to/server/trpc';

client.ts
ts
import type { AppRouter } from '../path/to/server/trpc';

import type 키워드를 사용하면 파일 시스템상의 _어떤 TypeScript 파일_에서도 타입을 임포트할 수 있습니다. 게다가 import type은 타입만 임포트할 수 있으며 실행 코드는 임포트하지 않습니다. 따라서 서버 사이드 코드가 실수로 클라이언트에 포함될 위험이 없습니다. 모든 import type 호출은 컴파일된 JavaScript 번들에서 항상 완전히 제거됩니다 (출처).

tRPC 클라이언트 초기화

@trpc/client의 createTRPCClient 메서드로 타입 안전한 클라이언트를 생성하세요:

client.ts
ts
// pages/index.tsx
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<AppRouter>({
  url: 'http://localhost:5000/trpc',
});

client.ts
ts
// pages/index.tsx
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<AppRouter>({
  url: 'http://localhost:5000/trpc',
});

보시다시피 createTRPCClient의 타입 인수로 AppRouter를 전달했습니다. 이렇게 하면 강력한 타입 지원을 갖춘 client 인스턴스가 반환됩니다:

client.ts
ts
const bilbo = await client.query('getUser', 'id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
const frodo = await client.mutation('createUser', { name: 'Frodo' });
// => { id: 'id_frodo', name: 'Frodo' };

client.ts
ts
const bilbo = await client.query('getUser', 'id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
const frodo = await client.mutation('createUser', { name: 'Frodo' });
// => { id: 'id_frodo', name: 'Frodo' };