React Query 集成

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

tRPC 为 React 提供了一流集成方案。其底层实现是对流行库 @tanstack/react-query 的封装，因此我们建议您先熟悉 React Query 的使用，因为其文档对功能细节有更深入的讲解。

技巧

如果您正在使用 Next.js，我们推荐改用我们针对 Next.js 的集成方案

tRPC 的 React Query 集成

该库支持直接在 React 组件中使用

pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
export default function IndexPage() {
  const helloQuery = trpc.hello.useQuery({ name: 'Bob' });
  const goodbyeMutation = trpc.goodbye.useMutation();
  return (
    <div>
      <p>{helloQuery.data?.greeting}</p>
      <button onClick={() => goodbyeMutation.mutate()}>Say Goodbye</button>
    </div>
  );
}

pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
export default function IndexPage() {
  const helloQuery = trpc.hello.useQuery({ name: 'Bob' });
  const goodbyeMutation = trpc.goodbye.useMutation();
  return (
    <div>
      <p>{helloQuery.data?.greeting}</p>
      <button onClick={() => goodbyeMutation.mutate()}>Say Goodbye</button>
    </div>
  );
}

与原生 React Query 的区别

该封装层为您抽象了 React Query 的以下功能：

• Query Keys - 由 tRPC 根据您提供的输入参数自动生成和管理

  • 如需获取 tRPC 计算出的查询键，可使用 getQueryKey 方法

• 默认类型安全 - 您在 tRPC 后端定义的类型将直接驱动 React Query 客户端的类型，确保整个 React 应用的类型安全