tRPC 소스 코드의 httpBatchLink 유형 설명

이 글에서는 tRPC 소스 코드에서 발견된 httpBatchLink 유형을 분석합니다. 하지만 먼저, 당신이 알고 싶을 것입니다

httpBatchLink가 무엇인가요?

httpBatchLink:

아래는 tRPC 바닐라 설정 가이드에서 발췌한 예시입니다.

import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<AppRouter>({
 links: [
 httpBatchLink({
 url: 'http://localhost:3000/trpc',
 // You can pass any HTTP headers you wish here
 async headers() {
 return {
 authorization: getAuthCookie(),
 };
 },
 }),
 ],
});

httpBatchLink는 tRPC 구성에 사용됩니다. 그 종류가 궁금해서 소스코드를 살펴보기 시작했습니다. packages/client/src/links/httpBatchLinks.ts에 httpBatchLink.ts라는 파일이 있으며 이 기사를 작성할 당시 약 137줄의 코드가 있습니다.

httpBatchLink 함수 정의:

export function httpBatchLink<TRouter extends AnyRouter>(
 opts: HTTPBatchLinkOptions<TRouter['_def']['_config']['$types']>,
): TRPCLink<TRouter> {

옵션은 HTTPBatchLinkOptions 유형입니다. 알려지지 않은 것들을 따라가보자. 다음 항목에 대한 유형 정의를 살펴보겠습니다.

- HTTPBatchLink옵션

- 트라우터

HTTPBatchLinkOptions 유형

packages/client/src/links/HTTPBatchLinkOptions.ts에 정의된 HTTPBatchLinkOptions 유형을 찾을 수 있습니다

export type HTTPBatchLinkOptions<TRoot extends AnyClientTypes> =
 HTTPLinkBaseOptions<TRoot> & {
 maxURLLength?: number;
 /**
 * Headers to be set on outgoing requests or a callback that of said headers
 * @see http://trpc.io/docs/client/headers
 */
 headers?:
 | HTTPHeaders
 | ((opts: {
 opList: NonEmptyArray<Operation>;
 }) => HTTPHeaders | Promise<HTTPHeaders>);
 };

AnyClientTypes를 확장하는 일반 유형입니다. 이는 일반 유형이 최소한 확장하는 유형의 속성과 구조를 가져야 함을 의미합니다.

AnyClientTypes:

AnyClientType

export type AnyClientTypes = Pick<AnyRootTypes, 'errorShape' | 'transformer'>;

여기서 픽이 뭔가요? TS 문서에서 Pick을 검색하여 다음을 찾았습니다.

Type에서 키 속성 집합(문자열 리터럴 또는 문자열 리터럴의 합집합)을 선택하여 유형을 구성합니다.

예:

interface Todo {
 title: string;
 description: string;
 completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;

const todo: TodoPreview = {
 title: "Clean room",
 completed: false,
};

AnyRootType:

AnyRootType

export type AnyRootTypes = CreateRootTypes<{
 ctx: any;
 meta: any;
 errorShape: any;
 transformer: any;
}>;

혼란스러울 수 있지만 여기서 중요한 규칙은 유형이 파일에 정의되어 이러한 유형을 사용하는 함수와 같은 위치에 배치되지만 필요한 경우 코드베이스 전체에서 사용할 수 있도록 이러한 유형을 내보내는 것입니다.

여기서 가장 좋은 예는 httpUtils.ts에 정의된 HTTPLinkBaseOptions가 동일한 파일에서 사용되며 packages/client/src/links/HTTPBatchLinkOptions.ts에서도 사용된다는 것입니다.

다음과 같은 경우도 있습니다.

• 패키지/클라이언트/src/links/HTTPBatchLinkOptions.ts

• 패키지/서버/src/unstable-core-do-not-import/clientish/inferrable.ts

이 파일에는 유형만 정의되어 있으며 여기에는 다른 기능이 없습니다.

회사 소개:

Thinkthroo에서는 대규모 오픈소스 프로젝트를 연구하고 아키텍처 가이드를 제공합니다. 우리는 귀하의 프로젝트에서 사용할 수 있는 tailwind로 구축된 resubale 구성 요소를 개발했습니다. Next.js, React, Node 개발 서비스를 제공합니다.

귀하의 프로젝트에 대해 논의하려면 회의를 예약하세요.

참고자료:

1. https://trpc.io/docs/client/vanilla/setup

2. https://github.com/trpc/trpc/blob/next/packages/client/src/links/httpBatchLink.ts#L22

3. https://github.com/trpc/trpc/blob/next/packages/client/src/links/HTTPBatchLinkOptions.ts#L6

4. https://github.com/trpc/trpc/blob/next/packages/client/src/links/internals/httpUtils.ts#L22

위 내용은 tRPC 소스 코드의 httpBatchLink 유형 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!