Integración con React Query

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

tRPC ofrece una integración de primera clase con React. Internamente, esto es simplemente un wrapper alrededor del popular @tanstack/react-query, por lo que te recomendamos familiarizarte con React Query, ya que su documentación profundiza mucho más en su uso.

consejo

Si estás usando Next.js, te recomendamos usar nuestra integración con ese framework en su lugar.

La integración de tRPC con React Query

Esta biblioteca permite el uso directo dentro de componentes de 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>
  );
}

Diferencias con React Query estándar

El wrapper simplifica ciertos aspectos de React Query para ti:

• Claves de consulta (Query Keys): tRPC las genera y gestiona automáticamente según los parámetros que proporciones

  • Si necesitas la clave de consulta que calcula tRPC, puedes usar getQueryKey

• Tipado seguro por defecto: los tipos definidos en tu backend de tRPC también determinan los tipos en tu cliente de React Query, garantizando seguridad en toda tu aplicación React.