React Query-integrering

Inofficiell Beta-översättning

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

tRPC erbjuder en förstklassig integration med React. Under huven är detta helt enkelt ett omslag runt den mycket populära @tanstack/react-query, så vi rekommenderar att du bekantar dig med React Query, eftersom deras dokumentation går mycket mer på djupet med dess användning.

tips

Om du använder Next.js rekommenderar vi att du använder vår integration för det istället

tRPC:s React Query-integrering

Detta bibliotek möjliggör användning direkt i React-komponenter

pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
export default function IndexPage() {
  const helloQuery = trpc.hello.useQuery({ name: 'Bob' });
  const goodbyeMutation = trpc.goodbye.useMutation();
  return (
    <div>
      <p>{helloQuery.data?.greeting}</p>
      <button onClick={() => goodbyeMutation.mutate()}>Say Goodbye</button>
    </div>
  );
}

pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
export default function IndexPage() {
  const helloQuery = trpc.hello.useQuery({ name: 'Bob' });
  const goodbyeMutation = trpc.goodbye.useMutation();
  return (
    <div>
      <p>{helloQuery.data?.greeting}</p>
      <button onClick={() => goodbyeMutation.mutate()}>Say Goodbye</button>
    </div>
  );
}

Skillnader jämfört med vanlig React Query

Omslaget abstraherar vissa aspekter av React Query åt dig:

• Query Keys - dessa genereras och hanteras av tRPC åt dig, baserat på de procedurindata du tillhandahåller

  • Om du behöver den query key som tRPC beräknar kan du använda getQueryKey

• Typsäkert som standard - de typer du tillhandahåller i din tRPC Backend styr även typerna i din React Query-klient, vilket ger säkerhet i hela din React-app