Split リンク

splitLink は、特定の条件に応じてリンクチェーンの実行を分岐させるリンクです。trueブランチとfalseブランチの両方が必要です。ブランチごとに1つのリンク、または配列を使用して複数のリンクを指定できます。

splitLink に実行させるリンクを指定する場合、splitLink は渡されたリンクに基づいて完全に新しいリンクチェーンを作成することに注意することが重要です。そのため、1つのリンクのみを指定する場合はターミネーションリンクを使用するか、複数のリンクをブランチで実行する場合は配列の最後にターミネーションリンクを追加する必要があります。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 = `https://:3000`;
const client = createTRPCClient<AppRouter>({
  links: [
    splitLink({
      condition(op) {
        // check for context property `skipBatch`
        return op.context.skipBatch === true;
      },
      // 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 = `https://:3000`;
const client = createTRPCClient<AppRouter>({
  links: [
    splitLink({
      condition(op) {
        // check for context property `skipBatch`
        return op.context.skipBatch === true;
      },
      // 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で確認できます。