@mantine/hooks/esm/use-fetch/use-fetch.mjs

A collection of 50+ hooks for state and UI management

"use client";
import { useCallback, useEffect, useRef, useState } from "react";
//#region packages/@mantine/hooks/src/use-fetch/use-fetch.ts
function useFetch(url, { autoInvoke = true, ...options } = {}) {
	const [data, setData] = useState(null);
	const [loading, setLoading] = useState(false);
	const [error, setError] = useState(null);
	const controller = useRef(null);
	const refetch = 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 = useCallback(() => {
		if (controller.current) controller.current?.abort("");
	}, []);
	useEffect(() => {
		if (autoInvoke) refetch();
		return () => {
			if (controller.current) controller.current.abort("");
		};
	}, [refetch, autoInvoke]);
	return {
		data,
		loading,
		error,
		refetch,
		abort
	};
}
//#endregion
export { useFetch };

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