useFetcher
A hook for interacting with the server outside of navigation.
import { useFetcher } from "@remix-run/react";
export function SomeComponent() {
const fetcher = useFetcher();
// ...
}
fetcher.Form
Just like <Form>
except it doesn't cause a navigation.
function SomeComponent() {
const fetcher = useFetcher();
return (
<fetcher.Form method="post" action="/some/route">
<input type="text" />
</fetcher.Form>
);
}
fetcher.submit(formData, options)
Submits form data to a route. While multiple nested routes can match a URL, only the leaf route will be called.
The formData
can be multiple types:
FormData
- A FormData
instance.HTMLFormElement
- A <form>
DOM element.Object
- An object of key/value pairs that will be converted to a FormData
instance.If the method is GET, then the route loader is being called and with the formData serialized to the url as URLSearchParams. If POST, PUT, PATCH, or DELETE, then the route action is being called with FormData as the body.
fetcher.submit(event.currentTarget.form, {
method: "POST",
});
fetcher.submit(
{ serialized: "values" },
{ method: "POST" }
);
fetcher.submit(formData);
fetcher.load(href)
Loads data from a route loader. While multiple nested routes can match a URL, only the leaf route will be called.
fetcher.load("/some/route");
fetcher.load("/some/route?foo=bar");
fetcher.state
You can know the state of the fetcher with fetcher.state
. It will be one of:
fetcher.data
The returned response data from your loader or action is stored here. Once the data is set, it persists on the fetcher even through reloads and resubmissions (like calling fetcher.load()
again after having already read the data).
fetcher.formData
The FormData
instance that was submitted to the server is stored here. This is useful for optimistic UIs.
fetcher.formAction
The URL of the submission.
fetcher.formMethod
The form method of the submission.
Discussions
Videos