Migración desde el cliente React clásico

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 →

Existen varios enfoques para migrar, y esta biblioteca representa un cambio significativo respecto al cliente clásico, por lo que no esperamos que nadie lo haga de una sola vez. Probablemente querrás probar una combinación de...

Migración mediante codemod

información

El codemod es un trabajo en progreso y estamos buscando ayuda para mejorarlo. Si estás interesado en contribuir al codemod, consulta el comentario de Julius aquí.

Estamos desarrollando un codemod para ayudarte a migrar tu base de código existente al nuevo cliente. Ya está disponible para probar, pero necesitamos tus comentarios y contribuciones para mejorarlo. Los codemods son muy complejos de implementar correctamente, por lo que buscamos tu ayuda para hacerlo lo más efectivo posible.

Ejecuta nuestra CLI de actualización:

sh
npx @trpc/upgrade

sh
npx @trpc/upgrade

Cuando se te solicite, selecciona las transformaciones Migrate Hooks to xxxOptions API y Migrate context provider setup.

Migración gradual

Los clientes nuevo y clásico son compatibles entre sí y pueden coexistir en la misma aplicación. Esto significa que puedes comenzar a migrar usando el nuevo cliente en partes nuevas de tu aplicación y migrar gradualmente el uso existente según consideres. Lo más importante es que las Query Keys son idénticas, lo que permite usar ambos clientes conjuntamente manteniendo la caché de TanStack Query.

Migración de consultas (Queries)

Una invalidación clásica se vería así

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'
}

y cambia a

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'
}

Migración de invalidaciones y otros usos de QueryClient

Una invalidación clásica se vería así

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' });
  }
}

y cambia a

tsx
import { useQuery, 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 { useQuery, 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' }),
    );
  }
}

Esto aplica para cualquier uso de QueryClient: en lugar de utilizar useUtils de tRPC, ahora puedes seguir directamente la documentación de TanStack.

Migración de mutaciones

Una mutación clásica podría verse así

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' });
}

y cambia a

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' });
}