쿼리, 변경, 구독

publicProcedure에 .input(zodSchema).query(async ({ input, ctx }) => ...)를 연결합니다. 핸들러는 검증된 입력과 요청 컨텍스트를 받습니다. 객체, 배열 또는 원시 값 등 직렬화 가능한 값은 무엇이든 반환할 수 있습니다.

반환 타입은 자동으로 추론되며 클라이언트에서 해당 useQuery 훅의 데이터 타입이 됩니다.

trpc.post.getById.useQuery({ id: '1' })는 post 라우터의 getById 프로시저를 호출합니다. 이 훅은 익숙한 리액트 쿼리 결과 객체인 { data, isLoading, isError, refetch }를 반환합니다.

입력 객체에는 정적 타입이 적용되므로 스키마가 문자열을 요구할 때 { id: 123 }을 전달하면 개발 시점에 TypeScript 오류가 발생합니다.

서버 측 쓰기 작업인 데이터 생성, 수정 또는 삭제에는 .input(zodSchema).mutation(async ({ input, ctx }) => ...)를 사용합니다. 뮤테이션은 마운트 시 자동으로 실행되지 않고 명시적으로 호출됩니다.

뮤테이션 핸들러는 ctx를 통해 전체 요청 컨텍스트에 접근할 수 있으며, 여기에는 NextAuth의 세션도 포함됩니다.

const { mutate, isLoading, error } = trpc.post.create.useMutation()을 사용합니다. 뮤테이션을 실행하려면 mutate({ title: 'New', content: '...' })를 호출합니다. 리액트 쿼리의 useMutation과 마찬가지로 마운트 시 실행되지 않습니다.

뮤테이션 후 부수 효과를 처리하려면 useMutation 옵션에 onSuccess 및 onError 콜백을 전달합니다.

성공한 뮤테이션 후 쿼리 데이터를 새로 고치려면 tRPC 유틸리티 훅을 사용합니다: const utils = trpc.useUtils(). onSuccess에서 utils.post.getAll.invalidate()를 호출하여 게시물 목록을 다시 가져옵니다.

이는 리액트 쿼리의 queryClient.invalidateQueries()에 해당하는 tRPC 방식이며, 동일한 오래된 데이터 처리 후 다시 가져오기 패턴을 따릅니다.

tRPC는 기본적으로 입력 검증에 Zod를 사용합니다. Zod 스키마는 런타임에 서버에서 실행되며, 잘못된 입력이 핸들러에 도달하기 전에 거부합니다. 동일한 스키마가 클라이언트에 TypeScript 타입을 제공합니다.

이중 역할(런타임 검증과 TypeScript 타입) 덕분에 중복이 사라집니다. Zod에서 계약을 한 번 정의하면 안전성을 보장하는 두 기능을 모두 추가 작업 없이 얻을 수 있습니다.

tRPC는 기본적으로 여러 동시 tRPC 요청을 하나의 HTTP 요청으로 일괄 처리하는 httpBatchLink를 사용합니다. 동일한 컴포넌트의 렌더링 주기에서 발생한 여러 useQuery 호출은 함께 전송되고 함께 처리됩니다.

페이지에 여러 데이터 요구 사항이 있을 때 각 쿼리를 개별 HTTP 요청으로 보내는 것보다 네트워크 오버헤드를 크게 줄일 수 있습니다.

구독 프로시저를 정의합니다: publicProcedure.subscription(async function*() { while (true) { yield await nextEvent(); } }). 구독은 비동기 생성기를 사용하며 WebSocket 전송 방식이 필요합니다.

구독은 실시간 알림, 협업 편집 커서 또는 스트리밍 AI 응답과 같은 실시간 기능에 적합합니다.

splitLink를 사용하여 httpBatchLink와 wsLink를 조합하는 방식으로 httpBatchLink를 확장합니다. 구독은 wsLink로, 쿼리와 뮤테이션은 httpBatchLink로 라우팅합니다. createWSClient({ url: 'ws://localhost:3000' })로 WebSocket 클라이언트를 만듭니다.

이 하이브리드 전송 방식을 사용하면 대부분의 요청은 효율적인 HTTP 일괄 처리를 사용하고 구독은 지속적인 WebSocket 연결을 사용합니다.

trpc.notifications.onNew.useSubscription(undefined, { onData: (notification) => addToList(notification), onError: console.error })로 프로시저를 구독합니다. onData 콜백은 생성되는 각 값마다 호출됩니다.

WebSocket 연결이 끊겼다가 다시 연결되면 구독이 자동으로 다시 설정됩니다.

실시간 목록 페이지에서는 쿼리로 초기 목록을 불러오고, 뮤테이션으로 항목을 추가하며, 구독으로 다른 사용자의 실시간 추가 항목을 받을 수 있습니다. 세 기능 모두 동일한 AppRouter에 대해 타입이 지정되며 자연스럽게 조합됩니다.

캐시 무효화 전략은 전체 다시 가져오기(뮤테이션 후 무효화)를 선호하는지, 캐시 업데이트(utils.post.getAll.setData)를 선호하는지에 따라 달라집니다.

뮤테이션이 성공한 후 쿼리를 다시 가져오도록 하는 tRPC 유틸리티 메서드는 무엇인가요?

.query()로 쿼리를 정의하고 .mutation()으로 뮤테이션을 정의하며, 둘 다 Zod 스키마로 검증합니다. 클라이언트에서는 trpc.router.procedure.useQuery()와 useMutation()을 사용합니다. 뮤테이션 후 utils.procedure.invalidate()로 쿼리를 무효화합니다. 구독은 비동기 생성기를 사용하며 WebSocket 전송 방식에 wsLink가 필요합니다.

httpBatchLink는 기본적으로 동시 쿼리를 하나의 HTTP 요청으로 일괄 처리합니다.