Intégration React Query

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 →

tRPC propose une intégration de premier ordre avec React. En coulisses, il s'agit simplement d'un wrapper autour de la 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.

astuce

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

L'intégration tRPC React Query

Cette bibliothèque permet une utilisation directe au sein des 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.