Queries、Mutations、Subscriptions

publicProcedure に .input(zodSchema).query(async ({ input, ctx }) => ...) を連結します。ハンドラーは検証済みの入力とリクエストコンテキストを受け取ります。オブジェクト、配列、プリミティブなど、シリアライズ可能な任意の値を返せます。

戻り値の型は自動的に推論され、クライアント上の対応する useQuery hook のデータ型になります。

trpc.post.getById.useQuery({ id: '1' }) は、post ルーター内の getById プロシージャを呼び出します。この hook は、React Query でおなじみの結果オブジェクト { data, isLoading, isError, refetch } を返します。

入力オブジェクトには静的な型が付いています。スキーマが文字列を期待している場合に { id: 123 } を渡すと、開発時に TypeScript エラーとして検出されます。

サーバー側でデータを書き込む操作（データの作成、更新、削除）には、.input(zodSchema).mutation(async ({ input, ctx }) => ...) を使用します。ミューテーションは明示的に呼び出すものであり、マウント時に自動実行されることはありません。

ミューテーションハンドラーは、ctx を介して完全なリクエストコンテキスト（NextAuth のセッションを含む）にアクセスできます。

const { mutate, isLoading, error } = trpc.post.create.useMutation() を実行します。ミューテーションを実行するには mutate({ title: 'New', content: '...' }) を呼び出します。React Query の useMutation と同様に、マウント時には実行されません。

ミューテーション後の副作用を処理するには、useMutation のオプションに onSuccess と onError のコールバックを渡します。

ミューテーションの成功後にクエリデータを更新するには、tRPC のユーティリティ hook を使用します: const utils = trpc.useUtils()。onSuccess 内で utils.post.getAll.invalidate() を呼び出すと、投稿一覧の再フェッチが実行されます。

これは React Query の queryClient.invalidateQueries() に相当する tRPC の方法で、同じ stale-and-refetch パターンに従います。

tRPC はデフォルトで入力検証に Zod を使用します。Zod スキーマは実行時にサーバー上で実行され、形式が正しくない入力をハンドラーに到達する前に拒否します。同じスキーマからクライアント用の TypeScript 型も提供されます。

この二重の役割（実行時検証と TypeScript 型）によって重複がなくなります。Zod で契約を一度定義するだけで、両方の安全性が得られます。

tRPC はデフォルトで httpBatchLink を使用し、同時に発生した複数の tRPC リクエストを 1 つの HTTP リクエストにまとめます。同じコンポーネントのレンダーサイクルで複数の useQuery 呼び出しを行うと、それらはまとめて送信され、まとめて解決されます。

これにより、ページ内で複数のデータが必要な場合でも、クエリごとに個別の HTTP リクエストを送る場合と比べて、ネットワークのオーバーヘッドを大幅に削減できます。

サブスクリプションプロシージャを定義します: publicProcedure.subscription(async function*() { while (true) { yield await nextEvent(); } })。サブスクリプションは非同期ジェネレーターを使用し、WebSocket トランスポートが必要です。

サブスクリプションは、ライブ通知、共同編集のカーソル、AI レスポンスのストリーミングなど、リアルタイム機能に適しています。

httpBatchLink を、splitLink を使った httpBatchLink と wsLink の組み合わせに置き換えます。サブスクリプションは wsLink に、クエリとミューテーションは httpBatchLink に振り分けます。createWSClient({ url: 'ws://localhost:3000' }) で WebSocket クライアントを作成します。

このハイブリッドトランスポートにより、ほとんどのリクエストでは効率的な HTTP のバッチ処理を使用し、サブスクリプションでは永続的な WebSocket 接続を使用できます。

trpc.notifications.onNew.useSubscription(undefined, { onData: (notification) => addToList(notification), onError: console.error }) でプロシージャを購読します。onData コールバックは、値が yield されるたびに呼び出されます。

WebSocket が切断されて再接続すると、サブスクリプションは自動的に再確立されます。

リアルタイムの一覧ページでは、クエリで初期一覧を読み込み、ミューテーションで項目を追加し、サブスクリプションで他のユーザーによる追加をリアルタイムに受け取る構成が考えられます。3 つすべてが同じ AppRouter に対して型付けされ、自然に組み合わせられます。

キャッシュ無効化の戦略は、完全な再フェッチ（ミューテーション後に invalidate）とキャッシュ更新（utils.post.getAll.setData）のどちらを選ぶかによって異なります。

ミューテーションの成功後にクエリの再フェッチを実行する tRPC のユーティリティメソッドはどれでしょうか。

.query() でクエリを、.mutation() でミューテーションを定義し、どちらも Zod スキーマで検証します。クライアントでは trpc.router.procedure.useQuery() と useMutation() を使用します。ミューテーション後は utils.procedure.invalidate() でクエリを無効化します。サブスクリプションは非同期ジェネレーターを使用し、WebSocket トランスポートには wsLink が必要です。

httpBatchLink はデフォルトで同時実行されたクエリを 1 つの HTTP リクエストにまとめます。