supabase-mutationslisted
Install: claude install-skill Bobi-Labs/bobi-stack-template
# Supabase Mutations: Write Path
A type-safe, validated data writing pattern for Next.js + Supabase. Mutation functions are registered in `lib/mutations/index.ts` with their invalidation keys from the shared `lib/query-keys.ts` factory. The hook enforces this pairing. Zod validates on the client before submitting. RLS enforces authorization.
## Architecture
```
React Component (form)
↓ React Hook Form + zodResolver ← client-side Zod validation
↓ useClientMutation("createItem") ← hooks/use-client-mutation.ts
↓ looks up registry → fn + invalidates ← lib/mutations/index.ts
↓ fn creates browser Supabase ← lib/supabase/client.ts
↓ Supabase SDK .from().insert/update ← RLS auto-applies
↓ onSuccess: invalidates query keys ← from lib/query-keys.ts
↓ toast / redirect / UI update
```
## Adding a new mutation
Use `/new-mutation` to scaffold all files automatically:
```
/new-mutation create-item name:string status:string
/new-mutation update-item name:string --invalidates items
/new-mutation delete-item
```
### Manual steps (3 steps)
1. Create Zod schema in `lib/schemas/{action}-{table}.ts`
2. Create mutation function in `lib/mutations/{action}-{table}.ts` + register in `lib/mutations/index.ts`
3. Use in component: `useClientMutation("createItem")`
## Patterns
**Create:** Zod parse → insert → return `{ success, data }`
**Update:** Zod parse → build updates object → update by id → return `{ success, data }`
**Delete:** Validat