跳至主要内容
版本：11.x

HTTP 批量流链接

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

信息

我们已将其作为 unstable_ 前缀，因为它是一个新的 API，但您可以安全地使用它！ 了解更多.

用法​

所有用法和选项与 httpBatchLink 相同。

注意

如果您需要从程序中更改/设置响应标头（包括 Cookie）的能力，请确保使用 httpBatchLink！ 这是因为 unstable_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, unstable_httpBatchStreamLink } from '@trpc/client';
import type { AppRouter } from '../server';
const client = createTRPCClient<AppRouter>({
  links: [
    unstable_httpBatchStreamLink({
      url: 'http://localhost:3000',
    }),
  ],
});
client/index.ts
ts
import { createTRPCClient, unstable_httpBatchStreamLink } from '@trpc/client';
import type { AppRouter } from '../server';
const client = createTRPCClient<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(...) 获得的响应应具有类型为 ReadableStream<Uint8Array> | NodeJS.ReadableStream 的 body 属性，这意味着

  • response.body.getReader 是一个返回 ReadableStreamDefaultReader<Uint8Array> 对象的函数
  • 或者 response.body 是一个 Uint8Array Buffer

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

React Native​

接收流依赖于 TextDecoder API，该 API 在 React Native 中不可用。 如果您仍然想启用流式传输，可以使用一个 polyfill 并将其传递给 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 上查看此链接的源代码。