ChatJS tRPC patterns
SkillDev toolsImplement ChatJS tRPC routers, TanStack Query hooks, mutations, and cache invalidation. Use when adding or changing tRPC procedures or their React consumers in apps/chat.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the ChatJS tRPC patterns skill
What this skill tells your AI
The instructions your AI receives, as published by franciscomoretti/chat-js in .agents/skills/trpc-patterns/SKILL.md and read by ahel’s review.
Backend
- Add feature routers under
apps/chat/trpc/routers/*.router.tsand register them inapps/chat/trpc/routers/_app.ts. - Use
protectedProcedurefor 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:
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:
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.
Signals
- GitHub stars
- 1k
- Forks
- 122
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
trpc-patterns- Source
- github.com/franciscomoretti/chat-js