Intégration React Query (Classique)

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

astuce

Cette documentation concerne notre intégration 'Classique' avec React Query, qui (bien que toujours supportée) n'est pas la méthode recommandée pour démarrer de nouveaux projets tRPC avec TanStack React Query. Nous vous conseillons plutôt d'utiliser la nouvelle Intégration TanStack React Query.

tRPC propose une intégration de premier ordre avec React. Sous le capot, il s'agit simplement d'un wrapper autour du très populaire @tanstack/react-query. Nous vous recommandons donc de vous familiariser avec React Query, car leur documentation aborde son utilisation de manière beaucoup plus approfondie.

Si vous utilisez Next.js, nous vous conseillons plutôt d'utiliser notre intégration avec ce framework.

❓ 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[]
 
  // ...
}

L'intégration tRPC React Query

Cette bibliothèque permet une utilisation directe dans les composants React.

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>
  );
}

Différences avec React Query standard

Le wrapper simplifie certains aspects de React Query pour vous :

• Query Keys - elles sont générées et gérées automatiquement par tRPC, en fonction des paramètres de procédure que vous fournissez

  • Si vous avez besoin de la clé de requête calculée par tRPC, vous pouvez utiliser getQueryKey

• Type safe par défaut - les types définis dans votre backend tRPC déterminent également les types de votre client React Query, garantissant la sécurité typographique dans toute votre application React.