メインコンテンツにスキップ
バージョン: 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 Provider でラップします。また、React Query を設定して接続する必要があります。 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>
  );
}