Queries, mutaties en subscriptions

Koppel .input(zodSchema).query(async ({ input, ctx }) => ...) aan publicProcedure. De afhandelaar ontvangt de gevalideerde invoer en de context van het verzoek. Geef elke serialiseerbare waarde terug: een object, array of primitieve waarde.

Het retourtype wordt automatisch afgeleid en wordt het datatype van de bijbehorende useQuery-hook op de client.

trpc.post.getById.useQuery({ id: '1' }) roept de getById-procedure in de post-router aan. De hook retourneert het bekende React Query-resultaatobject: { data, isLoading, isError, refetch }.

Het invoerobject is statisch getypeerd: als je { id: 123 } doorgeeft terwijl het schema een tekenreeks verwacht, geeft TypeScript tijdens de ontwikkeling een fout.

Gebruik .input(zodSchema).mutation(async ({ input, ctx }) => ...) voor schrijfbewerkingen aan serverzijde: gegevens aanmaken, bijwerken of verwijderen. Mutaties worden expliciet aangeroepen in plaats van bij het laden van een component te worden uitgevoerd.

De afhandelaar van de mutatie heeft via ctx toegang tot de volledige context van het verzoek, inclusief de sessie uit NextAuth.

const { mutate, isLoading, error } = trpc.post.create.useMutation(). Roep mutate({ title: 'New', content: '...' }) aan om de mutatie te activeren. Net als useMutation van React Query wordt deze niet uitgevoerd wanneer de component wordt geladen.

Geef callbacks voor onSuccess en onError door aan de opties van useMutation voor neveneffecten na de mutatie.

Gebruik de hulphook van tRPC om querygegevens na een geslaagde mutatie te vernieuwen: const utils = trpc.useUtils(). Roep in onSuccess utils.post.getAll.invalidate() aan om het opnieuw ophalen van de berichtenlijst te starten.

Dit is het tRPC-equivalent van React Query's queryClient.invalidateQueries() en volgt hetzelfde patroon van verouderd markeren en opnieuw ophalen.

tRPC gebruikt standaard Zod voor invoervalidatie. Het Zod-schema wordt tijdens de uitvoering op de server uitgevoerd en weigert ongeldige invoer voordat die de afhandelaar bereikt. Hetzelfde schema levert de TypeScript-typen voor de client.

Deze dubbele rol (validatie tijdens de uitvoering plus TypeScript-typen) voorkomt dubbele definities: je definieert het contract één keer in Zod en krijgt beide veiligheidswaarborgen automatisch.

Standaard gebruikt tRPC httpBatchLink, dat meerdere gelijktijdige tRPC-verzoeken bundelt tot één HTTP-verzoek. Meerdere useQuery-aanroepen in dezelfde rendercyclus van een component worden samen verzonden en samen verwerkt.

Dit vermindert de netwerkbelasting aanzienlijk ten opzichte van afzonderlijke HTTP-verzoeken voor elke query op een pagina met meerdere gegevensbehoeften.

Definieer een abonnementsprocedure: publicProcedure.subscription(async function*() { while (true) { yield await nextEvent(); } }). Abonnementen gebruiken asynchrone generatoren en vereisen een WebSocket-transport.

Abonnementen zijn ideaal voor realtimefuncties: live meldingen, cursors voor gezamenlijk bewerken of gestreamde AI-antwoorden.

Vervang httpBatchLink door een combinatie van httpBatchLink en wsLink met splitLink: stuur abonnementen naar wsLink en query's en mutaties naar httpBatchLink. Maak de WebSocket-client met createWSClient({ url: 'ws://localhost:3000' }).

Dit hybride transport betekent dat de meeste verzoeken efficiënte HTTP-bundeling gebruiken, terwijl abonnementen permanente WebSocket-verbindingen gebruiken.

trpc.notifications.onNew.useSubscription(undefined, { onData: (notification) => addToList(notification), onError: console.error }) abonneert zich op de procedure. De callback onData wordt aangeroepen voor elke opgeleverde waarde.

Het abonnement wordt automatisch opnieuw tot stand gebracht als de WebSocket de verbinding verbreekt en opnieuw verbinding maakt.

Een realtime-lijstpagina kan een query gebruiken om de beginlijst te laden, een mutatie om een item toe te voegen en een abonnement om live toevoegingen van andere gebruikers te ontvangen. Alle drie zijn getypeerd aan de hand van dezelfde AppRouter en kunnen vanzelfsprekend worden gecombineerd.

De strategie voor het ongeldig maken van de cache hangt ervan af of je de voorkeur geeft aan alles opnieuw ophalen (ongeldig maken na een mutatie) of de cache bijwerken (utils.post.getAll.setData).

Definieer query's met .query() en mutaties met .mutation(), die beide door Zod-schema's worden gevalideerd. Gebruik op de client trpc.router.procedure.useQuery() en useMutation(). Maak query's na een mutatie ongeldig met utils.procedure.invalidate(). Abonnementen gebruiken asynchrone generatoren en vereisen wsLink voor WebSocket-transport.

httpBatchLink bundelt standaard gelijktijdige query's tot één HTTP-verzoek.