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.
apps/chat/trpc/routers/*.router.ts and register them in apps/chat/trpc/routers/_app.ts.protectedProcedure for authenticated operations.apps/chat/lib/db/queries.ts.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.
4584f09
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.