Aller au contenu principal
Version : 11.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 →

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 de httpBatchLink options.

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 :

  • Envoyer les requêtes avec un en-tête trpc-accept: application/jsonl

  • 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
// @filename: server.ts
import { publicProcedure, router } from './trpc';
 
const appRouter = router({
  examples: {
    iterable: publicProcedure.query(async function* () {
      for (let i = 0; i < 3; i++) {
        await new Promise((resolve) => setTimeout(resolve, 500));
        yield i;
      }
    }),
  },
});
 
export type AppRouter = typeof appRouter;
 
 
// @filename: client.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();
         
const iterable: AsyncIterable<number, never, unknown>
 
for await (const value of iterable) {
  console.log('Iterable:', value);
                            
const value: number
}
ts
// @filename: server.ts
import { publicProcedure, router } from './trpc';
 
const appRouter = router({
  examples: {
    iterable: publicProcedure.query(async function* () {
      for (let i = 0; i < 3; i++) {
        await new Promise((resolve) => setTimeout(resolve, 500));
        yield i;
      }
    }),
  },
});
 
export type AppRouter = typeof appRouter;
 
 
// @filename: client.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();
         
const iterable: AsyncIterable<number, never, unknown>
 
for await (const value of iterable) {
  console.log('Iterable:', value);
                            
const value: number
}

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 dépend des API TextDecoder et TextDecoderStream, qui ne sont pas disponibles dans React Native. Notez que si votre polyfill TextDecoderStream ne polyfille pas automatiquement ReadableStream et WritableStream, ceux-ci devront également être polyfillés. Si vous souhaitez tout de même activer le streaming, vous devez polyfiller ces API.

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 fetch.

typescript
httpBatchStreamLink({
  fetch: (url, opts) =>
    fetch(url, {
      ...opts,
      reactNative: { textStreaming: true },
    }),
  ...restOfConfig,
});
typescript
httpBatchStreamLink({
  fetch: (url, opts) =>
    fetch(url, {
      ...opts,
      reactNative: { textStreaming: true },
    }),
  ...restOfConfig,
});

Compatibilité (côté serveur)​

⚠️ pour aws lambda, httpBatchStreamLink n'est pas pris en charge (il se comportera simplement comme un httpBatchLink standard). L'activer ne devrait rien casser, mais n'aura aucun 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.

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