UseFetch

1'use client';
2 
3import {
4  createContext,
5  useCallback,
6  useContext,
7  useEffect,
8  useRef,
9  useState,
10  type PropsWithChildren,
11  type ReactNode,
12} from 'react';
13 
14// #region Types & Interfaces
15export interface FetchConfig extends Omit<RequestInit, 'body' | 'signal'> {
16  baseURL?: string;
17  timeout?: number;
18  retries?: number;
19  retryDelay?: number;
20}
21 
22export interface FetchOptions<TBody = BodyInit | null>
23  extends Omit<RequestInit, 'body'> {
24  body?: TBody;
25  timeout?: number;
26  retries?: number;
27  retryDelay?: number;
28  parse?: (response: Response) => Promise<any>;
29}
30 
31export interface FetchResult<T> {
32  data: T | null;
33  error: Error | null;
34  loading: boolean;
35  refetch: () => Promise<T | null>;
36  abort: () => void;
37  aborted: boolean;
38}
39 
40interface FetchContextValue {
41  config: FetchConfig;
42  updateConfig: (newConfig: Partial<FetchConfig>) => void;
43  fetch: (url: string, options?: FetchOptions) => Promise<Response>;
44}
45 
46export interface FetchProviderProps {
47  config?: FetchConfig;
48  children: ReactNode;
49}
50 
51// #endregion
52 
53const FetchContext = createContext<FetchContextValue | null>(null);
54 
55export function FetchProvider({ config = {}, children }: FetchProviderProps) {
56  const [currentConfig, setCurrentConfig] = useState<FetchConfig>(config);
57 
58  const updateConfig = useCallback((newConfig: Partial<FetchConfig>) => {
59    setCurrentConfig((prev) => ({ ...prev, ...newConfig }));
60  }, []);
61 
62  const enhancedFetch = useCallback(
63    async (url: string, options: FetchOptions = {}) => {
64      const {
65        timeout = currentConfig.timeout,
66        retries = currentConfig.retries ?? 0,
67        retryDelay = currentConfig.retryDelay ?? 1000,
68        ...fetchOptions
69      } = options;
70 
71      // Construct full URL
72      const fullUrl =
73        currentConfig.baseURL && !url.startsWith('http')
74          ? `${currentConfig.baseURL.replace(/\/$/, '')}/${url.replace(/^\//, '')}`
75          : url;
76 
77      // Merge headers
78      const headers = new Headers(currentConfig.headers);
79      if (fetchOptions.headers) {
80        const optionHeaders = new Headers(fetchOptions.headers);
81        optionHeaders.forEach((value, key) => headers.set(key, value));
82      }
83 
84      // Create fetch options
85      const finalOptions: RequestInit = {
86        ...currentConfig,
87        ...fetchOptions,
88        headers,
89      };
90 
91      // Use provided signal or create new one
92      const shouldCreateController = !fetchOptions.signal;
93// … truncated