AI SummaryComplete guide to handling data mutations in SolidStart using actions, forms, validation, and error handling. Actions handle form submissions. Forms must use : Use to pass additional arguments to actions:
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "solidstart-data-mutation" skill in my project. Please run this command in my terminal: # Install skill into your project (2 files) mkdir -p .claude/skills/solidstart-data-mutation && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/solidstart-data-mutation/SKILL.md "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/data/solidstart-data-mutation/SKILL.md" && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/solidstart-data-mutation/metadata.json "https://raw.githubusercontent.com/majiayu000/claude-skill-registry/main/skills/data/solidstart-data-mutation/metadata.json" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
SolidStart data mutation: form submissions with actions, validation, error handling, pending states, optimistic UI, redirects, database operations, programmatic triggers.
SolidStart Data Mutation
Complete guide to handling data mutations in SolidStart using actions, forms, validation, and error handling.
Basic Form Submission
Actions handle form submissions. Forms must use method="post": `tsx import { action } from "@solidjs/router"; const addPost = action(async (formData: FormData) => { const title = formData.get("title") as string; await fetch("https://my-api.com/posts", { method: "POST", body: JSON.stringify({ title }), }); }, "addPost"); export default function Page() { return ( <form action={addPost} method="post"> <input name="title" /> <button>Add Post</button> </form> ); } ` Requirements: • Action must have unique name (second parameter) • Form must use method="post" • Action receives FormData as first parameter • Use FormData.get() to extract field values
Passing Additional Arguments
Use .with() to pass additional arguments to actions: `tsx const addPost = action(async (userId: number, formData: FormData) => { const title = formData.get("title") as string; await fetch("https://my-api.com/posts", { method: "POST", body: JSON.stringify({ userId, title }), }); }, "addPost"); export default function Page() { const userId = 1; return ( <form action={addPost.with(userId)} method="post"> <input name="title" /> <button>Add Post</button> </form> ); } `
Showing Pending UI
Use useSubmission to track submission state and show pending UI: `tsx import { action, useSubmission } from "@solidjs/router"; const addPost = action(async (formData: FormData) => { const title = formData.get("title") as string; await fetch("https://my-api.com/posts", { method: "POST", body: JSON.stringify({ title }), }); }, "addPost"); export default function Page() { const submission = useSubmission(addPost); return ( <form action={addPost} method="post"> <input name="title" /> <button disabled={submission.pending}> {submission.pending ? "Adding..." : "Add Post"} </button> </form> ); } ` Submission properties: • pending - Boolean indicating if action is running • result - Successful return value • error - Error thrown • input - Reactive input data • clear() - Clear submission state • retry() - Re-execute with same input
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster