Introduktion av den nya TanStack React Query-integrationen

Inofficiell Beta-översättning

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

Vi är glada att meddela att den nya TanStack React Query-integrationen för tRPC nu finns tillgänglig i tRPC:s next-release. Jämfört med vår klassiska React Query-integration är den enklare och mer TanStack Query-inriktad genom att direkt använda de inbyggda gränssnitten QueryOptions och MutationOptions från TanStack React Query, istället för att wrappa useQuery och useMutation med vår egen klient.

greeting.tsx
tsx
import { useQuery } from '@tanstack/react-query';
import { useTRPC } from './trpc';
export function Greeting() {
  const trpc = useTRPC();
  const greetingQuery = useQuery(trpc.greeting.queryOptions({ name: 'Jerry' }));
  // greetingQuery.data === 'Hello Jerry'
  // [...]
}

greeting.tsx
tsx
import { useQuery } from '@tanstack/react-query';
import { useTRPC } from './trpc';
export function Greeting() {
  const trpc = useTRPC();
  const greetingQuery = useQuery(trpc.greeting.queryOptions({ name: 'Jerry' }));
  // greetingQuery.data === 'Hello Jerry'
  // [...]
}

Med denna nya klient tar vi bort ett abstraktionslager som ofta orsakar förvirring för nya användare, och erbjuder istället ett mer direkt sätt att arbeta med TanStack React Query som känns omedelbart bekant för de som följer TanStacks egna dokumentation. Det innebär också att vi behöver mindre tRPC-dokumentation för att förklara den, även om vi naturligtvis har dokumentation för att komma igång.

Varför denna förändring?

Du kan läsa vår ursprungliga RFC för denna förändring här som går in på detaljer. Men några av våra huvudsakliga skäl är:

• Enkelhet: Den nya klienten är enklare och mer TanStack Query-inriktad genom att tillhandahålla fabriker för vanliga TanStack React Query-gränssnitt som QueryKeys, QueryOptions och MutationOptions. Detta minskar inlärningskurvan eftersom du kan följa den officiella TanStack Query-dokumentationen

• Bekanthet: Den nya klienten är mer bekant för de som redan använder TanStack Query, där du använder TanStack Query för andra arbetsbelastningar i din applikation utan att tvingas använda en alternativ syntax för tRPC

• React: Vår klassiska React Query-integration bryter faktiskt mot hooks-regler; den kan inte korrekt linteras och uppmuntrar vissa mönster som kommer att brytas under React Compiler, som att skicka hooks som props. I detta avseende är den nya klienten mer idiomatisk React

• Underhållbarhet: En utmaning vi haft med vår versionshantering är att hålla tRPC i takt med förändringar i TanStack Query, särskilt nya funktioner som tillförs QueryClient då och då. Genom att använda det minimala gränssnittet för native interfaces kan vi stödja React Query mycket enklare, samtidigt som vi följer vad TanStacks maintainers anser vara bästa praxis

• Feedback: Som vi nämnt orsakar den klassiska klienten ofta svårigheter för nya användare, men feedbacken vi fick på RFC:en för denna klient var överväldigande positiv, där majoriteten av användare som lämnade kommentarer eller meddelanden var entusiastiska över att använda denna klient. Naturligtvis är inte alla övertygade om klienten än, så vi kommer att behålla den klassiska klienten

Vad händer med den klassiska tRPC React Query-integrationen?

Den försvinner inte på länge! Vi åtar oss att underhålla den länge framöver, men den kommer inte att få några betydande nya funktioner och vi kommer att betrakta den som stabil.

Vi rekommenderar fortfarande att nya projekt startar med den nya TanStack React Query-integrationen, och befintliga projekt bör överväga att migrera gradvis.

Hur migrerar jag?

Även om den klassiska klienten kommer att underhållas länge framöver rekommenderar vi att nya projekt startar med den nya klienten och aktiva projekt överväger en gradvis migrering.

Båda klienterna är kompatibla med varandra och kan finnas i samma applikation, så du kan migrera i din egen takt. Vi arbetar också med en codemod där vi skulle älska bidrag från communityn. Vi vill tacka @reaper för hans bidrag till codemoden hittills!

👉 Läs migrationsdokumentationen