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 の構成に使用されます。その種類に興味があったので、ソースコードを見始めました。 package/client/src/links/httpBatchLinks.ts には httpBatchLink.ts という名前のファイルがあり、この記事の執筆時点では約 137 行のコードがあります。

httpBatchLink 関数定義:

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

opts のタイプは HTTPBatchLinkOptions, です。未知の部分を追ってみましょう。

の型定義を見てみましょう。 - HTTPBatchLinkOptions

- トラウター

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:

AnyClientTypes

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,
};

AnyRootTypes:

AnyRootTypes

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

混乱する可能性がありますが、ここで重要なルールは、型はファイル内で定義され、これらの型を使用する関数と同じ場所に配置されるだけでなく、必要に応じてコードベース全体で使用できるようにこれらの型をエクスポートすることです。

ここでの最良の例は、httpUtils.ts で定義された HTTPLinkBaseOptions が同じファイルで使用され、packages/client/src/links/HTTPBatchLinkOptions.ts でも使用されることです

次のような場合があります:

• packages/client/src/links/HTTPBatchLinkOptions.ts

• packages/server/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 中国語 Web サイトの他の関連記事を参照してください。