+
+
Count: {count()}
+ +Count: {count()}
+ +{echoing.result}
; +In this example, the form's submit button is disabled while `submission.pending` is `true`. + +:::tip +To track multiple submissions for a single action, such as in a multi-file uploader interface, the [`useSubmissions` primitive](/solid-router/reference/data-apis/use-submissions) can be used. +::: + +## Handling errors + +An action can fail for various reasons. +A robust application must handle these failures gracefully. +Solid Router provides two mechanisms for an action to signal failure: throwing an `Error` or returning a value. + +Throwing an `Error` is a valid way to signal failure. +Solid Router will catch the thrown error and make it available in the `submission.error` property. +However, this approach has some drawbacks. +The `submission.error` property is typed as `any`, which undermines type safety in the consuming component. +It is also difficult to convey structured error information, such as validation messages for multiple form fields, using a simple `Error` instance. + +For these reasons, the recommended practice is to always `return` a descriptive object from an action to represent its outcome. +The returned object is available in the `submission.result` property, which will be fully typed. +This makes handling different outcomes in the UI simple and safe. + +```tsx +import { Show } from "solid-js"; +import { action, useSubmission } from "@solidjs/router"; + +const verifyTwoFactorAction = action(async (formData: FormData) => { + const code = formData.get("code")?.toString(); + + if (!code || code.length !== 6) { + return { + ok: false, + errors: { code: "Enter the 6-digit code from the authenticator app." }, + }; + } + + // ... Verifies the code with the server and handles potential errors. + + return { ok: true }; +}, "verifyTwoFactor"); + +function TwoFactorForm() { + const submission = useSubmission(verifyTwoFactorAction); + + const errors = () => { + const result = submission.result; + if (result && !result.ok) { + return result.errors; + } + }; + + return ( + + ); +} +``` + +In this example, the `errors` derived signal inspects `submission.result` to check for failures. +If an `errors` object is found, its properties are used to conditionally render error messages next to the relevant form fields. + +:::caution[Always return a value] +It is important that an action consistently returns a value from all of its possible code paths. +Because, if an action returns `undefined` or `null`, Solid Router removes that submission from its internal list upon completion. +This can lead to unexpected behavior. + +For example, consider an action that returns an error object on failure but returns nothing on success. +If the action fails once, `useSubmission` will correctly report the error. +However, if a subsequent submission succeeds, it will be removed from the list, and `useSubmission` will continue to report the previous stale error state. +To prevent this, ensure every code path in an action returns a value, such as `{ ok: true }` to indicate a successful outcome. +::: + +## Automatic data revalidation + +After server data changes, the application's can become stale. +To solve this, Solid Router automatically revalidates all [queries](/solid-router/concepts/queries) used in the same page after a successful action. +This ensures any component using that data is automatically updated with the freshest information. + +For example, if a page displays a list of registered devices and includes a form to register a new one, the list will automatically update after the form is submitted. + +```tsx +import { For } from "solid-js"; +import { query, action, createAsync } from "@solidjs/router"; + +const getDevicesQuery = query(async () => { + // ... Fetches the list of registered devices. +}, "devices"); + +const registerDeviceAction = action(async (formData: FormData) => { + // ... Registers a new device on the server. +}, "registerDevice"); + +function DevicesPage() { + // This query will automatically revalidate after registerDeviceAction completes. + const devices = createAsync(() => getDevicesQuery()); + + return ( +{device.name}
}