Skip to main content Accueil Créateurs trpc trpc links
links Configure the tRPC client link chain: httpLink, httpBatchLink, httpBatchStreamLink, splitLink, loggerLink, wsLink, createWSClient, httpSubscriptionLink, unstable_localLink, retryLink. Choose the right terminating link. Route subscriptions via splitLink. Build custom links for SOA routing. Link options: url, headers, transformer, maxURLLength, maxItems, connectionParams, EventSource ponyfill.
Aller à l'installation Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/trpc/trpc --skill linksLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Plus depuis ce dépôt Create a vanilla tRPC client with createTRPCClient<AppRouter>(), configure link chain with httpBatchLink/httpLink, dynamic headers for auth, transformer on links (not client constructor). Infer types with inferRouterInputs and inferRouterOutputs. AbortController signal support. TRPCClientError typing.
Configure SuperJSON transformer on both server initTRPC.create({ transformer: superjson }) and every client terminating link (httpBatchLink, httpLink, wsLink, httpSubscriptionLink) to support Date, Map, Set, BigInt over the wire. Transformer must match on both sides. In v11, transformer goes on individual links, not the client constructor.
Full end-to-end tRPC setup for Next.js App Router. Covers route handler with fetchRequestHandler (GET + POST exports), TRPCProvider with QueryClientProvider, createTRPCOptionsProxy for RSC prefetching, HydrateClient/HydrationBoundary for hydration, useSuspenseQuery for Suspense, and server-side callers.
Métiers associés SOC
Basé sur la classification professionnelle SOC
Explorateur de fichiers
2 fichiers name links description Configure the tRPC client link chain: httpLink, httpBatchLink, httpBatchStreamLink, splitLink, loggerLink, wsLink, createWSClient, httpSubscriptionLink, unstable_localLink, retryLink. Choose the right terminating link. Route subscriptions via splitLink. Build custom links for SOA routing. Link options: url, headers, transformer, maxURLLength, maxItems, connectionParams, EventSource ponyfill.
type core library trpc library_version 11.16.0 requires ["client-setup"] sources ["www/docs/client/links/overview.md","www/docs/client/links/httpLink.md","www/docs/client/links/httpBatchLink.md","www/docs/client/links/httpBatchStreamLink.md","www/docs/client/links/splitLink.mdx","www/docs/client/links/wsLink.md","www/docs/client/links/httpSubscriptionLink.md","www/docs/client/links/localLink.mdx","www/docs/client/links/loggerLink.md","packages/client/src/links/"]
tRPC -- Links
Setup
import { createTRPCClient, httpBatchLink, loggerLink } from '@trpc/client' ;
import type { AppRouter } from './server' ;
const client = createTRPCClient<AppRouter >({
links : [
loggerLink (),
httpBatchLink ({
url : 'http://localhost:3000/trpc' ,
}),
],
});
The links array is a chain: non-terminating links (loggerLink, splitLink, retryLink) forward operations; the chain must end with a terminating link (httpBatchLink, httpLink, httpBatchStreamLink, wsLink, httpSubscriptionLink, unstable_localLink).
Core Patterns
httpBatchLink -- Batch Multiple Calls into One Request
import { createTRPCClient, httpBatchLink } from '@trpc/client' ;
import type { AppRouter } from './server' ;
const client = createTRPCClient<AppRouter >({
links : [
httpBatchLink ({
url : 'http://localhost:3000/trpc' ,
maxURLLength : 2083 ,
maxItems : 10 ,
}),
],
});
const [post1, post2, post3] = await Promise .all ([
client.post .byId .query (1 ),
client.post
byId
query
2
post
byId
query
3
Concurrent calls are batched into a single HTTP request. Set maxURLLength to prevent 414 errors from long URLs.
splitLink -- Route Subscriptions to SSE import {
createTRPCClient,
httpBatchLink,
httpSubscriptionLink,
splitLink,
} from '@trpc/client' ;
import type { AppRouter } from './server' ;
const client = createTRPCClient<AppRouter >({
links : [
splitLink ({
condition : (op ) => op.type === 'subscription' ,
true : httpSubscriptionLink ({
url : 'http://localhost:3000/trpc' ,
}),
false : httpBatchLink ({
url : 'http://localhost:3000/trpc' ,
}),
}),
],
});
splitLink -- Disable Batching Per-Request via Context import {
createTRPCClient,
httpBatchLink,
httpLink,
splitLink,
} from '@trpc/client' ;
import type { AppRouter } from './server' ;
const client = createTRPCClient<AppRouter >({
links : [
splitLink ({
condition : (op ) => Boolean (op.context .skipBatch ),
true : httpLink ({ url : 'http://localhost:3000/trpc' }),
false : httpBatchLink ({ url : 'http://localhost:3000/trpc' }),
}),
],
});
const result = await client.post .byId .query (1 , {
context : { skipBatch : true },
});
httpBatchStreamLink -- Stream Responses as They Arrive import { createTRPCClient, httpBatchStreamLink } from '@trpc/client' ;
import type { AppRouter } from './server' ;
const client = createTRPCClient<AppRouter >({
links : [
httpBatchStreamLink ({
url : 'http://localhost:3000/trpc' ,
}),
],
});
const iterable = await client.examples .iterable .query ();
for await (const value of iterable) {
console .log (value);
}
wsLink -- WebSocket Terminating Link import { createTRPCClient, createWSClient, wsLink } from '@trpc/client' ;
import type { AppRouter } from './server' ;
const wsClient = createWSClient ({
url : 'ws://localhost:3000' ,
});
const client = createTRPCClient<AppRouter >({
links : [wsLink<AppRouter >({ client : wsClient })],
});
Custom Link import { TRPCLink } from '@trpc/client' ;
import { observable } from '@trpc/server/observable' ;
import type { AppRouter } from './server' ;
export const timingLink : TRPCLink <AppRouter > = () => {
return ({ next, op } ) => {
return observable ((observer ) => {
const start = Date .now ();
const unsubscribe = next (op).subscribe ({
next (value ) {
observer.next (value);
},
error (err ) {
console .error (`${op.path} failed in ${Date .now() - start} ms` );
observer.error (err);
},
complete (console .log (`${op.path} completed in ${Date .now() - start} ms` );
observer.complete ();
},
});
return unsubscribe;
});
};
};
Common Mistakes
[CRITICAL] No terminating link in the chain const client = createTRPCClient<AppRouter >({
links : [loggerLink ()],
});
const client = createTRPCClient<AppRouter >({
links : [loggerLink (), httpBatchLink ({ url : 'http://localhost:3000/trpc' })],
});
The link chain must end with a terminating link. Without one, tRPC throws "No more links to execute - did you forget to add an ending link?"
Source: packages/client/src/links/internals/createChain.ts
[CRITICAL] Sending subscriptions through httpLink or httpBatchLink const client = createTRPCClient<AppRouter >({
links : [httpBatchLink ({ url : 'http://localhost:3000/trpc' })],
});
await client.onMessage .subscribe ({});
const client = createTRPCClient<AppRouter >({
links : [
splitLink ({
condition : (op ) => op.type === 'subscription' ,
true : httpSubscriptionLink ({ url : 'http://localhost:3000/trpc' }),
false : httpBatchLink ({ url : 'http://localhost:3000/trpc' }),
}),
],
});
httpLink and httpBatchLink throw on subscription operations. Subscriptions must use httpSubscriptionLink or wsLink, routed via splitLink.
Source: packages/client/src/links/httpLink.ts
[HIGH] httpBatchLink and httpBatchStreamLink headers callback receives { opList } httpBatchLink and httpBatchStreamLink headers callbacks receive { opList } (a NonEmptyArray<Operation>), not { op } like httpLink. Access per-operation context via opList[0]?.context:
httpBatchLink ({
url : 'http://localhost:3000/trpc' ,
headers ({ opList } ) {
return { authorization : opList[0 ]?.context .token };
},
});
httpBatchLink headers callback receives { opList } (an array of operations)
Source: packages/client/src/links/httpBatchLink.ts
[MEDIUM] Default batch limits are Infinity httpBatchLink ({ url : 'http://localhost:3000/trpc' });
httpBatchLink ({
url : 'http://localhost:3000/trpc' ,
maxURLLength : 2083 ,
maxItems : 10 ,
});
Both maxURLLength and maxItems default to Infinity, which can cause 413/414 HTTP errors on servers or CDNs with URL length limits. When the server sets maxBatchSize, set maxItems to the same or lower value so the client auto-splits batches instead of triggering a 400 Bad Request.
Source: packages/client/src/links/httpBatchLink.ts
[HIGH] httpBatchStreamLink data loss on stream completion There is a known race condition where buffered chunks can be lost on normal stream completion. Long streaming responses (e.g., LLM output) may be truncated. If you experience truncated data, switch to httpBatchLink for those operations.
References
See Also
client-setup -- create the tRPC client and configure linkssuperjson -- add transformer to links for Date/Map/Set supportsubscriptions -- set up SSE or WebSocket real-time streamsnon-json-content-types -- route FormData/binary through splitLink + httpLinkservice-oriented-architecture -- build custom routing links for multi-service backends 