跳至主要內容
版本：11.x

設定 React Query 整合

1. 安裝依賴項​

應安裝下列依賴項

npm install @trpc/server@next @trpc/client@next @trpc/react-query@next @tanstack/react-query@latest
;

2. 匯入您的 AppRouter​

將您的 AppRouter 型別匯入前端應用程式。此型別包含您整個 API 的形狀。

ts
import type { AppRouter } from '../server/router';
ts
import type { AppRouter } from '../server/router';
提示

透過使用 import type，你可以確保參考會在編譯時被移除，這表示你不會無意間將伺服器端程式碼匯入到你的用戶端。有關更多資訊，請參閱 Typescript 文件。

3. 建立 tRPC 勾子​

使用 createTRPCReact 從你的 AppRouter 類型簽章建立一組強類型 React 勾子。

utils/trpc.ts
ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server/router';
 
export const trpc = createTRPCReact<AppRouter>();
utils/trpc.ts
ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server/router';
 
export const trpc = createTRPCReact<AppRouter>();

4. 加入 tRPC 提供者​

建立一個 tRPC 用戶端，並將你的應用程式包裝在 tRPC 提供者中，如下所示。你也需要設定並連接 React Query，他們有更深入的說明文件。

提示

如果你已經在應用程式中使用 React Query，你應該重複使用你已經有的 QueryClient 和 QueryClientProvider。

App.tsx
tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import React, { useState } from 'react';
import { trpc } from './utils/trpc';
export function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: 'http://localhost:3000/trpc',
          // You can pass any HTTP headers you wish here
          async headers() {
            return {
              authorization: getAuthCookie(),
            };
          },
        }),
      ],
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}
App.tsx
tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import React, { useState } from 'react';
import { trpc } from './utils/trpc';
export function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: 'http://localhost:3000/trpc',
          // You can pass any HTTP headers you wish here
          async headers() {
            return {
              authorization: getAuthCookie(),
            };
          },
        }),
      ],
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}
注意

在 queryClient 和 TRPCClient 的建立中使用 useState 的原因，與在元件外宣告它們相反，是要確保每個要求在使用 SSR 時能取得唯一的客戶端。如果你使用客戶端側渲染，那麼如果你願意，你可以移動它們。

5. 取用資料​

現在你可以使用 tRPC React Query 整合來呼叫 API 上的查詢和突變。

pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
 
export default function IndexPage() {
  const userQuery = trpc.getUser.useQuery({ id: 'id_bilbo' });
  const userCreator = trpc.createUser.useMutation();
 
  return (
    <div>
      <p>{userQuery.data?.name}</p>
 
      <button onClick={() => userCreator.mutate({ name: 'Frodo' })}>
        Create Frodo
      </button>
    </div>
  );
}
pages/IndexPage.tsx
tsx
import { trpc } from '../utils/trpc';
 
export default function IndexPage() {
  const userQuery = trpc.getUser.useQuery({ id: 'id_bilbo' });
  const userCreator = trpc.createUser.useMutation();
 
  return (
    <div>
      <p>{userQuery.data?.name}</p>
 
      <button onClick={() => userCreator.mutate({ name: 'Frodo' })}>
        Create Frodo
      </button>
    </div>
  );
}