Lien HTTP Batch Stream

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 →

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.

Options

Les options sont identiques à celles des httpBatchLink options, avec l'ajout suivant :

Option	Type	Default	Description
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.

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 ! Cela est dû au fait que httpBatchStreamLink ne permet pas de définir des en-têtes une fois que le flux a commencé. En savoir plus.

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

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

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

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

Comparé à un httpBatchLink classique, un httpBatchStreamLink va :

• Faire en sorte que les requêtes soient envoyées avec un en-tête trpc-accept: application/jsonl (ou Accept: application/jsonl lors de l'utilisation de streamHeader: 'accept')

• Envoyer la réponse avec transfer-encoding: chunked et content-type: application/jsonl

• 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)

Générateurs asynchrones et promesses différées

Vous pouvez tester cette fonctionnalité sur la page d'accueil de 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);
}

Compatibilité (côté client)

Navigateurs

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 les API TextDecoder et TextDecoderStream, qui ne sont pas disponibles dans React Native. Notez que si votre polyfill TextDecoderStream ne polyfill pas automatiquement ReadableStream et WritableStream, ceux-ci devront également être polyfillés. Si vous souhaitez activer le streaming malgré tout, vous devrez polyfiller ces éléments.

Vous devrez également remplacer le fetch par défaut dans les options de configuration du httpBatchStreamLink. Dans l'exemple ci-dessous, nous utiliserons le package Expo fetch pour l'implémentation de 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',
});

Compatibilité (côté serveur)

AWS Lambda

httpBatchStreamLink n'est pris en charge sur AWS Lambda que lorsque votre infrastructure est configurée pour les réponses en streaming. Sinon, ce lien se comportera simplement comme un httpBatchLink classique.

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.

Configurer une option de ping pour maintenir la connexion active

Lors de la configuration de votre root config, vous pouvez passer une option jsonl pour configurer une option de ping afin de maintenir la connexion active.

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