Migrera från den klassiska React-klienten

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

Det finns flera tillvägagångssätt för migrering, och detta bibliotek skiljer sig avsevärt från den klassiska klienten så vi förväntar oss inte att någon gör migreringen på en gång. Men du kommer förmodligen vilja prova en kombination av...

Migrering med codemod

info

Codemoden är under utveckling och vi söker hjälp med att förbättra den. Om du är intresserad av att bidra till codemoden, se Julius kommentar här.

Vi arbetar på en codemod för att hjälpa dig migrera din befintliga kodbas till den nya klienten. Den är redan tillgänglig att testa men vi behöver din feedback och dina bidrag för att förbättra den. Codemods är mycket knepiga att få rätt så vi söker din hjälp för att göra den så effektiv som möjligt.

Kör vårt uppgraderings-CLI:

sh
npx @trpc/upgrade

sh
npx @trpc/upgrade

När du uppmanas, välj transformationerna Migrate Hooks to xxxOptions API och Migrate context provider setup.

Gradvis migrering

De nya och klassiska klienterna är kompatibla med varandra och kan samexistera i samma applikation. Det innebär att du kan börja migrera genom att använda den nya klienten i nya delar av din applikation, och gradvis migrera befintlig användning när det passar. Viktigast av allt är att Query Keys är identiska, vilket innebär att du kan använda både den nya och klassiska klienten samtidigt och fortfarande förlita dig på TanStack Querys cachning.

Migrera queries

En klassisk query skulle se ut så här

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

och ändras till

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

Migrera invalideringar och andra QueryClient-användningar

En klassisk query skulle se ut så här

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

och ändras till

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

Samma sak gäller för alla QueryClient-användningar - istället för att använda tRPC:s useUtils kan du nu följa TanStack-dokumentationen direkt

Migrera mutationer

En klassisk mutation kan se ut så här

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

och ändras till

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