跳至主要内容
版本：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>
  );
}