サイトアイコン

toLog

tRPCのuseInfiniteQueryは、Procedureに対してcursorを引数にしないとhooksとして現れない

  • 更新日:
  • 投稿日:

この記事は最終更新日から半年以上が経過しています。

結論

表題の通りですが、tRPC の クライアント側の useInfiniteQuery は、バックエンド側で Procedure に Query を追加する時に、input に cursor を渡さないと hooks として現れません。

1// 公式より一部抜粋
2// https://trpc.io/docs/client/react/useInfiniteQuery#example-procedure
3import { initTRPC } from "@trpc/server";
4import { Context } from "./[trpc]";
5
6export const t = initTRPC.create();
7
8export const appRouter = t.router({
9  infinitePosts: t.procedure
10    .input(
11      z.object({
12        limit: z.number().min(1).max(100).nullish(),
13        cursor: z.number().nullish(), // <--- cursor を含めないと client 側で hooks が現れない
14      })
15    )
16    .query(async (opts) => {
17      // ...
18    }),
19});
1import { trpc } from "../utils/trpc";
2
3export function MyComponent() {
4  const myQuery = trpc.infinitePosts
5    .useInfiniteQuery // <-- cursorがないと、そもそも出てこない
6    // ...
7    ();
8}

Issue を漁ってもそれらしいものが見つからず、今一度公式を確認したところ、ちゃんとバッチリ書いてあるという顛末です 💦

おわりに

型を最大限に活用する点では最良なのですが、本体コードでも上手く隠蔽されているので、簡単に書けるなぁとノリで書いていたら hooks が行方不明になってハマりました 😅

まぁ、そもそもは、ちゃんと公式 Docs を読みなさいという話ですね 🙏


プロフィール画像

canji

とにかく私的にサービスを作りたい発作を起こしている。お腹はペコペコ。

  • toLog Tools icon
  • dots icon