React Query 集成

tRPC 提供了与 React 的一流集成。在幕后，这只是一个围绕非常流行的 @tanstack/react-query 的包装器，因此我们建议您熟悉 React Query，因为他们的文档更深入地介绍了它的使用。

提示

如果您使用的是 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>
  );
}

与 Vanilla React Query 的区别

包装器为您抽象了 React Query 的某些方面

• 查询键 - 这些由 tRPC 代表您生成和管理，基于您提供的过程输入
  • 如果您需要 tRPC 计算的查询键，可以使用 getQueryKey
• 默认情况下类型安全 - 您在 tRPC 后端提供的类型也驱动 React Query 客户端的类型，在整个 React 应用程序中提供安全性