从经典 React Client 迁移

有几种方法可以迁移，这个库与经典客户端有很大不同，所以我们不指望任何人一次性完成。但你可能想要尝试以下组合...

¥There are a few approaches to migrate over, and this library is a significant departure from the classic client, so we're not expecting anybody to do it in one shot. But you will probably want to try a combination of...

Codemod 迁移

¥Codemod migration

信息

codemod 正在进行中，我们正在寻求帮助以使其变得更好。如果你有兴趣为 codemod 做出贡献，请参阅 Julius 的评论在这里。

¥The codemod is a work in progress and we're looking for help to make it better. If you're interested in contributing to the codemod, please see Julius' comment here.

我们正在开发一个 codemod 来帮助你将现有代码库迁移到新客户端。这已经可以尝试了，但我们需要你的反馈和贡献来改进它。Codemods 很难正确使用，因此我们希望你能帮助它尽可能有效。

¥We're working on a codemod to help you migrate your existing codebase over to the new client. This is already available to try but we need your feedback and contributions to improve it. Codemods are very tricky to get right so we're looking for your help to make it as effective as possible.

运行我们的升级 CLI：

¥Run our upgrade CLI:

sh
npx @trpc/upgrade

sh
npx @trpc/upgrade

出现提示时，选择转换 Migrate Hooks to xxxOptions API 和 Migrate context provider setup。

¥When prompted, select the transforms Migrate Hooks to xxxOptions API and Migrate context provider setup.

逐步迁移

¥Gradual migration

新客户端和经典客户端彼此兼容，并与 可以共存于同一个应用中 兼容。这意味着你可以通过在应用的新部分中使用新客户端开始迁移，并根据需要逐步迁移现有用法。最重要的是，查询键是相同的，这意味着你可以同时使用新客户端和经典客户端，并且仍然依赖 TanStack Query 的缓存。

¥The new and classic clients are compatible with each other and can live together in the same application. This means you can start migrating by using the new client in new parts of your application, and gradually migrate over existing usage as you see fit. Most importantly, Query Keys are identical, which means you can use the new client and classic client together and still rely on TanStack Query's caching.

迁移查询

¥Migrating Queries

经典的查询看起来像这样

¥A classic query would look like this

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

以及对

¥and changes to

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

迁移失效和其他 QueryClient 用法

¥Migrating Invalidations and other QueryClient usages

经典的查询看起来像这样

¥A classic query would look like this

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

以及对

¥and changes to

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

这对于任何 QueryClient 用法都是一样的，现在你可以直接遵循 TanStack 文档，而不是使用 tRPC 的 useUtils

¥This is the same for any QueryClient usage, instead of using tRPC's useUtils you can now follow the TanStack documentation directly

迁移修改

¥Migrating Mutations

经典的修改可能看起来像这样

¥A classic mutation might look like this

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

以及对

¥and changes to

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