Split リンク
splitLink
は、特定の条件に応じてリンクチェーンの実行を分岐させるリンクです。true
ブランチとfalse
ブランチの両方が必要です。ブランチごとに1つのリンク、または配列を使用して複数のリンクを指定できます。
splitLink
に実行させるリンクを指定する場合、splitLink
は渡されたリンクに基づいて完全に新しいリンクチェーンを作成することに注意することが重要です。そのため、1つのリンクのみを指定する場合はターミネーションリンクを使用するか、複数のリンクをブランチで実行する場合は配列の最後にターミネーションリンクを追加する必要があります。splitLink
の動作を視覚的に示した図を以下に示します。
使用例
特定のリクエストのバッチ処理を無効にする
例えば、tRPC クライアント設定でhttpBatchLink
をターミネーションリンクとして使用しているとします。これは、すべてのリクエストでリクエストのバッチ処理が有効になっていることを意味します。ただし、特定のリクエストでのみバッチ処理を無効にする必要がある場合は、tRPC クライアント設定でhttpLink
とhttpBatchLink
の間でターミネーションリンクを動的に変更する必要があります。これは、splitLink
を使用するのに最適な機会です。
1. クライアントの設定 / utils/trpc.ts
client/index.tsts
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 requesttrue: httpLink({url,}),// when condition is false, use batchingfalse: httpBatchLink({url,}),}),],});
client/index.tsts
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 requesttrue: httpLink({url,}),// when condition is false, use batchingfalse: httpBatchLink({url,}),}),],});
2. バッチ処理なしでリクエストを実行する
client.tsts
const postResult = proxy.posts.query(null, {context: {skipBatch: true,},});
client.tsts
const postResult = proxy.posts.query(null, {context: {skipBatch: true,},});
または
MyComponent.tsxtsx
export function MyComponent() {const postsQuery = proxy.posts.useQuery(undefined, {trpc: {context: {skipBatch: true,},}});return (<pre>{JSON.stringify(postsQuery.data ?? null, null, 4)}</pre>)})
MyComponent.tsxtsx
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で確認できます。