Query, mutation e subscription

Concateni .input(zodSchema).query(async ({ input, ctx }) => ...) a publicProcedure. Il gestore riceve l'input convalidato e il context della richiesta. Può restituire qualsiasi valore serializzabile: un oggetto, un array o un valore primitivo.

Il tipo restituito viene inferito automaticamente e diventa il tipo dei dati del corrispondente hook useQuery sul client.

trpc.post.getById.useQuery({ id: '1' }) chiama la procedura getById nel router post. L'hook restituisce il familiare oggetto dei risultati di React Query: { data, isLoading, isError, refetch }.

L'oggetto input è tipizzato staticamente: passare { id: 123 } quando lo schema prevede una stringa genera un errore TypeScript rilevato durante lo sviluppo.

Usi .input(zodSchema).mutation(async ({ input, ctx }) => ...) per le operazioni di scrittura sul server: creare, aggiornare o eliminare dati. Le mutation vengono chiamate esplicitamente invece di essere eseguite al montaggio.

Il gestore della mutation ha accesso all'intero context della richiesta, inclusa la sessione di NextAuth, tramite ctx.

const { mutate, isLoading, error } = trpc.post.create.useMutation(). Chiami mutate({ title: 'New', content: '...' }) per attivare la mutation. Come React Query's useMutation, non viene eseguita al montaggio.

Passi le callback onSuccess e onError alle opzioni di useMutation per gestire gli effetti collaterali successivi alla mutation.

Per aggiornare i dati di una query dopo il completamento di una mutation, usi l'hook delle utility di tRPC: const utils = trpc.useUtils(). In onSuccess, chiami utils.post.getAll.invalidate() per attivare un nuovo fetch dell'elenco dei post.

Questo è l'equivalente in tRPC di React Query's queryClient.invalidateQueries() e segue lo stesso comportamento di marcatura come obsoleta e successivo nuovo fetch.

tRPC usa Zod per la validazione dell'input per impostazione predefinita. Lo schema Zod viene eseguito sul server a runtime e rifiuta gli input non validi prima che raggiungano il gestore. Lo stesso schema fornisce i tipi TypeScript al client.

Questo duplice ruolo, validazione a runtime e tipi TypeScript, elimina la duplicazione: definisca il contratto una sola volta in Zod e ottenga entrambe le garanzie di sicurezza senza costi aggiuntivi.

Per impostazione predefinita, tRPC usa httpBatchLink, che raggruppa più richieste tRPC concorrenti in un'unica richiesta HTTP. Più chiamate useQuery nello stesso ciclo di rendering di un componente vengono inviate e risolte insieme.

Questo riduce significativamente il traffico di rete rispetto a richieste HTTP separate per ogni query in una pagina con molteplici esigenze di dati.

Definisca una procedura subscription: publicProcedure.subscription(async function*() { while (true) { yield await nextEvent(); } }). Le subscription usano generatori asincroni e richiedono un trasporto WebSocket.

Le subscription sono ideali per le funzionalità in tempo reale: notifiche live, cursori per la modifica collaborativa o risposte AI trasmesse in streaming.

Sostituisca httpBatchLink con una combinazione di httpBatchLink e wsLink usando splitLink: indirizzi le subscription a wsLink e query/mutation a httpBatchLink. Crei il client WebSocket con createWSClient({ url: 'ws://localhost:3000' }).

Questo trasporto ibrido fa sì che la maggior parte delle richieste usi un efficiente batching HTTP, mentre le subscription usano connessioni WebSocket persistenti.

trpc.notifications.onNew.useSubscription(undefined, { onData: (notification) => addToList(notification), onError: console.error }) sottoscrive alla procedura. La callback onData viene chiamata per ogni valore prodotto.

La subscription viene ristabilita automaticamente se la connessione WebSocket si interrompe e viene poi ristabilita.

Una pagina con un elenco in tempo reale potrebbe usare una query per caricare l'elenco iniziale, una mutation per aggiungere un elemento e una subscription per ricevere le aggiunte in tempo reale da altri utenti. Tutte e tre sono tipizzate rispetto allo stesso AppRouter e si combinano naturalmente.

La strategia di invalidazione della cache dipende dalla preferenza per un nuovo fetch completo (invalidate dopo la mutation) o per gli aggiornamenti della cache (utils.post.getAll.setData).

Quale metodo delle utility di tRPC attiva un nuovo fetch di una query dopo il completamento di una mutation?

Definisca le query con .query() e le mutation con .mutation(), entrambe convalidate dagli schemi Zod. Sul client, usi trpc.router.procedure.useQuery() e useMutation(). Invalidi le query dopo una mutation con utils.procedure.invalidate(). Le subscription usano generatori asincroni e richiedono wsLink per il trasporto WebSocket.

Per impostazione predefinita, httpBatchLink raggruppa le query concorrenti in un'unica richiesta HTTP.