resource()

Fetch async data with reactive loading, error, and data states.

Signature

function resource<T>(fetcher: () => Promise<T>): Resource<T>

Parameters

Param	Type	Description
fetcher	() => Promise<T>	Async function that returns data

Returns

Property	Type	Description
.data()	T | undefined	Resolved data
.loading()	boolean	True while fetching
.error()	Error | undefined	Rejection error
.refetch()	void	Re-execute the fetcher

Examples

import { resource, div, p, ul, li, when, each } from "@whisq/core";

const users = resource(() =>
  fetch("/api/users").then(r => r.json())
);

div(
  when(() => users.loading(), () => p("Loading...")),
  when(() => !!users.error(), () => p(() => users.error()!.message)),
  when(() => !!users.data(), () =>
    ul(each(() => users.data()!, (u) => li(u.name)))
  ),
)