Integración con 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 sobre la muy popular @tanstack/react-query, por lo que te recomendamos que te familiarices con React Query, ya que su documentación profundiza mucho más en su uso.

Si estás usando Next.js, te recomendamos usar nuestra integración con ese framework 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
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[]
 
  // ...
}

La integración de tRPC con React Query

Esta biblioteca permite el uso directamente dentro de componentes 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.