|
| 1 | +import { FetchError, FetchResponse, RequestConfig } from './FetchClientTypes'; |
| 2 | +import { createFormattedError } from './FetchInterceptor'; |
| 3 | + |
| 4 | +/** |
| 5 | + * Build URL with query parameters |
| 6 | + * @param baseURL Base URL |
| 7 | + * @param url Endpoint URL |
| 8 | + * @param params Query parameters |
| 9 | + * @returns Complete URL with query parameters |
| 10 | + */ |
| 11 | +const buildURL = (baseURL: string, url: string, params?: Record<string, any>): string => { |
| 12 | + const fullURL = url.startsWith('http') ? url : `${baseURL}${url}`; |
| 13 | + |
| 14 | + if (!params) return fullURL; |
| 15 | + |
| 16 | + const urlObj = new URL(fullURL); |
| 17 | + Object.entries(params).forEach(([key, value]) => { |
| 18 | + if (value !== undefined && value !== null) { |
| 19 | + urlObj.searchParams.append(key, String(value)); |
| 20 | + } |
| 21 | + }); |
| 22 | + |
| 23 | + return urlObj.toString(); |
| 24 | +}; |
| 25 | + |
| 26 | +/** |
| 27 | + * Parse response data based on content type |
| 28 | + * @param response Fetch response |
| 29 | + * @returns Parsed data |
| 30 | + */ |
| 31 | +const parseResponseData = async (response: Response): Promise<any> => { |
| 32 | + const contentType = response.headers.get('content-type'); |
| 33 | + |
| 34 | + if (contentType?.includes('application/json')) { |
| 35 | + return await response.json(); |
| 36 | + } else if (contentType?.includes('text/')) { |
| 37 | + return await response.text(); |
| 38 | + } else { |
| 39 | + return await response.blob(); |
| 40 | + } |
| 41 | +}; |
| 42 | + |
| 43 | +/** |
| 44 | + * Reusable fetch client class |
| 45 | + * |
| 46 | + * @author Pavan Kumar Jadda |
| 47 | + * @since 0.2.19 |
| 48 | + */ |
| 49 | +class FetchInstance { |
| 50 | + private readonly baseURL: string; |
| 51 | + private requestInterceptors: Array<(config: RequestConfig) => RequestConfig | Promise<RequestConfig>> = []; |
| 52 | + private responseInterceptors: Array<(response: FetchResponse) => FetchResponse | Promise<FetchResponse>> = []; |
| 53 | + private errorInterceptors: Array<(error: FetchError) => FetchError | Promise<FetchError> | void | Promise<void>> = []; |
| 54 | + /** |
| 55 | + * Add request interceptor |
| 56 | + */ |
| 57 | + interceptors = { |
| 58 | + request: { |
| 59 | + use: (interceptor: (config: RequestConfig) => RequestConfig | Promise<RequestConfig>) => { |
| 60 | + this.requestInterceptors.push(interceptor); |
| 61 | + }, |
| 62 | + }, |
| 63 | + response: { |
| 64 | + use: ( |
| 65 | + successInterceptor?: (response: FetchResponse) => FetchResponse | Promise<FetchResponse>, |
| 66 | + errorInterceptor?: (error: FetchError) => FetchError | Promise<FetchError> | void | Promise<void> |
| 67 | + ) => { |
| 68 | + if (successInterceptor) { |
| 69 | + this.responseInterceptors.push(successInterceptor); |
| 70 | + } |
| 71 | + if (errorInterceptor) { |
| 72 | + this.errorInterceptors.push(errorInterceptor); |
| 73 | + } |
| 74 | + }, |
| 75 | + }, |
| 76 | + }; |
| 77 | + |
| 78 | + constructor(baseURL: string = import.meta.env.VITE_REACT_APP_BASE_URL) { |
| 79 | + this.baseURL = baseURL; |
| 80 | + } |
| 81 | + |
| 82 | + /** |
| 83 | + * GET request |
| 84 | + */ |
| 85 | + async get<T = any>(url: string, config?: Omit<RequestConfig, 'method' | 'url'>): Promise<FetchResponse<T>> { |
| 86 | + return this.executeRequest({ ...config, method: 'GET', url }); |
| 87 | + } |
| 88 | + |
| 89 | + /** |
| 90 | + * POST request |
| 91 | + */ |
| 92 | + async post<T = any>(url: string, data?: any, config?: Omit<RequestConfig, 'method' | 'url' | 'body'>): Promise<FetchResponse<T>> { |
| 93 | + const body = data ? JSON.stringify(data) : undefined; |
| 94 | + return this.executeRequest({ ...config, method: 'POST', url, body }); |
| 95 | + } |
| 96 | + |
| 97 | + /** |
| 98 | + * PUT request |
| 99 | + */ |
| 100 | + async put<T = any>(url: string, data?: any, config?: Omit<RequestConfig, 'method' | 'url' | 'body'>): Promise<FetchResponse<T>> { |
| 101 | + const body = data ? JSON.stringify(data) : undefined; |
| 102 | + return this.executeRequest({ ...config, method: 'PUT', url, body }); |
| 103 | + } |
| 104 | + |
| 105 | + /** |
| 106 | + * DELETE request |
| 107 | + */ |
| 108 | + async delete<T = any>(url: string, config?: Omit<RequestConfig, 'method' | 'url'>): Promise<FetchResponse<T>> { |
| 109 | + return this.executeRequest({ ...config, method: 'DELETE', url }); |
| 110 | + } |
| 111 | + |
| 112 | + /** |
| 113 | + * PATCH request |
| 114 | + */ |
| 115 | + async patch<T = any>(url: string, data?: any, config?: Omit<RequestConfig, 'method' | 'url' | 'body'>): Promise<FetchResponse<T>> { |
| 116 | + const body = data ? JSON.stringify(data) : undefined; |
| 117 | + return this.executeRequest<T>({ ...config, method: 'PATCH', url, body }); |
| 118 | + } |
| 119 | + |
| 120 | + /** |
| 121 | + * Generic request method |
| 122 | + */ |
| 123 | + async request<T = any>(config: RequestConfig): Promise<FetchResponse<T>> { |
| 124 | + return this.executeRequest(config); |
| 125 | + } |
| 126 | + |
| 127 | + /** |
| 128 | + * Execute request with interceptors |
| 129 | + */ |
| 130 | + private async executeRequest<T>(config: RequestConfig): Promise<FetchResponse<T>> { |
| 131 | + // Apply request interceptors |
| 132 | + let processedConfig = config; |
| 133 | + for (const interceptor of this.requestInterceptors) { |
| 134 | + processedConfig = await interceptor(processedConfig); |
| 135 | + } |
| 136 | + |
| 137 | + const { url, params, ...fetchConfig } = processedConfig; |
| 138 | + const fullURL = buildURL(this.baseURL, url || '', params); |
| 139 | + |
| 140 | + try { |
| 141 | + const response = await fetch(fullURL, fetchConfig); |
| 142 | + const data = await parseResponseData(response); |
| 143 | + |
| 144 | + const fetchResponse: FetchResponse<T> = { |
| 145 | + data: data as T, |
| 146 | + status: response.status, |
| 147 | + statusText: response.statusText, |
| 148 | + headers: response.headers, |
| 149 | + config: processedConfig, |
| 150 | + }; |
| 151 | + |
| 152 | + // Apply response interceptors |
| 153 | + let processedResponse = fetchResponse; |
| 154 | + for (const interceptor of this.responseInterceptors) { |
| 155 | + processedResponse = await interceptor(processedResponse); |
| 156 | + } |
| 157 | + |
| 158 | + return processedResponse; |
| 159 | + } catch (error) { |
| 160 | + const fetchError = createFormattedError(error as Error, 0, 'Network error. Please check your connection and try again.'); |
| 161 | + |
| 162 | + // Apply error interceptors |
| 163 | + let processedError = fetchError; |
| 164 | + for (const interceptor of this.errorInterceptors) { |
| 165 | + const result = await interceptor(processedError); |
| 166 | + if (result !== undefined) { |
| 167 | + processedError = result; |
| 168 | + } |
| 169 | + } |
| 170 | + |
| 171 | + throw processedError; |
| 172 | + } |
| 173 | + } |
| 174 | +} |
| 175 | + |
| 176 | +/** |
| 177 | + * Create fetch client instance |
| 178 | + */ |
| 179 | +const fetchInstance = new FetchInstance(); |
| 180 | + |
| 181 | +/** |
| 182 | + * Callable fetch client that defaults to GET requests |
| 183 | + */ |
| 184 | +export const FetchClient = Object.assign( |
| 185 | + async <T = any>(url: string, config?: Omit<RequestConfig, 'method' | 'url'>): Promise<FetchResponse<T>> => { |
| 186 | + return fetchInstance.get(url, config); |
| 187 | + }, |
| 188 | + fetchInstance |
| 189 | +); |
| 190 | + |
| 191 | +// Export the client instance for direct use |
| 192 | +export default FetchClient; |
0 commit comments