HTTP Batch Stream-länk

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

httpBatchStreamLink är en terminerande länk som samlar en array av individuella tRPC-operationer till en enda HTTP-förfrågan som skickas till en enskild tRPC-procedur (motsvarande httpBatchLink), men väntar inte på att alla svar i batchen ska bli klara utan streamar svaren så fort någon data blir tillgänglig.

Alternativ

Alternativen är identiska med httpBatchLink options, med följande tillägg:

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.

Användning

All användning och alternativ är identiska med httpBatchLink.

notering

Om du behöver möjlighet att ändra/sätta svarshuvuden (inklusive cookies) från dina procedurer, se till att använda httpBatchLink istället! Detta beror på att httpBatchStreamLink inte stöder att sätta headers efter att strömmen har börjat. Läs mer.

Du kan importera och lägga till httpBatchStreamLink i links-arrayen så här:

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

Efter detta kan du utnyttja batchhantering genom att placera alla dina procedurer i ett Promise.all. Koden nedan genererar exakt en HTTP-förfrågan och på servern exakt en databasfråga:

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

Strömläge

När förfrågningar batchas väntar en vanlig httpBatchLink på att alla förfrågningar ska slutföras innan svaret skickas. Om du vill skicka svar så fort de blir klara kan du använda httpBatchStreamLink istället. Detta är användbart för långvariga förfrågningar.

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

Jämfört med en vanlig httpBatchLink kommer en httpBatchStreamLink att:

• Orsakar att förfrågningar skickas med ett trpc-accept: application/jsonl-header (eller Accept: application/jsonl vid användning av streamHeader: 'accept')

• Skicka svaret med transfer-encoding: chunked och content-type: application/jsonl

• Ta bort data-nyckeln från argumentobjektet som skickas till responseMeta (eftersom headers skickas före datan är tillgänglig i ett streamat svar)

Asynkrona generatorer och uppskjutna promises

Du kan prova detta på tRPC.io:s hemsida: 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);
}

Kompatibilitet (klientsida)

Webbläsare

Stödet i webbläsare bör vara identiskt med fetch-stödet.

Node.js / Deno

För runtime-miljöer utöver webbläsare måste fetch-implementationen stödja streaming, vilket innebär att svaret från await fetch(...) ska ha en body-egenskap av typen ReadableStream<Uint8Array> | NodeJS.ReadableStream, vilket betyder att:

• antingen är response.body.getReader en funktion som returnerar ett ReadableStreamDefaultReader<Uint8Array>-objekt

• eller så är response.body en Uint8Array-Buffer

Detta inkluderar stöd för undici, node-fetch, Node.js:s inbyggda fetch-implementation och WebAPI:s fetch-implementation (webbläsare).

React Native

Mottagande av strömmen förlitar sig på TextDecoder- och TextDecoderStream-API:erna, som inte finns tillgängliga i React Native. Observera att om din TextDecoderStream-polyfill inte automatiskt polyfyller ReadableStream och WritableStream måste även dessa polyfyllas. Om du fortfarande vill aktivera streaming måste du polyfyllera dessa.

Du måste även åsidosätta standard-fetch i httpBatchStreamLink-konfigurationsalternativen. I exemplet nedan använder vi Expo fetch-paketet som fetch-implementation.

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

Kompatibilitet (serversida)

AWS Lambda

httpBatchStreamLink stöds endast på AWS Lambda när din infrastruktur är konfigurerad för strömmade svar. Annars kommer denna länk att bete sig som en vanlig httpBatchLink.

Cloudflare Workers

Du måste aktivera ReadableStream-API:et via en feature flag: streams_enable_constructors.

Referens

Du kan se källkoden för denna länk på GitHub.

Konfigurera ett ping-alternativ för att hålla anslutningen vid liv

När du konfigurerar din rotkonfiguration kan du skicka med ett jsonl-alternativ för att ställa in ett ping-alternativ som håller anslutningen vid liv.

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