結論
表題の通りですが、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 を読みなさいという話ですね 🙏