Fetcher Action

Fetchers allow you to submit data without navigation. They're perfect for UI interactions like counters, toggles, or inline editing that shouldn't change the URL.

Click a button to update

Example Code

import type { RouteActionArgs } from "@udibo/juniper";

export async function action({ request }: RouteActionArgs) {
  const formData = await request.formData();
  const intent = formData.get("intent");
  // Process intent...
  return { count: newCount };
}

// In component:
const fetcher = useFetcher();

<fetcher.Form method="post">
  <input type="hidden" name="intent" value="increment" />
  <button type="submit">+</button>
</fetcher.Form>

// Access response data
const count = fetcher.data?.count ?? 0;

Tip: Unlike Form, fetchers don't cause navigation or add entries to the browser history. The URL stays the same while data is updated.