Migration depuis l'ancien client React

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 →

Plusieurs approches de migration sont possibles. Cette nouvelle bibliothèque représente un changement significatif par rapport à l'ancien client, donc nous n'attendons pas que quiconque effectue la transition en une seule fois. Vous aurez probablement intérêt à combiner différentes méthodes...

Migration via codemod

info

Le codemod est en cours de développement et nous recherchons de l'aide pour l'améliorer. Si vous souhaitez contribuer, consultez le commentaire de Julius ici.

Nous développons un codemod pour faciliter la migration de votre codebase existant vers le nouveau client. Il est déjà utilisable mais nous avons besoin de vos retours et contributions pour l'améliorer. Les codemods sont complexes à perfectionner, c'est pourquoi nous comptons sur votre aide pour le rendre aussi efficace que possible.

Exécutez notre CLI de mise à jour :

sh
npx @trpc/upgrade

sh
npx @trpc/upgrade

Lorsque vous y êtes invité, sélectionnez les transformations Migrate Hooks to xxxOptions API et Migrate context provider setup.

Migration progressive

Les nouveaux et anciens clients sont compatibles entre eux et peuvent coexister dans la même application. Vous pouvez donc commencer la migration en utilisant le nouveau client dans les nouvelles parties de votre application, puis migrer progressivement l'existant à votre rythme. Point crucial : les clés de requête (Query Keys) sont identiques, ce qui permet d'utiliser simultanément les deux clients tout en bénéficiant du cache de TanStack Query.

Migration des requêtes

Une requête classique ressemblait à ceci

tsx
import { trpc } from './trpc';
 
function Users() {
  const greetingQuery = trpc.greeting.useQuery({ name: 'Jerry' });
 
  // greetingQuery.data === 'Hello Jerry'
}

tsx
import { trpc } from './trpc';
 
function Users() {
  const greetingQuery = trpc.greeting.useQuery({ name: 'Jerry' });
 
  // greetingQuery.data === 'Hello Jerry'
}

et devient

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

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

Migration des invalidations et autres utilisations de QueryClient

Un modèle classique d'invalidation ressemblait à ceci

tsx
import { trpc } from './trpc';
 
function Users() {
  const utils = trpc.useUtils();
 
  async function invalidateGreeting() {
    await utils.greeting.invalidate({ name: 'Jerry' });
  }
}

tsx
import { trpc } from './trpc';
 
function Users() {
  const utils = trpc.useUtils();
 
  async function invalidateGreeting() {
    await utils.greeting.invalidate({ name: 'Jerry' });
  }
}

et devient

tsx
import { useQueryClient } from '@tanstack/react-query';
import { useTRPC } from './trpc';
 
function Users() {
  const trpc = useTRPC();
  const queryClient = useQueryClient();
 
  async function invalidateGreeting() {
    await queryClient.invalidateQueries(
      trpc.greeting.queryFilter({ name: 'Jerry' }),
    );
  }
}

tsx
import { useQueryClient } from '@tanstack/react-query';
import { useTRPC } from './trpc';
 
function Users() {
  const trpc = useTRPC();
  const queryClient = useQueryClient();
 
  async function invalidateGreeting() {
    await queryClient.invalidateQueries(
      trpc.greeting.queryFilter({ name: 'Jerry' }),
    );
  }
}

Ce principe s'applique à toute utilisation de QueryClient : au lieu d'utiliser useUtils de tRPC, vous pouvez désormais suivre directement la documentation de TanStack.

Migration des mutations

Une mutation classique pouvait ressembler à ceci

tsx
import { trpc } from './trpc';
 
function Users() {
  const createUserMutation = trpc.createUser.useMutation();
 
  createUserMutation.mutate({ name: 'Jerry' });
}

tsx
import { trpc } from './trpc';
 
function Users() {
  const createUserMutation = trpc.createUser.useMutation();
 
  createUserMutation.mutate({ name: 'Jerry' });
}

et devient

tsx
import { useMutation } from '@tanstack/react-query';
import { useTRPC } from './trpc';
 
function Users() {
  const trpc = useTRPC();
 
  const createUserMutation = useMutation(trpc.createUser.mutationOptions());
 
  createUserMutation.mutate({ name: 'Jerry' });
}

tsx
import { useMutation } from '@tanstack/react-query';
import { useTRPC } from './trpc';
 
function Users() {
  const trpc = useTRPC();
 
  const createUserMutation = useMutation(trpc.createUser.mutationOptions());
 
  createUserMutation.mutate({ name: 'Jerry' });
}