arcx
Version:
A lightweight, dependency-free fetch utility for APIs and React.
42 lines (41 loc) • 1.24 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useFetchSuspense = useFetchSuspense;
const fetchRequest_1 = require("./fetchRequest");
/**
* A minimal Suspense-compatible hook that throws a promise until data is loaded,
* or throws an error if there's a failure.
*
* @template T - The expected shape of the fetched data.
* @param url - The resource URL.
* @param options - Additional fetch options.
* @returns The fetched data of type T.
*
* @example
* function MyComponent() {
* const data = useFetchSuspense<MyData>("/api/data");
* return <div>{JSON.stringify(data)}</div>;
* }
*
* // Then wrap <MyComponent /> in a <Suspense fallback={...} /> boundary
*/
function useFetchSuspense(url, options) {
let result;
let error;
const promise = (0, fetchRequest_1.fetchRequest)(url, options).then((res) => {
result = res;
}, (err) => {
error = err;
});
// If there's an error, throw immediately
if (error) {
throw error;
}
// If result is not yet set, throw the promise to trigger Suspense fallback
if (result === undefined) {
throw promise;
}
// Otherwise, we have data
return result;
}