Skip to content
tRPC

HTTP Link

On this page

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
import { function createTRPCClient<TRouter extends AnyRouter>(opts: CreateTRPCClientOptions<TRouter>): TRPCClient<TRouter>createTRPCClient, function httpLink<TRouter extends AnyRouter = AnyRouter>(opts: HTTPLinkOptions<TRouter["_def"]["_config"]["$types"]>): TRPCLink<TRouter>httpLink } from '@trpc/client';
import type { 
type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{}>> & DecorateCreateRouterOptions<{}>
AppRouter } from './server';

const 
const client: TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{}>>>
client = 
createTRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{}>>>(opts: CreateTRPCClientOptions<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{}>>>): TRPCClient<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<...>>>
createTRPCClient<
type AppRouter = Router<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{}>> & DecorateCreateRouterOptions<{}>
AppRouter>({
  
links: TRPCLink<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{}>>>[]
links: [
    
httpLink<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{}>>>(opts: HTTPLinkOptions<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}>): TRPCLink<BuiltRouter<{
    ctx: object;
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: false;
}, DecorateCreateRouterOptions<{}>>>
httpLink({
      url: string | URLurl: 'http://localhost:3000',
      // transformer,
    }),
  ],
});

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

export interface HTTPLinkOptions {
  HTTPLinkOptions.url: string | URLurl: string | URL;
  /**
   * Add ponyfill for fetch
   */
  HTTPLinkOptions.fetch?: ((input: RequestInfo | URL, init?: RequestInit) => Promise<Response>) | undefinedfetch?: typeof function fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>fetch;
  /**
   * Data transformer
   * @see https://trpc.io/docs/server/data-transformers
   **/
  HTTPLinkOptions.transformer?: anytransformer?: type DataTransformerOptions = anyDataTransformerOptions;
  /**
   * Headers to be set on outgoing requests or a callback that of said headers
   * @see https://trpc.io/docs/client/headers
   */
  
HTTPLinkOptions.headers?: HTTPHeaders | ((opts: {
    op: Operation;
}) => HTTPHeaders | Promise<HTTPHeaders>) | undefined
headers?:
    | 
type HTTPHeaders = {
    [x: string]: string | string[] | undefined;
}
HTTPHeaders
    | ((
opts: {
    op: Operation;
}
opts: { op: Operationop: 
type Operation = {
    id: number;
    type: string;
    input: unknown;
    path: string;
}
Operation }) => 
type HTTPHeaders = {
    [x: string]: string | string[] | undefined;
}
HTTPHeaders | interface Promise<T>Promise<
type HTTPHeaders = {
    [x: string]: string | string[] | undefined;
}
HTTPHeaders>);
  /**
   * Send all requests as POSTS requests regardless of the procedure type
   * The server must separately allow overriding the method. See:
   * @see https://trpc.io/docs/rpc
   */
  HTTPLinkOptions.methodOverride?: "POST" | undefinedmethodOverride?: 'POST';
}

Reference

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