React Query-integrering (Klassisk)

Inofficiell Beta-översättning

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

tips

Det här är dokumentationen för vår 'klassiska' React Query-integrering, som (fortfarande stöds) inte är det rekommenderade sättet att starta nya tRPC-projekt med TanStack React Query. Vi rekommenderar istället den nya TanStack React Query-integreringen.

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 in på mycket större djup när det gäller användning.

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

❓ Do I have to use an integration?

No! The integration is fully optional. You can use @tanstack/react-query using just a vanilla tRPC client, although then you'll have to manually manage query keys and do not get the same level of DX as when using the integration package.

utils/trpc.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../server';
 
export const trpc = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'YOUR_API_URL' })],
});

utils/trpc.ts
ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../server';
 
export const trpc = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'YOUR_API_URL' })],
});

components/PostList.tsx
tsx
import { useQuery } from '@tanstack/react-query';
import { trpc } from '../utils/trpc';
 
function PostList() {
  const { data } = useQuery({
    queryKey: ['posts'],
    queryFn: () => trpc.post.list.query(),
  });
  data; // Post[]
 
  // ...
}

components/PostList.tsx
tsx
import { useQuery } from '@tanstack/react-query';
import { trpc } from '../utils/trpc';
 
function PostList() {
  const { data } = useQuery({
    queryKey: ['posts'],
    queryFn: () => trpc.post.list.query(),
  });
  data; // Post[]
 
  // ...
}

tRPC:s React Query-integrering

Det här biblioteket 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