Data mutation

This guide provides practical examples of using actions to mutate data in SolidStart.

---

Handling form submission

To handle <form> submissions with an action:

1. Ensure the action has a unique name. See the Action API reference for more information.
2. Pass the action to the <form> element using the action prop.
3. Ensure the <form> element uses the post method for submission.
4. Use the FormData object in the action to extract field data using the navite FormData methods.

---

Passing additional arguments

To pass additional arguments to your action, use the with method:

---

Showing pending UI

To display a pending UI during action execution:

1. Import useSubmission from @solidjs/router.
2. Call useSubmission with your action, and use the returned pending property to display pending UI.

---

Handling errors

To handle errors that occur within an action:

1. Import useSubmission from @solidjs/router.
2. Call useSubmission with your action, and use the returned error property to handle the error.

---

Validating form fields

To validate form fields in an action:

1. Add validation logic in your action and return validation errors if the data is invalid.
2. Import useSubmission from @solidjs/router.
3. Call useSubmission with your action, and use the returned result property to handle the errors.

---

Showing optimistic UI

To update the UI before the server responds:

1. Import useSubmission from @solidjs/router.
2. Call useSubmission with your action, and use the returned pending and input properties to display optimistic UI.

---

Redirecting

To redirect users to a different route within an action:

1. Import redirect from @solidjs/router.
2. Call redirect with the route you want to navigate to, and throw its response.

---

Using a database or an ORM

To safely interact with your database or ORM in an action, ensure it's server-only by adding "use server" as the first line of your action:

---

Invoking an action programmatically

To programmatically invoke an action:

1. Import useAction from @solidjs/router.
2. Call useAction with your action, and use the returned function to invoke the action.