@mantine/hooks/cjs/use-fetch/use-fetch.cjs

A collection of 50+ hooks for state and UI management

"use client";
let react = require("react");
//#region packages/@mantine/hooks/src/use-fetch/use-fetch.ts
function useFetch(url, { autoInvoke = true, ...options } = {}) {
	const [data, setData] = (0, react.useState)(null);
	const [loading, setLoading] = (0, react.useState)(false);
	const [error, setError] = (0, react.useState)(null);
	const controller = (0, react.useRef)(null);
	const refetch = (0, react.useCallback)(() => {
		if (controller.current) controller.current.abort();
		controller.current = new AbortController();
		setLoading(true);
		return fetch(url, {
			...options,
			signal: controller.current.signal
		}).then((res) => {
			if (!res.ok) throw new Error(`Request failed with status ${res.status}`);
			return res.json();
		}).then((res) => {
			setData(res);
			setLoading(false);
			return res;
		}).catch((err) => {
			setLoading(false);
			if (err.name !== "AbortError") setError(err);
			return err;
		});
	}, [url, JSON.stringify(options)]);
	const abort = (0, react.useCallback)(() => {
		if (controller.current) controller.current?.abort("");
	}, []);
	(0, react.useEffect)(() => {
		if (autoInvoke) refetch();
		return () => {
			if (controller.current) controller.current.abort("");
		};
	}, [refetch, autoInvoke]);
	return {
		data,
		loading,
		error,
		refetch,
		abort
	};
}
//#endregion
exports.useFetch = useFetch;

//# sourceMappingURL=use-fetch.cjs.map