HTTP リンク

httpLink は、HTTP 経由で tRPC 操作を tRPC プロシージャに送信する終了リンクです。

httpLink は POST と GET の両方のリクエストをサポートします。

用途

httpLink をインポートし、links 配列に次のように追加できます。

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

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

httpLink のオプション

httpLink 関数は、HTTPLinkOptions の形をしたオプションオブジェクトを取ります。

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.dokyumento.jp/docs/v11/data-transformers
   **/
  transformer?: DataTransformerOptions;
  /**
   * Headers to be set on outgoing requests or a callback that of said headers
   * @link https://trpc.dokyumento.jp/docs/v10/header
   */
  headers?:
    | HTTPHeaders
    | ((opts: { op: Operation }) => HTTPHeaders | Promise<HTTPHeaders>);
  /**
   * Send all requests as POSTS requests regardless of the procedure type
   * The server must separately allow overriding the method. See:
   * @link https://trpc.dokyumento.jp/docs/rpc
   */
  methodOverride?: 'POST';
}

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.dokyumento.jp/docs/v11/data-transformers
   **/
  transformer?: DataTransformerOptions;
  /**
   * Headers to be set on outgoing requests or a callback that of said headers
   * @link https://trpc.dokyumento.jp/docs/v10/header
   */
  headers?:
    | HTTPHeaders
    | ((opts: { op: Operation }) => HTTPHeaders | Promise<HTTPHeaders>);
  /**
   * Send all requests as POSTS requests regardless of the procedure type
   * The server must separately allow overriding the method. See:
   * @link https://trpc.dokyumento.jp/docs/rpc
   */
  methodOverride?: 'POST';
}

リファレンス

GitHubでこのリンクのソースコードを確認できます。