mirror of
https://github.com/ArthurDanjou/trpc-nuxt.git
synced 2026-01-14 12:14:40 +01:00
59 lines
1.6 KiB
Markdown
59 lines
1.6 KiB
Markdown
---
|
|
title: HTTP Link
|
|
description: httpLink is a terminating link that sends a tRPC operation to a tRPC procedure over HTTP.
|
|
---
|
|
|
|
# HTTP Link
|
|
|
|
`httpLink` is a [terminating link](https://trpc.io/docs/links#the-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`](https://nuxt.com/docs/api/utils/dollarfetch) from Nuxt. It also sets the default headers using [`useRequestHeaders`](https://nuxt.com/docs/api/composables/use-request-headers#userequestheaders).
|
|
::
|
|
|
|
## Usage
|
|
|
|
You can import and add the `httpLink` to the `links` array as such:
|
|
|
|
```ts
|
|
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.
|
|
|
|
```ts
|
|
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>);
|
|
}
|
|
```
|