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 應用程式中提供安全性