Jenis httpBatchLink dalam kod sumber tRPC dijelaskan

Dalam artikel ini, kami menganalisis jenis httpBatchLink yang terdapat dalam kod sumber tRPC. Tetapi pertama-tama, anda ingin tahu

apakah itu httpBatchLink.

httpBatchLink:

Di bawah ialah contoh yang dipilih daripada panduan persediaan vanila 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 digunakan dalam mengkonfigurasi tRPC. Saya ingin tahu tentang jenisnya, jadi saya mula melihat kod sumbernya. Terdapat fail bernama httpBatchLink.ts ditemui dalam packages/client/src/links/httpBatchLinks.ts dan mempunyai kira-kira 137 baris kod semasa menulis artikel ini.

Takrifan fungsi httpBatchLink:

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

pilihan adalah jenis HTTPBatchLinkOptions,. Mari ikuti yang tidak diketahui. Saya akan melihat definisi jenis untuk:

- HTTPBatchLinkOptions

- TRouter

Jenis HTTPBatchLinkOptions

Anda akan menemui jenis HTTPBatchLinkOptions yang ditakrifkan dalam pakej/klien/src/links/HTTPBatchLinkOptions.ts

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

ialah jenis generik yang memanjangkan AnyClientTypes, Ini bermakna jenis generik mestilah sekurang-kurangnya mempunyai sifat dan struktur jenis yang dilanjutkan.

SebarangJenis Pelanggan:

AnyClientTypes

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

Apakah Pick di sini? Saya mencari Pick in TS docs dan menemui ini:

Membina jenis dengan memilih set sifat Kekunci (rentetan literal atau gabungan literal rentetan) daripada Jenis.

Contoh:

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

Ia mungkin mengelirukan tetapi peraturan penting di sini ialah jenis ditakrifkan dalam fail, menjadikannya dikolokasikan dengan fungsi yang menggunakan jenis ini tetapi turut mengeksport jenis ini supaya ia boleh digunakan merentas pangkalan kod jika diperlukan.

Contoh terbaik di sini ialah, HTTPLinkBaseOptions yang ditakrifkan dalam httpUtils.ts digunakan dalam fail yang sama dan juga digunakan dalam packages/client/src/links/HTTPBatchLinkOptions.ts

Dalam beberapa kes seperti:

• pakej/klien/src/links/HTTPBatchLinkOptions.ts

• pakej/pelayan/src/unstable-core-do-not-import/clientish/inferrable.ts

Hanya jenis ditakrifkan dalam fail ini, tiada fungsi lain ditemui di sini.

Tentang kami:

Di Thinkthroo, kami mengkaji projek sumber terbuka yang besar dan menyediakan panduan seni bina. Kami telah membangunkan Komponen resubale, dibina dengan tailwind, yang boleh anda gunakan dalam projek anda. Kami menawarkan perkhidmatan pembangunan Next.js, React dan Node.

Tempah mesyuarat dengan kami untuk membincangkan projek anda.

Rujukan:

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

Atas ialah kandungan terperinci Jenis httpBatchLink dalam kod sumber tRPC dijelaskan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!