trpc-nuxt/docs/content/1.get-started/4.links/1.httpLink.md

title, description

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

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.

::alert{type="info"} httpLink imported from trpc-nuxt/client is a convenience wrapper around the original httpLink that replaces regular fetch with a $fetch from Nuxt. It also sets the default headers using useRequestHeaders. ::

Usage

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

import { createTRPCNuxtClient, httpLink } from 'trpc-nuxt/client'
import type { AppRouter } from '~/server/trpc/routers'

const client = createTRPCNuxtClient<AppRouter>({
  links: [
    httpLink({
      url: '/api/trpc',
    }),
  ],
})

httpLink Options

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

export interface HTTPLinkOptions {
  url: string;
  /**
   * Select headers to pass to `useRequestHeaders`.
   */
  pickHeaders?: string[];
  /**
   * Add ponyfill for fetch.
   */
  fetch?: typeof fetch;
  /**
   * Add ponyfill for AbortController
   */
  AbortController?: typeof AbortController | null;
  /**
   * Headers to be set on outgoing requests or a callback that of said headers
   * @link http://trpc.io/docs/v10/header
   */
  headers?: HTTPHeaders | (() => HTTPHeaders | Promise<HTTPHeaders>);
}