ChatJS tRPC patterns

SkillDev tools

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.

Available today. Use it from your connected AI after setup.

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.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:

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