Aller au contenu principal
Version : 10.x

HTTP Batch Stream Link

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

unstable_httpBatchStreamLink est un lien terminal qui regroupe un tableau d'opérations tRPC individuelles en une seule requête HTTP envoyée à une procédure tRPC unique (équivalent à httpBatchLink), mais n'attend pas que toutes les réponses du lot soient prêtes et diffuse les réponses dès que des données sont disponibles.

info

Nous l'avons préfixé unstable_ car c'est une nouvelle API, mais vous pouvez l'utiliser en toute sécurité ! En savoir plus.

Utilisation​

Tous les usages et options sont identiques à httpBatchLink.

note

Si vous avez besoin de modifier ou définir des en-têtes de réponse (y compris les cookies) depuis vos procédures, utilisez plutôt httpBatchLink ! En effet, unstable_httpBatchStreamLink ne permet pas de définir des en-têtes une fois le flux démarré. En savoir plus.

Vous pouvez importer et ajouter le httpBatchStreamLink au tableau links comme suit :

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

Ensuite, vous pouvez exploiter le regroupement en plaçant toutes vos procédures dans un Promise.all. Le code ci-dessous générera exactement une requête HTTP et sur le serveur exactement une requête de base de données :

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

Mode streaming​

⚠️ Ce lien est instable et pourrait évoluer ultérieurement.

Lors du regroupement de requêtes, le comportement d'un httpBatchLink classique est d'attendre que toutes les requêtes se terminent avant d'envoyer la réponse. Si vous souhaitez envoyer les réponses dès qu'elles sont prêtes, utilisez plutôt httpBatchStreamLink. Ceci est utile pour les requêtes de longue durée.

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

Comparé à un httpBatchLink classique, unstable_httpBatchStreamLink va :

  • Faire envoyer les requêtes avec un en-tête Trpc-Batch-Mode: stream

  • Faire envoyer la réponse avec les en-têtes Transfer-Encoding: chunked et Vary: trpc-batch-mode

  • Supprimer la clé data de l'objet d'argument passé à responseMeta (car avec une réponse streamée, les en-têtes sont envoyés avant que les données ne soient disponibles)

Compatibilité (côté client)​

La prise en charge des navigateurs devrait être identique à celle de fetch.

Node.js / Deno​

Pour les environnements autres que les navigateurs, l'implémentation de fetch doit supporter le streaming, ce qui signifie que la réponse obtenue via await fetch(...) doit avoir une propriété body de type ReadableStream<Uint8Array> | NodeJS.ReadableStream, impliquant que :

  • soit response.body.getReader est une fonction renvoyant un objet ReadableStreamDefaultReader<Uint8Array>

  • soit response.body est un Buffer Uint8Array

Cela inclut le support pour undici, node-fetch, l'implémentation native de fetch dans Node.js et l'implémentation WebAPI (navigateurs).

React Native​

La réception du flux repose sur l'API TextDecoder, indisponible dans React Native. Pour activer le streaming malgré cela, utilisez un polyfill passé aux options 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 }
});

Compatibilité (côté serveur)​

⚠️ pour aws lambda, unstable_httpBatchStreamLink n'est pas pris en charge (fonctionnera comme un httpBatchLink standard). Son activation ne causera pas d'erreur mais restera sans effet.

⚠️ pour cloudflare workers, vous devez activer l'API ReadableStream via un flag de fonctionnalité : streams_enable_constructors

Référence​

Vous pouvez consulter le code source de ce lien sur GitHub.