tRPC 클라이언트

"Vanilla" tRPC 클라이언트는 API 프로시저를 로컬 함수처럼 호출할 수 있어 매끄러운 개발 경험을 제공합니다.

ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'http://localhost:3000' })],
});
 
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };

ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'http://localhost:3000' })],
});
 
const bilbo = await client.getUser.query('id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };

Vanilla 클라이언트를 사용할 때

다음 두 가지 시나리오에서 이 클라이언트를 사용할 가능성이 높습니다:

• 공식 통합이 없는 프론트엔드 프레임워크와 함께 사용할 때
• TypeScript로 작성된 별도의 백엔드 서비스와 함께 사용할 때

Vanilla 클라이언트를 사용하지 말아야 할 때

• React 컴포넌트에서 프로시저를 호출할 때 이 클라이언트를 사용할 수도 있지만, 일반적으로는 TanStack React Query 통합을 권장합니다. 로딩 및 오류 상태 관리, 캐시, 무효화 등 다양한 추가 기능을 제공하기 때문입니다.
• 같은 API 인스턴스의 프로시저를 호출할 때는 이 클라이언트를 권장하지 않습니다. 불필요하게 네트워크 계층을 거쳐야 하기 때문입니다. 현재 API 내부에서 프로시저를 호출하는 방법은 서버 사이드 호출 문서를 참조하세요.