tRPC 原始碼中的 httpBatchLink 類型解釋

在本文中，我們分析了 tRPC 原始碼中的 httpBatchLink 類型。但首先，您想知道

什麼是 httpBatchLink。

httpBatchLink：

以下是從 tRPC vanilla 設定指南中選取的範例。

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> {

opts 的類型為 HTTPBatchLinkOptions,。讓我們跟隨未知的腳步。我會查看以下類型定義：

- HTTPBatchLinkOptions

-TRouter

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 的泛型類型，這意味著泛型類型必須至少具有它擴展的類型的屬性和結構。

任何客戶端類型：

任何客戶端類型

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

這裡的Pick是什麼？我在 TS 文件中搜尋 Pick 並找到了這個：

透過從 Type 選取屬性 Keys（字串文字或字串文字的並集）集來建構類型。

範例：

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

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

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

任何根類型：

任何根類型

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中文網其他相關文章！