メインコンテンツへスキップ
バージョン: 11.x

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

非公式ベータ版翻訳

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

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

オプション​

オプションはhttpBatchLink optionsと同一ですが、以下の追加事項があります：

OptionTypeDefaultDescription
streamHeader'trpc-accept' | 'accept''trpc-accept'Which header to use to signal the server that the client wants a streaming response. 'accept' uses the standard Accept header instead of the custom trpc-accept header, which can avoid CORS preflight for cross-origin streaming queries since Accept is a CORS-safelisted header.

使用方法​

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

注記

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

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

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

通常のhttpBatchLinkと比較して、httpBatchStreamLinkは以下の挙動を示します：

  • リクエストがtrpc-accept: application/jsonlヘッダー（またはstreamHeader: 'accept'を使用時はAccept: application/jsonl）で送信されるようになります

  • レスポンスをtransfer-encoding: chunkedおよびcontent-type: application/jsonlで送信する

  • responseMetaに渡される引数オブジェクトからdataキーを削除する（ストリーミングレスポンスではヘッダーがデータ利用前に送信されるため）

非同期ジェネレータと遅延プロミス​

tRPC.ioのホームページで実際に試すことができます：https://trpc.io/?try=minimal#try-it-out

ts
import { createTRPCClient, httpBatchStreamLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchStreamLink({
      url: 'http://localhost:3000',
    }),
  ],
});
const iterable = await trpc.examples.iterable.query();
 
for await (const value of iterable) {
  console.log('Iterable:', value);
}
ts
import { createTRPCClient, httpBatchStreamLink } from '@trpc/client';
import type { AppRouter } from './server';
 
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchStreamLink({
      url: 'http://localhost:3000',
    }),
  ],
});
const iterable = await trpc.examples.iterable.query();
 
for await (const value of iterable) {
  console.log('Iterable:', value);
}

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

ブラウザ​

ブラウザサポートは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およびTextDecoderStream APIに依存していますが、これらはReact Nativeでは利用できません。注意点として、TextDecoderStreamのポリフィルがReadableStreamとWritableStreamを自動的にポリフィルしない場合、これらもポリフィルする必要があります。ストリーミングを有効にしたい場合は、これらをポリフィルする必要があります。

また、httpBatchStreamLinkの設定オプションでデフォルトのfetchをオーバーライドする必要があります。以下の例では、fetchの実装としてExpo fetchパッケージを使用します。

ts
import { httpBatchStreamLink } from '@trpc/client';
httpBatchStreamLink({
  fetch: (url, opts) =>
    fetch(url, {
      ...opts,
      reactNative: { textStreaming: true },
    }),
  url: 'http://localhost:3000',
});
ts
import { httpBatchStreamLink } from '@trpc/client';
httpBatchStreamLink({
  fetch: (url, opts) =>
    fetch(url, {
      ...opts,
      reactNative: { textStreaming: true },
    }),
  url: 'http://localhost:3000',
});

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

AWS Lambda

httpBatchStreamLinkは、インフラストラクチャがストリーミングレスポンス用に設定されている場合にのみ、AWS Lambdaでサポートされます。設定されていない場合、このリンクは通常のhttpBatchLinkと同じように動作します。

Cloudflare Workers

ReadableStream APIを有効にするには、機能フラグstreams_enable_constructorsを設定する必要があります。

参考​

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

接続を維持するためのpingオプションの設定​

ルート設定を行う際に、jsonlオプションを渡して接続を維持するためのpingオプションを設定できます。

ts
import { initTRPC } from '@trpc/server';
 
const t = initTRPC.create({
  jsonl: {
    pingMs: 1000,
  },
});
ts
import { initTRPC } from '@trpc/server';
 
const t = initTRPC.create({
  jsonl: {
    pingMs: 1000,
  },
});