Presentamos la nueva integración de TanStack 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 →

Nos complace anunciar que la nueva integración de TanStack React Query para tRPC ya está disponible en la versión next de tRPC. Comparada con nuestra integración clásica de React Query, es más simple y más nativa de TanStack Query, ya que utiliza directamente las interfaces QueryOptions y MutationOptions propias de TanStack React Query, en lugar de envolver useQuery y useMutation con nuestro propio cliente.

greeting.tsx
tsx
import { useQuery } from '@tanstack/react-query';
import { useTRPC } from './trpc';
export function Greeting() {
  const trpc = useTRPC();
  const greetingQuery = useQuery(trpc.greeting.queryOptions({ name: 'Jerry' }));
  // greetingQuery.data === 'Hello Jerry'
  // [...]
}

greeting.tsx
tsx
import { useQuery } from '@tanstack/react-query';
import { useTRPC } from './trpc';
export function Greeting() {
  const trpc = useTRPC();
  const greetingQuery = useQuery(trpc.greeting.queryOptions({ name: 'Jerry' }));
  // greetingQuery.data === 'Hello Jerry'
  // [...]
}

Con este nuevo cliente eliminamos una capa de abstracción que suele causar confusión a los nuevos usuarios, ofreciendo en su lugar una forma más directa de trabajar con TanStack React Query que resultará inmediatamente familiar para quienes siguen la propia documentación de TanStack. Esto también significa que necesitamos menos documentación de tRPC para explicarlo, aunque por supuesto tenemos documentación para comenzar.

¿Por qué este cambio?

Puedes leer nuestra RFC original que motivó este cambio aquí, donde se explican los detalles. Algunas de nuestras razones principales son:

• Simplicidad: El nuevo cliente es más simple y más nativo de TanStack Query, proporcionando fábricas para interfaces comunes como QueryKeys, QueryOptions y MutationOptions. Esto reduce la curva de aprendizaje ya que puedes seguir la documentación oficial de TanStack Query

• Familiaridad: El nuevo cliente resulta más familiar para quienes ya usan TanStack Query, permitiéndote usarlo para otras cargas de trabajo en tu aplicación sin forzar una sintaxis alternativa para tRPC

• React: Nuestra integración clásica de React Query incumple las reglas de los hooks; no puede ser correctamente analizada, y fomenta patrones que fallarán con el React Compiler, como pasar hooks como props. En este sentido, el nuevo cliente es más idiomático para React

• Mantenibilidad: Un desafío en nuestro versionado ha sido mantener tRPC alineado con los cambios de TanStack Query, especialmente nuevas funciones añadidas al QueryClient. Al usar la pequeña superficie de interfaces nativas, podemos soportar React Query más fácilmente, siguiendo lo que los mantenedores de TanStack consideran mejores prácticas

• Retroalimentación: Como mencionamos, el cliente clásico suele causar dificultades a nuevos usuarios, pero además la retroalimentación sobre la RFC para este cliente fue abrumadoramente positiva, con la mayoría de usuarios que nos comentaron entusiasmados por usarlo. Claro que no todos están convencidos aún, así que mantendremos el cliente clásico

¿Qué pasará con la integración clásica de tRPC React Query?

¡No desaparecerá pronto! Nos comprometemos a mantenerla durante mucho tiempo, aunque no recibirá nuevas características significativas y la consideraremos estable.

Seguimos recomendando que los nuevos proyectos comiencen con la nueva integración de TanStack React Query, y que los proyectos existentes consideren migrar gradualmente.

¿Cómo migrar?

Aunque el cliente clásico se mantendrá durante mucho tiempo, recomendamos que los nuevos proyectos empiecen con el nuevo cliente y que los proyectos activos consideren migrar gradualmente.

Ambos clientes son compatibles entre sí y pueden coexistir en la misma aplicación, así que puedes migrar a tu propio ritmo. También estamos trabajando en un codemod al que nos encantaría recibir contribuciones de la comunidad. ¡Agradecemos a @reaper por sus contribuciones al codemod hasta ahora!

👉 Lee la documentación de migración