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.
FranciscoMoretti/chat-js
8dbcc37
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.