Skip to content

Form submission

useSubmitForm connects an existing @mongez/react-form form to the app’s configured HTTP client. Install its optional peers and import it from the form subpath:

import { Form } from "@mongez/react-form";
import { useSubmitForm } from "@warlock.js/web/form";
export default function CreateOrder() {
const createOrder = useSubmitForm({
route: "orders.create",
params: { customerId: "42" },
onSuccess: result => console.log(result.data),
});
return <Form onSubmit={createOrder.submit}>{/* controls */}</Form>;
}

It needs @mongez/http:^3.5.0 and @mongez/react-form:^4.0.0. By default it uses the configured http singleton, preserving its base URL, interceptors, authentication, and error handling. Pass client when a different configured Http instance is required.

Pass exactly one of route or path. A named route uses its server-declared method; a direct path defaults to POST and accepts method. Use params for path segments and query for URL parameters. GET and HEAD send form values as query data; other requests send native FormData.

Named API routes are captured in the same generated declaration file as page routes. With .warlock/typings/web-routes.d.ts included in the app TypeScript project, route and params are checked against the registered API route. The browser receives only each API route’s name, path, and method; it never receives handlers, schemas, or server policy. An API route registered with method "all" does not prevent boot, but cannot be submitted by name: choose an explicit path and method instead.

The hook returns submit, data, error, response, isLoading, formErrors, reset, and cancel. Data, error, and response begin as null; loading begins as false and form errors as an empty array. Lifecycle callbacks receive the full HttpResult. beforeSubmit may return false to cancel before a request. Duplicate calls share the pending promise; cancellation and unmount prevent stale state updates. reset() clears results and errors assigned by the hook without clearing form values or cancelling an active request.

Validation field mapping is enabled by default. Matching fields receive server errors, while unknown field names and general errors are collected in formErrors. Disable it with mapFieldErrors: false, or supply a mapper returning field-message pairs.

Named route metadata deliberately contains only name, path, and method. A route registered with all has no safe browser verb; use a direct path with an explicit method.

useSubmitForm posts to an API route and leaves the result to your callbacks. When the form belongs to a page and the outcome should re-render it or redirect (and work without JavaScript), export an action from the page and use <Form>; see Page actions.

The client prefetch cache is cleared on refresh, on locale change and after form submits. clearPrefetchCache() is exported from @warlock.js/web if you need to clear it yourself after a mutation made outside a form.