Open-code aq-ui React hook for Use Async.
aq-uipnpm dlx aq-ui@alpha add use-asyncImport the parts you need, then jump to an export for its contract.
"use client"
import { useAsync } from "@/hooks/use-async"
export function ProfileButton() {
const profile = useAsync(
async (signal: AbortSignal, id: string) => {
const response = await fetch(`/api/profiles/${id}`, { signal })
if (!response.ok) throw new Error("Could not load profile")
return response.json() as Promise<{ name: string }>
}
)
return (
<button
type="button"
disabled={profile.status === "pending"}
onClick={() => void profile.execute("42")}
>
{profile.status === "pending" ? "Loading…" : "Load profile"}
</button>
)
}Type contract for AsyncControls.
interface AsyncControls<T, TArgs extends unknown[]> extends AsyncState<T>| Name | Type |
|---|---|
execute | (...args: TArgs) => Promise<T | undefined> |
cancel | () => void |
reset | () => void |
status | AsyncStatus |
data | T | undefined |
error | unknown |
Type contract for AsyncState.
interface AsyncState<T>| Name | Type |
|---|---|
status | AsyncStatus |
data | T | undefined |
error | unknown |
Type contract for AsyncStatus.
type AsyncStatus = "idle" | "pending" | "success" | "error"Open-code aq-ui React hook for Use Async.
function useAsync<T, TArgs extends unknown[] = []>(task: (signal: AbortSignal, ...args: TArgs) => Promise<T>, { initialData, immediate = false, initialArgs, }: UseAsyncOptions<T, TArgs> = {}): AsyncControls<T, TArgs>AsyncControls<T, TArgs>| Name | Type | Default |
|---|---|---|
task | (signal: AbortSignal, ...args: TArgs) => Promise<T> | — |
options? | UseAsyncOptions<T, TArgs> | {} |
Type contract for UseAsyncOptions.
interface UseAsyncOptions<T, TArgs extends unknown[]>| Name | Type | Default |
|---|---|---|
initialData? | T | — |
immediate? | boolean | false |
initialArgs? | TArgs | — |
use-latest