TypedFetcher

The hook-level fetcher with a generic data result and a bound Form component.

Compatibility

ReactAvailable in this renderer's browser integration.

React SSRAvailable to this renderer's SSR integration; browser event handlers run after hydration.

PreactAvailable in this renderer's browser integration.

Preact SSRAvailable to this renderer's SSR integration; browser event handlers run after hydration.

Import from @kasperrt/smolter/react @kasperrt/smolter/preact

Signature

interface TypedFetcher<T> extends Omit<FetcherSnapshot, "data"> {
  data?: T;
  Form: ComponentType<FormProps>;
  load: (url?: string) => Promise<Result>;
  submit: (body: Submission, options?: FetcherSubmitOptions) => Promise<Result>;
}

Usage

The hook-level fetcher with a generic data result and a bound Form component. It merges state with load and submit methods. A route-bound fetcher can have a union of loader and action results; narrow before accessing action-only fields.

const fetcher = useFetcher<typeof action>();
const busy = fetcher.state !== "idle";

<fetcher.Form action="/tasks/1" method="patch">
  <button disabled={busy}>Save</button>
</fetcher.Form>

Fields

data

data?: T;

Form

Form: ComponentType<FormProps>;

load

load: (url?: string) => Promise<Result>;

submit

submit: (body: Submission, options?: FetcherSubmitOptions) => Promise<Result>;

View implementation ↗

smolter_