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

- Skill: `franciscomoretti/trpc-patterns` (Agent Skill)
- Install (CLI): `npx skillmds@latest add franciscomoretti/trpc-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/franciscomoretti/trpc-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: franciscomoretti (https://skillmd.com/u/franciscomoretti)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/franciscomoretti/trpc-patterns

---


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