프로시저 호출 중단

비공식 베타 번역

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

기본적으로 tRPC는 React Query를 통해 요청을 취소하지 않습니다. 이 동작을 사용하려면 설정에서 abortOnUnmount를 지정할 수 있습니다.

참고

@tanstack/react-query는 쿼리 중단만 지원합니다.

전역 설정

client.ts
ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from './server';
 
export const trpc = createTRPCReact<AppRouter>({
  abortOnUnmount: true,
});

client.ts
ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from './server';
 
export const trpc = createTRPCReact<AppRouter>({
  abortOnUnmount: true,
});

요청별 설정

쿼리 수준에서도 이 동작을 재정의할 수 있습니다.

pages/post/[id].tsx
tsx
import { trpc } from '../utils/trpc';
 
function PostViewPage() {
  const { query } = useRouter();
  const postQuery = trpc.post.byId.useQuery(
    { id: query.id },
    { trpc: { abortOnUnmount: true } }
  );
 
  // ...
}

pages/post/[id].tsx
tsx
import { trpc } from '../utils/trpc';
 
function PostViewPage() {
  const { query } = useRouter();
  const postQuery = trpc.post.byId.useQuery(
    { id: query.id },
    { trpc: { abortOnUnmount: true } }
  );
 
  // ...
}