Présentation de la nouvelle intégration TanStack 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 →

Nous sommes ravis d'annoncer que la nouvelle intégration TanStack React Query pour tRPC est désormais disponible dans la version next de tRPC. Comparée à notre intégration classique de React Query, elle est plus simple et plus fidèle à l'esprit de TanStack Query. Elle utilise directement les interfaces QueryOptions et MutationOptions natives de TanStack React Query, plutôt que d'encapsuler useQuery et useMutation avec notre propre client.

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'
  // [...]
}

Avec ce nouveau client, nous supprimons une couche d'abstraction souvent source de confusion pour les nouveaux utilisateurs. Nous proposons plutôt une manière plus directe de travailler avec TanStack React Query, qui semblera immédiatement familière à ceux qui suivent la documentation officielle de TanStack. Cela signifie également que nous avons besoin de moins de documentation tRPC pour l'expliquer, bien que nous ayons bien sûr une documentation pour démarrer.

Pourquoi ce changement ?

Vous pouvez consulter notre RFC originale concernant ce changement ici pour plus de détails. Voici nos principales raisons :

• Simplicité : Le nouveau client est plus simple et plus proche de TanStack Query, fournissant des factories pour les interfaces courantes comme QueryKeys, QueryOptions et MutationOptions. Cela réduit la courbe d'apprentissage car vous pouvez suivre la documentation officielle de TanStack Query

• Familiarité : Le nouveau client sera plus naturel pour ceux qui utilisent déjà TanStack Query. Utiliser TanStack Query pour d'autres parties de votre application ne vous forcera pas à adopter une syntaxe alternative pour tRPC

• React : Notre intégration classique de React Query enfreint en réalité les règles des hooks ; elle ne peut pas être lintée correctement et encourage certains motifs qui casseront sous le React Compiler, comme passer des hooks en tant que props. À cet égard, le nouveau client est plus idiomatique pour React

• Maintenabilité : Un défi rencontré avec notre versioning était de maintenir tRPC synchronisé avec les changements de TanStack Query, notamment les nouvelles fonctionnalités ajoutées périodiquement à QueryClient. En utilisant la petite surface d'interface native, nous supportons React Query plus facilement tout en suivant les bonnes pratiques recommandées par les mainteneurs de TanStack

• Retours utilisateurs : Comme mentionné, le client classique est souvent source de difficultés pour les nouveaux utilisateurs. Mais les retours sur la RFC pour ce nouveau client ont été extrêmement positifs, avec une majorité d'utilisateurs enthousiastes à l'idée de l'utiliser. Bien sûr, tout le monde n'est pas encore convaincu, donc nous maintiendrons le client classique

Qu'advient-il de l'intégration classique tRPC React Query ?

Elle ne disparaîtra pas de sitôt ! Nous nous engageons à la maintenir longtemps, mais elle ne recevra pas de nouvelles fonctionnalités majeures et sera considérée comme stable.

Nous recommandons toujours aux nouveaux projets de démarrer avec la nouvelle intégration TanStack React Query, et aux projets existants d'envisager une migration progressive.

Comment migrer ?

Bien que le client classique soit maintenu pour longtemps, nous recommandons aux nouveaux projets de démarrer avec le nouveau client et aux projets actifs d'envisager une migration progressive.

Les deux clients sont compatibles entre eux et peuvent coexister dans la même application, vous permettant de migrer à votre rythme. Nous travaillons également sur un codemod pour lequel nous adorerions des contributions communautaires. Nous remercions @reaper pour ses contributions actuelles au codemod !

👉 Lire la documentation de migration