Forms & CRUD Patterns in Hono + Inertia + React

Most business apps are loops of "list → create → edit → delete" CRUD and "submit a form." This article shows how to do that on Hono + Inertia + React with as little code and as few moving parts as possible. The combo:

- Drizzle ORM: TypeScript-first lightweight ORM, close to SQL, type-safe
- Zod: schema definition + type inference + validation, all in one
- Inertia useForm: client-side form state + submit + error display, unified

Make a single source of truth in Zod. Example: a user-create form.

- email: string, email format
- name: string, 1–80 chars
- role: 'admin' | 'editor' | 'viewer'

Write it as z.object({...}) and derive the TypeScript type with z.infer<typeof Schema>. Server validation and client types share one definition. Place schemas under shared/ so server and client can both import them.

Drizzle ORM lets you write SQL-flavored TypeScript. Define tables in schema.ts; generate / apply migrations with drizzle-kit generate / drizzle-kit push.

The drizzle-zod package bridges Drizzle table types to Zod schemas, keeping the DB column definitions, Zod, and TypeScript types in sync automatically. See Drizzle ORM official for details.

Minimum endpoints for a business app, in Hono:

- GET /users: list — select() via Drizzle, return as Inertia props on page Users/Index
- GET /users/new: empty form
- POST /users: parse c.req.parseBody() with Zod → on failure return errors; on success insert() via Drizzle → redirect('/users') + flash
- PATCH /users/:id: edit (Zod → Drizzle → redirect)
- DELETE /users/:id: delete

Inertia handles redirects after POST as in-app navigation. Plain Post-Redirect-Get works out of the box — a real strength of this stack.

Inertia's useForm packages form state, submit-in-flight flag, and server errors:

- data: form values
- setData(key, value): update
- post(url) / put(url) / delete(url): submit
- processing: submit-in-flight flag
- errors: Zod errors from the server (field → message)

In the UI, render errors.email under the email <input> and you're done — server errors flow straight to the screen. You can ship without React Hook Form for most pages.

"Saved" / "Deleted" toasts are clean to implement via Inertia shared props.

1. After each request, server middleware reads flash from the session and pushes it onto shared props
2. The React layout component reads usePage().props.flash and renders a toast

Now redirect + flash('saved') on the server is enough to pop a toast in the top-right of the UI consistently.

- N+1: when listing with relations, eager-load via Drizzle's with or use leftJoin.
- Trust the server Zod: client-side Zod is fine for instant feedback, but the final word is server-side.
- Large forms: include file uploads via useForm's transform and multipart/form-data.
- Optimistic UI: Inertia's partial-reload options like preserveScroll: true / only: ['users'] polish the feel.
- Transactions: wrap multi-table integrity in Drizzle transactions.

Part 4 is the authentication guide — Better Auth / Lucia / DIY sessions and how they integrate with Inertia. Series overview: Part 1.

Q1: Can I use Prisma instead of Drizzle?
A: Yes. On Workers, Drizzle wins on bundle size and cold start. On Node, Prisma is fine.

Q2: Is React Hook Form worth adding?
A: For very large / complex forms, maybe. For most business pages, useForm alone is enough.

Q3: How do I do optimistic updates?
A: Combine Inertia's transform with local React state, or layer in TanStack Query. Don't overdo it.

Q4: File uploads?
A: useForm supports multipart/form-data — setData with the file input value just works.

- Inertia.js — Forms
- Inertia.js — useForm helper
- Drizzle ORM official
- Zod official
- Hono — Validators