分割链接

splitLink 是一个链接，允许你根据给定条件对链接链的执行进行分支。true 和 false 分支都是必需的。你可以仅提供一个链接，也可以通过数组为每个分支提供多个链接。

¥splitLink is a link that allows you to branch your link chain's execution depending on a given condition. Both the true and false branches are required. You can provide just one link, or multiple links per branch via an array.

需要注意的是，当你提供链接供 splitLink 执行时，splitLink 会根据你传递的链接创建一个全新的链接链。因此，如果仅提供一个链接，则需要使用 终止链接；如果提供要在分支上执行的多个链接，则需要在数组末尾添加终止链接。以下是 splitLink 工作原理的直观展示：

¥It's important to note that when you provide links for splitLink to execute, splitLink will create an entirely new link chain based on the links you passed. Therefore, you need to use a terminating link if you only provide one link or add the terminating link at the end of the array if you provide multiple links to be executed on a branch. Here's a visual representation of how splitLink works:

使用示例

¥Usage Example

对某些请求禁用批处理

¥Disable batching for certain requests

假设你使用 httpBatchLink 作为 tRPC 客户端配置中的终止链接。这意味着每个请求都启用请求批处理。但是，如果你需要仅对某些请求禁用批处理，则需要在 httpLink 和 httpBatchLink 之间动态更改 tRPC 客户端配置中的终止链接。这是使用 splitLink 的绝佳机会：

¥Let's say you're using httpBatchLink as the terminating link in your tRPC client config. This means request batching is enabled in every request. However, if you need to disable batching only for certain requests, you would need to change the terminating link in your tRPC client config dynamically between httpLink and httpBatchLink. This is a perfect opportunity for splitLink to be used:

1. 配置客户端/utils/trpc.ts

¥ Configure client / 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. 执行请求而不进行批处理

¥ Perform request without batching

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

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

或者：

¥or:

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 Options

splitLink 函数采用具有三个字段的选项对象：condition、true 和 false。

¥The splitLink function takes an options object that has three fields: condition, true, and false.

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>

参考

¥Reference

你可以在 GitHub。 上查看此链接的源代码

¥You can check out the source code for this link on GitHub.