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

与原始 React Query 的区别

此包装器会为你抽象 React Query 的一些方面

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