Enlace de transmisión por lotes HTTP

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

unstable_httpBatchStreamLink es un enlace terminal que agrupa un conjunto de operaciones individuales de tRPC en una única solicitud HTTP enviada a un único procedimiento tRPC (equivalente a httpBatchLink), pero no espera a que todas las respuestas del lote estén listas y transmite las respuestas tan pronto como hay datos disponibles.

información

Hemos prefijado esto como unstable_ porque es una nueva API, ¡pero puedes usarlo con seguridad! Lee más.

Uso

Todo el uso y las opciones son idénticos a httpBatchLink.

nota

Si necesitas la capacidad de cambiar/establecer encabezados de respuesta (lo que incluye cookies) desde tus procedimientos, ¡asegúrate de usar httpBatchLink en su lugar! Esto se debe a que unstable_httpBatchStreamLink no admite establecer encabezados una vez que la transmisión ha comenzado. Lee más.

Puedes importar y agregar httpBatchStreamLink al array de links de esta manera:

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

Después, puedes aprovechar la agrupación colocando todos tus procedimientos en un Promise.all. El siguiente código producirá exactamente una solicitud HTTP y en el servidor exactamente una consulta a la base de datos:

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

Modo de transmisión

⚠️ Este enlace es inestable y podría cambiar en el futuro.

Al agrupar solicitudes, el comportamiento normal de httpBatchLink es esperar a que todas las solicitudes finalicen antes de enviar la respuesta. Si deseas enviar respuestas tan pronto como estén disponibles, puedes usar httpBatchStreamLink en su lugar. Esto es útil para solicitudes de larga duración.

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

En comparación con un httpBatchLink regular, unstable_httpBatchStreamLink:

• Envía las solicitudes con el encabezado Trpc-Batch-Mode: stream

• Hace que la respuesta se envíe con los encabezados Transfer-Encoding: chunked y Vary: trpc-batch-mode

• Elimina la clave data del objeto de argumentos pasado a responseMeta (porque con una respuesta transmitida, los encabezados se envían antes de que los datos estén disponibles)

Compatibilidad (lado del cliente)

Navegadores

La compatibilidad con navegadores debe ser idéntica al soporte de fetch.

Node.js / Deno

Para entornos distintos a los navegadores, la implementación de fetch debe admitir transmisión, lo que significa que la respuesta obtenida mediante await fetch(...) debe tener una propiedad body de tipo ReadableStream<Uint8Array> | NodeJS.ReadableStream, lo que implica que:

• response.body.getReader es una función que devuelve un objeto ReadableStreamDefaultReader<Uint8Array>

• o response.body es un Buffer de tipo Uint8Array

Esto incluye soporte para undici, node-fetch, la implementación nativa de fetch en Node.js y la implementación de fetch de WebAPI (navegadores).

React Native

La recepción de la transmisión depende de la API TextDecoder, que no está disponible en React Native. Si aún deseas habilitar la transmisión, puedes usar un polyfill y pasarlo a las opciones de 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 }
});

Compatibilidad (lado del servidor)

⚠️ para aws lambda, unstable_httpBatchStreamLink no es compatible (simplemente se comportará como un httpBatchLink regular). No debería romper nada si se habilita, pero no tendrá ningún efecto.

⚠️ para cloudflare workers, necesitas habilitar la API ReadableStream mediante una bandera de características: streams_enable_constructors

Referencia

Puedes consultar el código fuente de este enlace en GitHub.