In this article, we analyze the httpBatchLink types found in the tRPC source code. But first, you would want to know
what is httpBatchLink.

httpBatchLink:

Below is an example picked from the tRPC vanilla setup guide.


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 is used in configuring tRPC. I was curious about its types, so I started looking at its source code. There is a filed named httpBatchLink.ts found in packages/client/src/links/httpBatchLinks.ts and has about 137 lines of code at the time of writing this article.

httpBatchLink function definition:


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

opts are of type HTTPBatchLinkOptions<TRouter[‘_def’][‘_config’][‘$types’]>,. Let’s follow along the unknowns. I would look at the type definitions for:
- HTTPBatchLinkOptions
- TRouter

HTTPBatchLinkOptions type

You will find HTTPBatchLinkOptions type defined in 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>);
 };

<TRoot extends AnyClientTypes> is a generic type that extends AnyClientTypes, This means that the generic type must at least have the properties and structure of the type it extends.

AnyClientTypes:

AnyClientTypes


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

What is Pick here? I searched for Pick in TS docs and found this:
Constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type.

Example:


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

It could be confusing but important rule here is that types are defined in files, making them colocated with the functions that use these types but also export these types so they can be used across the codebase where required.

Best example here is, HTTPLinkBaseOptions defined in httpUtils.ts is used in the same file and also used in packages/client/src/links/HTTPBatchLinkOptions.ts

In some cases like:

Only types are defined in these files, there are no other functions found here.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects

httpBatchLink types in tRPC source code explained