スプリットリンク

非公式ベータ版翻訳

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

splitLinkは、指定された条件に基づいてリンクチェーンの実行を分岐できるリンクです。trueとfalseの両方の分岐が必須です。各分岐には単一のリンク、または配列形式で複数のリンクを指定できます。

重要な注意点として、splitLinkに実行用リンクを指定すると、splitLinkは渡されたリンクに基づいて完全に新しいリンクチェーンを作成します。そのため、単一リンクを指定する場合は終端リンクを使用する必要があり、分岐で複数リンクを実行する場合は配列の最後に終端リンクを追加する必要があります。以下にsplitLinkの動作概念図を示します：

使用例

特定リクエストでのバッチ処理無効化

tRPCクライアント設定で終端リンクとしてhttpBatchLinkを使用している場合、すべてのリクエストでバッチ処理が有効になります。しかし特定リクエストのみでバッチ処理を無効化する必要がある場合、tRPCクライアント設定内の終端リンクをhttpLinkとhttpBatchLink間で動的に切り替える必要があります。これはsplitLinkの活用に最適なシナリオです：

1. クライアント設定 / utils/trpc.ts

client/index.ts
ts
import {
  createTRPCClient,
  httpBatchLink,
  httpLink,
  splitLink,
} from '@trpc/client';
import type { AppRouter } from '../server';
const url = `http://localhost:3000`;
const client = createTRPCClient<AppRouter>({
  links: [
    splitLink({
      condition(op) {
        // check for context property `skipBatch`
        return Boolean(op.context.skipBatch);
      },
      // when condition is true, use normal request
      true: httpLink({
        url,
      }),
      // when condition is false, use batching
      false: httpBatchLink({
        url,
      }),
    }),
  ],
});

client/index.ts
ts
import {
  createTRPCClient,
  httpBatchLink,
  httpLink,
  splitLink,
} from '@trpc/client';
import type { AppRouter } from '../server';
const url = `http://localhost:3000`;
const client = createTRPCClient<AppRouter>({
  links: [
    splitLink({
      condition(op) {
        // check for context property `skipBatch`
        return Boolean(op.context.skipBatch);
      },
      // when condition is true, use normal request
      true: httpLink({
        url,
      }),
      // when condition is false, use batching
      false: httpBatchLink({
        url,
      }),
    }),
  ],
});

2. バッチ処理なしでのリクエスト実行

client.ts
ts
const postResult = proxy.posts.query(null, {
  context: {
    skipBatch: true,
  },
});

client.ts
ts
const postResult = proxy.posts.query(null, {
  context: {
    skipBatch: true,
  },
});

または：

MyComponent.tsx
tsx
export function MyComponent() {
  const postsQuery = proxy.posts.useQuery(undefined, {
    trpc: {
      context: {
        skipBatch: true,
      },
    }
  });
  return (
    <pre>{JSON.stringify(postsQuery.data ?? null, null, 4)}</pre>
  )
})

MyComponent.tsx
tsx
export function MyComponent() {
  const postsQuery = proxy.posts.useQuery(undefined, {
    trpc: {
      context: {
        skipBatch: true,
      },
    }
  });
  return (
    <pre>{JSON.stringify(postsQuery.data ?? null, null, 4)}</pre>
  )
})

splitLinkのオプション

splitLink関数はcondition、true、falseの3つのフィールドを持つオプションオブジェクトを引数に取ります。

ts
function splitLink<TRouter extends AnyRouter = AnyRouter>(opts: {
  condition: (op: Operation) => boolean;
  /**
   * The link to execute next if the test function returns `true`.
   */
  true: TRPCLink<TRouter> | TRPCLink<TRouter>[];
  /**
   * The link to execute next if the test function returns `false`.
   */
  false: TRPCLink<TRouter> | TRPCLink<TRouter>[];
}) => TRPCLink<TRouter>

ts
function splitLink<TRouter extends AnyRouter = AnyRouter>(opts: {
  condition: (op: Operation) => boolean;
  /**
   * The link to execute next if the test function returns `true`.
   */
  true: TRPCLink<TRouter> | TRPCLink<TRouter>[];
  /**
   * The link to execute next if the test function returns `false`.
   */
  false: TRPCLink<TRouter> | TRPCLink<TRouter>[];
}) => TRPCLink<TRouter>

参考

このリンクのソースコードはGitHubで確認できます。