プロシージャコールの中止

非公式ベータ版翻訳

このページは 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 } }
  );
 
  // ...
}