Version: 10.x

HTTP 批量流链接

unstable_httpBatchStreamLink 是 终止链接，它将一组单独的 tRPC 操作批处理为单个 HTTP 请求，该请求发送到单个 tRPC 过程（相当于 httpBatchLink），但不等待批处理的所有响应准备就绪，并将响应流式传输一旦有任何数据可用。

¥unstable_httpBatchStreamLink is a terminating link that batches an array of individual tRPC operations into a single HTTP request that's sent to a single tRPC procedure (equivalent to httpBatchLink), but doesn't wait for all the responses of the batch to be ready and streams the responses as soon as any data is available.

信息

我们已将其前缀为 unstable_，因为它是一个新 API，但你可以安全地使用它！阅读更多。

¥We have prefixed this as unstable_ as it's a new API, but you're safe to use it! Read more.

用法

¥Usage

所有用法和选项与 httpBatchLink 相同。
¥All usage and options are identical to httpBatchLink.

注意

如果你需要能够在程序中更改/设置响应标头（包括 cookie），请确保使用 httpBatchLink！这是因为 unstable_httpBatchStreamLink 不支持在流开始后设置标头。阅读更多。

¥If you require the ability to change/set response headers (which includes cookies) from within your procedures, make sure to use httpBatchLink instead! This is due to the fact that unstable_httpBatchStreamLink does not support setting headers once the stream has begun. Read more.

你可以将 httpBatchStreamLink 导入并添加到 links 数组中，如下所示：

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

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.txt 文件中设置所有程序来使用批处理。下面的代码将生成一个 HTTP 请求，并在服务器上生成一个数据库查询：

¥After that, you can make use of batching by setting all your procedures in a Promise.all. The code below will produce exactly one HTTP request and on the server exactly one database query:

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),
]);

流式模式

¥Streaming mode

⚠️ 此链接不稳定，将来可能会发生变化。
¥⚠️ This link is unstable and may change in the future.

当将请求一起批处理时，常规 httpBatchLink 的行为是等待所有请求完成后再发送响应。如果你想在响应准备好后立即发送，可以使用 httpBatchStreamLink。这对于长时间运行的请求很有用。

¥When batching requests together, the behavior of a regular httpBatchLink is to wait for all requests to finish before sending the response. If you want to send responses as soon as they are ready, you can use httpBatchStreamLink instead. This is useful for long-running requests.

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 将：

¥Compared to a regular httpBatchLink, a unstable_httpBatchStreamLink will:

导致请求使用 Trpc-Batch-Mode: stream 标头发送
¥Cause the requests to be sent with a Trpc-Batch-Mode: stream header
导致使用 Transfer-Encoding: chunked 和 Vary: trpc-batch-mode 标头发送响应
¥Cause the response to be sent with a Transfer-Encoding: chunked and Vary: trpc-batch-mode headers
从传递给 responseMeta 的参数对象中删除 data 键（因为对于流式响应，标头是在数据可用之前发送的）
¥Remove the data key from the argument object passed to responseMeta (because with a streamed response, the headers are sent before the data is available)

兼容性（客户端）

¥Compatibility (client-side)

浏览器

¥Browsers

浏览器支持应与 fetch 支持相同。

¥Browser support should be identical to fetch support.

Node.js / Deno

对于浏览器之外的运行时，fetch 实现应该支持流式传输，这意味着 await fetch(...) 获得的响应应该具有 ReadableStream<Uint8Array> | NodeJS.ReadableStream 类型的 body 属性，这意味着：

¥For runtimes other than the browser ones, the fetch implementation should support streaming, meaning that the response obtained by await fetch(...) should have a body property of type ReadableStream<Uint8Array> | NodeJS.ReadableStream, meaning that:

response.body.getReader 是一个返回 ReadableStreamDefaultReader<Uint8Array> 对象的函数
¥either response.body.getReader is a function that returns a ReadableStreamDefaultReader<Uint8Array> object
或者 response.body 是 Uint8Array Buffer
¥or response.body is a Uint8Array Buffer

这包括对 undici、node-fetch、原生 Node.js 获取实现和 WebAPI 获取实现（浏览器）的支持。

¥This includes support for undici, node-fetch, native Node.js fetch implementation, and WebAPI fetch implementation (browsers).

React Native

接收流依赖于 TextDecoder API，该 API 在 React Native 中不可用。如果你仍然想启用流式传输，你可以使用 polyfill 并将其传递给 httpBatchStreamLink 选项：

¥Receiving the stream relies on the TextDecoder API, which is not available in React Native. If you still want to enable streaming, you can use a polyfill and pass it to the httpBatchStreamLink options:

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 }
});

兼容性（服务器端）

¥Compatibility (server-side)

⚠️ 对于 aws lambda，不支持 unstable_httpBatchStreamLink（将简单地表现得像常规 httpBatchLink）。如果启用它不会破坏任何东西，但不会产生任何效果。
¥⚠️ for aws lambda, unstable_httpBatchStreamLink is not supported (will simply behave like a regular httpBatchLink). It should not break anything if enabled, but will not have any effect.

⚠️ 对于 cloudflare 工作线程，你需要通过功能标志启用 ReadableStream API：streams_enable_constructors
¥⚠️ for cloudflare workers, you need to enable the ReadableStream API through a feature flag: streams_enable_constructors

参考

¥Reference

你可以在 GitHub。上查看此链接的源代码

¥You can check out the source code for this link on GitHub.

用法​

流式模式​

兼容性（客户端）​

浏览器​

Node.js / Deno​

React Native​

兼容性（服务器端）​

参考​

用法

流式模式

兼容性（客户端）

浏览器

Node.js / Deno

React Native

兼容性（服务器端）

参考