trpc-patterns
Implement ChatJS tRPC routers, TanStack Query hooks, mutations, and cache invalidation. Use when adding or changing tRPC procedures or their React consumers in apps/chat.
ソース情報
- リポジトリ
- FranciscoMoretti/chat-js
- ソースの最終更新活動
- 2026年9月12日 06:41
- 検出された SKILL.md の言語
- 英語
- スター
- 1,201
- フォーク
- 122
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- trpc-patterns
- description
- Implement ChatJS tRPC routers, TanStack Query hooks, mutations, and cache invalidation. Use when adding or changing tRPC procedures or their React consumers in apps/chat.
# ChatJS tRPC patterns
## Backend
- Add feature routers under `apps/chat/trpc/routers/*.router.ts` and register them in `apps/chat/trpc/routers/_app.ts`.
- Use `protectedProcedure` for authenticated operations.
- Validate inputs with Zod and verify ownership before mutations.
- Keep database access in `apps/chat/lib/db/queries.ts`.
## React queries
Use `useTRPC()` with TanStack Query:
```tsx
const trpc = useTRPC();
const query = useQuery({
...trpc.feature.list.queryOptions(),
enabled: Boolean(condition),
});
```
For mutations, use generated mutation options and invalidate related keys after success:
```tsx
const trpc = useTRPC();
const queryClient = useQueryClient();
const mutation = useMutation(
trpc.feature.update.mutationOptions({
onSuccess: () =>
queryClient.invalidateQueries({
queryKey: trpc.feature.list.queryKey(),
}),
})
);
```
Handle loading and error states in the consumer.
GitHubで見る