Types httpBatchLink dans le code source du tRPC expliqués

Dans cet article, nous analysons les types httpBatchLink trouvés dans le code source du tRPC. Mais d'abord, tu voudrais savoir

qu'est-ce que httpBatchLink.

httpBatchLink :

Vous trouverez ci-dessous un exemple tiré du guide de configuration du 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 est utilisé dans la configuration du tRPC. J'étais curieux de connaître ses types, alors j'ai commencé à regarder son code source. Il existe un fichier nommé httpBatchLink.ts trouvé dans packages/client/src/links/httpBatchLinks.ts et contient environ 137 lignes de code au moment de la rédaction de cet article.

Définition de la fonction httpBatchLink :

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

les opts sont de type HTTPBatchLinkOptions,. Suivons les inconnues. Je regarderais les définitions de types pour :

- HTTPBatchLinkOptions

-TRouteur

Type HTTPBatchLinkOptions

Vous trouverez le type HTTPBatchLinkOptions défini dans packages/client/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>);
 };

est un type générique qui étend AnyClientTypes, cela signifie que le type générique doit au moins avoir les propriétés et la structure du type qu'il étend.

Tous les types de clients :

Tous les types de clients

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

Qu'est-ce que Pick ici ? J'ai recherché Pick dans la documentation TS et j'ai trouvé ceci :

Construit un type en sélectionnant l'ensemble de propriétés Keys (chaîne littérale ou union de chaînes littérales) à partir du Type.

Exemple :

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

Cela peut prêter à confusion, mais la règle importante ici est que les types sont définis dans des fichiers, ce qui les rend colocalisés avec les fonctions qui utilisent ces types, mais exportent également ces types afin qu'ils puissent être utilisés dans la base de code si nécessaire.

Le meilleur exemple ici est que HTTPLinkBaseOptions défini dans httpUtils.ts est utilisé dans le même fichier et également utilisé dans packages/client/src/links/HTTPBatchLinkOptions.ts

Dans certains cas comme :

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

• packages/server/src/unstable-core-do-not-import/clientish/inferrable.ts

Seuls les types sont définis dans ces fichiers, aucune autre fonction n'est trouvée ici.

À propos de nous :

Chez Thinkthroo, nous étudions les grands projets open source et fournissons des guides architecturaux. Nous avons développé des composants resubale, construits avec le vent arrière, que vous pouvez utiliser dans votre projet. Nous proposons des services de développement Next.js, React et Node.

Prenez rendez-vous avec nous pour discuter de votre projet.

Références :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!