バージョン: 10.x

HTTPバッチストリームリンク

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。エラーを見つけましたか？問題を報告 →

unstable_httpBatchStreamLinkは終端リンクであり、個別のtRPC操作を配列としてまとめ、単一のtRPCプロシージャに送信する単一HTTPリクエストにバッチ処理します（httpBatchLinkと同等）。ただし、バッチ内のすべてのレスポンスが準備できるのを待たず、データが利用可能になるとすぐにレスポンスをストリーミングします。

情報

新規APIのためunstable_プレフィックスを付けていますが、安全に利用できます！詳細はこちら

使用方法

使用方法とオプションはすべてhttpBatchLinkと同一です。

注記

プロシージャ内からレスポンスヘッダー（Cookieを含む）を変更/設定する必要がある場合は、代わりにhttpBatchLinkを使用してください！これはunstable_httpBatchStreamLinkがストリーム開始後のヘッダー設定をサポートしていないためです。詳細

httpBatchStreamLinkをインポートしてlinks配列に追加する例：

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

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

その後、すべてのプロシージャをPromise.allで設定することでバッチ処理を活用できます。以下のコードは単一のHTTPリクエストを生成し、サーバー側では単一のデータベースクエリを実行します：

ts
const somePosts = await Promise.all([
  trpc.post.byId.query(1),
  trpc.post.byId.query(2),
  trpc.post.byId.query(3),
]);

ts
const somePosts = await Promise.all([
  trpc.post.byId.query(1),
  trpc.post.byId.query(2),
  trpc.post.byId.query(3),
]);

ストリーミングモード

⚠️ このリンクは不安定なため、将来変更される可能性があります。

リクエストをバッチ処理する際、通常のhttpBatchLinkはすべてのリクエストが完了するまでレスポンスを送信しません。レスポンスの準備が整い次第すぐに送信したい場合は、代わりにhttpBatchStreamLinkを使用できます。これは長時間実行されるリクエストに有効です。

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

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

通常のhttpBatchLinkと比較して、unstable_httpBatchStreamLinkは以下の動作をします：

Trpc-Batch-Mode: streamヘッダー付きでリクエストを送信する
Transfer-Encoding: chunkedおよびVary: trpc-batch-modeヘッダー付きでレスポンスを送信する
responseMetaに渡される引数オブジェクトからdataキーを削除する（ストリーミングレスポンスではヘッダーがデータ利用前に送信されるため）

互換性（クライアント側）

ブラウザ

ブラウザサポートはfetchのサポートと同一である必要があります。

Node.js / Deno

ブラウザ以外のランタイムでは、fetch実装がストリーミングをサポートしている必要があります。つまりawait fetch(...)で得られるレスポンスのbodyプロパティがReadableStream<Uint8Array> | NodeJS.ReadableStream型であることを意味し、以下いずれかの条件を満たします：

response.body.getReaderがReadableStreamDefaultReader<Uint8Array>オブジェクトを返す関数である
またはresponse.bodyがUint8ArrayのBufferである

これにはundici、node-fetch、ネイティブNode.js fetch実装、WebAPI fetch実装（ブラウザ）のサポートが含まれます。

React Native

ストリームの受信にはTextDecoder APIが必要ですが、React Nativeでは利用できません。それでもストリーミングを有効化したい場合は、ポリフィルを使用してhttpBatchStreamLinkのオプションに渡せます：

ts
unstable_httpBatchStreamLink({
  url: 'http://localhost:3000',
  textDecoder: new TextDecoder(),
  // ^? textDecoder: { decode: (input: Uint8Array) => string }
});

ts
unstable_httpBatchStreamLink({
  url: 'http://localhost:3000',
  textDecoder: new TextDecoder(),
  // ^? textDecoder: { decode: (input: Uint8Array) => string }
});

互換性（サーバーサイド）

⚠️ AWS Lambdaではunstable_httpBatchStreamLinkはサポートされません（通常のhttpBatchLinkと同様に動作します）。有効化しても問題は発生しませんが、効果はありません。

⚠️ Cloudflare Workersでは、ReadableStream APIを機能フラグstreams_enable_constructorsを通じて有効にする必要があります。

参考

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

使用方法​

ストリーミングモード​

互換性（クライアント側）​

ブラウザ​

Node.js / Deno​

React Native​

互換性（サーバーサイド）​

参考​