React

pnpm add @omni-async/react

import { useQuery } from "@omni-async/react";

function Search() {
  const results = useQuery(
    async (term: string) => {
      const response = await fetch(`/api/search?q=${encodeURIComponent(term)}`);
      if (!response.ok) throw new Error("Search failed");
      return response.json() as Promise<string[]>;
    },
    { initial: () => [] },
  );

  return (
    <>
      <button disabled={results.loading} onClick={() => void results.trigger("async")}>
        Search
      </button>
      {results.error ? <p>Search failed</p> : null}
      <ul>
        {results.data.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}

const users = useFetch(
  async (signal) => {
    const response = await fetch("/api/users", { signal });
    return response.json() as Promise<User[]>;
  },
  { initial: () => [] },
);