メインコンテンツへスキップ
バージョン: 11.x

リトライリンク

非公式ベータ版翻訳

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

retryLink は、tRPCクライアントで失敗した操作を再試行できるリンクです。ネットワーク障害やサーバーエラーなどの一時的なエラーを、指定した条件に基づいてリクエストを自動再試行することで柔軟に処理できます。

ヒント

@trpc/react-query を使用している場合、通常このリンクは不要です。@tanstack/react-query の useQuery() および useMutation() フックに再試行機能が組み込まれているためです。

使用方法​

tRPCクライアント作成時に、retryLink をインポートして links 配列に追加できます。要件に応じて、他のリンクの前後どちらにでも配置可能です。

ts
import { createTRPCClient, httpBatchLink, retryLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    retryLink({
      retry(opts) {
        if (
          opts.error.data &&
          opts.error.data.code !== 'INTERNAL_SERVER_ERROR'
        ) {
          // Don't retry on non-500s
          return false;
        }
        if (opts.op.type !== 'query') {
          // Only retry queries
          return false;
        }
 
        // Retry up to 3 times
        return opts.attempts <= 3;
      },
      // Double every attempt, with max of 30 seconds (starting at 1 second)
      retryDelayMs: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
    }),
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});
ts
import { createTRPCClient, httpBatchLink, retryLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const client = createTRPCClient<AppRouter>({
  links: [
    retryLink({
      retry(opts) {
        if (
          opts.error.data &&
          opts.error.data.code !== 'INTERNAL_SERVER_ERROR'
        ) {
          // Don't retry on non-500s
          return false;
        }
        if (opts.op.type !== 'query') {
          // Only retry queries
          return false;
        }
 
        // Retry up to 3 times
        return opts.attempts <= 3;
      },
      // Double every attempt, with max of 30 seconds (starting at 1 second)
      retryDelayMs: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
    }),
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});

上記の例では、retryLink を httpBatchLink の前に追加しています。retry 関数は必須であり、再試行の条件を定義します。この例では、以下の条件で再試行が行われます：

  • エラーがステータスコード500の TRPCClientError である場合、または有効なtRPCエラーを取得できなかった場合にリクエストを再試行します。

  • 最大3回までリクエストを再試行

オプション​

ts
interface RetryLinkOptions<TInferrable extends InferrableClientTypes> {
  /**
   * The retry function
   */
  retry: (opts: RetryFnOptions<TInferrable>) => boolean;
  /**
   * The delay between retries in ms (defaults to 0)
   */
  retryDelayMs?: (attempt: number) => number;
}
 
interface RetryFnOptions<TInferrable extends InferrableClientTypes> {
  /**
   * The operation that failed
   */
  op: Operation;
  /**
   * The error that occurred
   */
  error: TRPCClientError<TInferrable>;
  /**
   * The number of attempts that have been made (including the first call)
   */
  attempts: number;
}
ts
interface RetryLinkOptions<TInferrable extends InferrableClientTypes> {
  /**
   * The retry function
   */
  retry: (opts: RetryFnOptions<TInferrable>) => boolean;
  /**
   * The delay between retries in ms (defaults to 0)
   */
  retryDelayMs?: (attempt: number) => number;
}
 
interface RetryFnOptions<TInferrable extends InferrableClientTypes> {
  /**
   * The operation that failed
   */
  op: Operation;
  /**
   * The error that occurred
   */
  error: TRPCClientError<TInferrable>;
  /**
   * The number of attempts that have been made (including the first call)
   */
  attempts: number;
}

tracked() イベントの処理​

tracked() を使用するサブスクリプションで retryLink を利用する場合、リンクは再試行時に最後に確認されたイベントIDを自動的に付与します。これによりサブスクリプションの再接続時に、イベントを見逃すことなく中断した位置から再開できます。

例えば Server-sent Events (SSE) を httpSubscriptionLink で使用している場合、401 Unauthorized などのエラー発生時に retryLink が最後のイベントIDを使用した再接続を自動処理します。