프로시저 호출 중단

비공식 베타 번역

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

기본적으로 tRPC는 컴포넌트가 언마운트될 때 요청을 취소하지 않습니다. 이 동작을 사용하려면 설정 콜백에서 abortOnUnmount를 제공하면 됩니다.

전역 설정

client.ts
ts
// @filename: utils.ts
import { createTRPCNext } from '@trpc/next';
 
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      // ...
      abortOnUnmount: true,
    };
  },
});

client.ts
ts
// @filename: utils.ts
import { createTRPCNext } from '@trpc/next';
 
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      // ...
      abortOnUnmount: true,
    };
  },
});

요청별 설정

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

client.ts
ts
// @filename: pages/posts/[id].tsx
import { trpc } from '~/utils/trpc';
 
const PostViewPage: NextPageWithLayout = () => {
  const id = useRouter().query.id as string;
  const postQuery = trpc.post.byId.useQuery({ id }, { trpc: { abortOnUnmount: true } });
 
  return (...)
}

client.ts
ts
// @filename: pages/posts/[id].tsx
import { trpc } from '~/utils/trpc';
 
const PostViewPage: NextPageWithLayout = () => {
  const id = useRouter().query.id as string;
  const postQuery = trpc.post.byId.useQuery({ id }, { trpc: { abortOnUnmount: true } });
 
  return (...)
}