분할 링크

splitLink는 주어진 조건에 따라 링크 체인의 실행을 분기할 수 있는 링크입니다. true와 false 분기 모두 필수입니다. 각 분기에 링크를 하나만 제공하거나, 배열을 통해 여러 링크를 제공할 수 있습니다.

splitLink에 실행할 링크를 제공하면 splitLink가 전달된 링크를 기반으로 완전히 새로운 링크 체인을 생성한다는 점에 유의하세요. 따라서 분기에서 링크를 하나만 실행할 때는 종단 링크를 사용해야 하며, 여러 링크를 제공할 때는 배열 끝에 종단 링크를 추가해야 합니다. splitLink의 동작을 그림으로 나타내면 다음과 같습니다:

사용 예시

특정 요청에 대해 배치 처리 비활성화

tRPC 클라이언트 설정에서 httpBatchLink를 종단 링크로 사용한다고 가정해 보겠습니다. 이 경우 모든 요청에 배치 처리가 적용됩니다. 특정 요청에만 배치 처리를 비활성화하려면 종단 링크를 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(undefined, {
  context: {
    skipBatch: true,
  },
});

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

or:

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

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

splitLink 옵션

splitLink 함수는 condition, true, false라는 세 가지 필드를 가진 옵션 객체를 인수로 받습니다.

ts
declare 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
declare 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에서 확인할 수 있습니다.