Skip to main content
Version: 11.x

HTTP Link

httpLink is a terminating link that sends a tRPC operation to a tRPC procedure over HTTP.

httpLink supports both POST and GET requests.

Usage

You can import and add the httpLink to the links array as such:

client/index.ts
ts
import { createTRPCClient, httpLink } from '@trpc/client';
import type { AppRouter } from '../server';
const client = createTRPCClient<AppRouter>({
links: [
httpLink({
url: 'http://localhost:3000',
// transformer,
}),
],
});
client/index.ts
ts
import { createTRPCClient, httpLink } from '@trpc/client';
import type { AppRouter } from '../server';
const client = createTRPCClient<AppRouter>({
links: [
httpLink({
url: 'http://localhost:3000',
// transformer,
}),
],
});

The httpLink function takes an options object that has the HTTPLinkOptions shape.

ts
export interface HTTPLinkOptions {
url: string;
/**
* Add ponyfill for fetch
*/
fetch?: typeof fetch;
/**
* Add ponyfill for AbortController
*/
AbortController?: typeof AbortController | null;
/**
* Data transformer
* @link https://trpc.io/docs/v11/data-transformers
**/
transformer?: DataTransformerOptions;
/**
* Headers to be set on outgoing requests or a callback that of said headers
* @link http://trpc.io/docs/v10/header
*/
headers?:
| HTTPHeaders
| ((opts: { op: Operation }) => HTTPHeaders | Promise<HTTPHeaders>);
}
ts
export interface HTTPLinkOptions {
url: string;
/**
* Add ponyfill for fetch
*/
fetch?: typeof fetch;
/**
* Add ponyfill for AbortController
*/
AbortController?: typeof AbortController | null;
/**
* Data transformer
* @link https://trpc.io/docs/v11/data-transformers
**/
transformer?: DataTransformerOptions;
/**
* Headers to be set on outgoing requests or a callback that of said headers
* @link http://trpc.io/docs/v10/header
*/
headers?:
| HTTPHeaders
| ((opts: { op: Operation }) => HTTPHeaders | Promise<HTTPHeaders>);
}

Reference

You can check out the source code for this link on GitHub.