Integración de React Query (Clásica)

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 →

consejo

Esta documentación cubre nuestra integración 'Clásica' con React Query, que (aunque sigue siendo compatible) no es la forma recomendada para iniciar nuevos proyectos tRPC con TanStack React Query. Te sugerimos usar la nueva Integración con TanStack React Query en su lugar.

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.

Si estás usando Next.js, te sugerimos utilizar nuestra integración específica en su lugar.

❓ 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
export const trpc = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: 'YOUR_API_URL' })],
});

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

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

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

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.