プロシージャ呼び出しのキャンセル

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。 エラーを見つけましたか？ 問題を報告 →

デフォルトでは、tRPCはコンポーネントのアンマウント時にリクエストをキャンセルしません。この動作を有効化するには、設定コールバックでabortOnUnmountを指定してください。

グローバル設定

client.ts
ts
import { httpBatchLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
import type { AppRouter } from './server/routers/_app';
 
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: '/api/trpc',
        }),
      ],
      abortOnUnmount: true,
    };
  },
});

client.ts
ts
import { httpBatchLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
import type { AppRouter } from './server/routers/_app';
 
export const trpc = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        httpBatchLink({
          url: '/api/trpc',
        }),
      ],
      abortOnUnmount: true,
    };
  },
});

リクエスト単位

この動作はリクエストレベルでオーバーライドすることも可能です。

client.ts
tsx
import { trpc } from './utils/trpc';
import { useRouter } from 'next/router';
 
function PostViewPage() {
  const id = useRouter().query.id as string;
  const postQuery = trpc.post.byId.useQuery({ id }, { trpc: { abortOnUnmount: true } });
 
  return null;
}

client.ts
tsx
import { trpc } from './utils/trpc';
import { useRouter } from 'next/router';
 
function PostViewPage() {
  const id = useRouter().query.id as string;
  const postQuery = trpc.post.byId.useQuery({ id }, { trpc: { abortOnUnmount: true } });
 
  return null;
}