HTTP Batch Stream Link

Inofficiell Beta-översättning

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

unstable_httpBatchStreamLink är en terminerande länk som samlar en serie 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 batch-svar ska bli klara utan strömmar svaren så fort någon data blir tillgänglig.

info

Vi har prefixat detta med unstable_ eftersom det är ett nytt API, men det är säkert att använda! Läs mer.

Användning

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

notering

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

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

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

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

⚠️ Denna länk är instabil och kan komma att ändras i framtiden.

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

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

• Skicka förfrågningar med ett Trpc-Batch-Mode: stream-header

• Skicka svar med Transfer-Encoding: chunked och Vary: trpc-batch-mode-headers

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

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

Mottagandet av strömmen förlitar sig på TextDecoder-API:et, som inte finns tillgängligt i React Native. Om du ändå vill aktivera streaming kan du använda en polyfill och skicka den till httpBatchStreamLink-alternativen:

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

Kompatibilitet (serversida)

⚠️ För AWS Lambda stöds inte unstable_httpBatchStreamLink (kommer att bete sig som en vanlig httpBatchLink). Den bör inte orsaka problem om aktiverad, men ger ingen effekt.

⚠️ För cloudflare workers måste du aktivera ReadableStream-API:et via en funktionsflagga: streams_enable_constructors

Referens

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