create-fetch-hooks
Version:
A simple and powerful custom React hook (useApi) that simplifies API requests with automatic loading and error states. Ideal for clean and maintainable data fetching in React components.
145 lines (144 loc) • 8.96 kB
JavaScript
import { useGet } from "./useGet";
import { usePost } from "./usePost";
import { usePut } from "./usePut";
import { useDelete } from "./useDelete";
import { get } from "./get";
import { post } from "./post";
import { put } from "./put";
import { del } from "./del";
import { FetchCacheProvider } from "./FetchCacheProvider";
export function createFetchHooks(baseApiUrl, baseOptions) {
return {
FetchCacheProvider,
useGet: (url, options) => {
var _a;
const dynamicHeaders = (_a = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.setHeaders) === null || _a === void 0 ? void 0 : _a.call(baseOptions);
const headers = {
...dynamicHeaders,
Authorization: `Bearer ${localStorage.getItem((baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey) || "")}`,
};
return useGet(baseApiUrl, url, {
...options,
headers,
onResponseGot(url, endpoint, responseCode) {
var _a;
(_a = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.onResponse) === null || _a === void 0 ? void 0 : _a.call(baseOptions, url, endpoint, responseCode);
},
accessTokenLocalStorageKey: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey,
callRefreshToken: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.callRefreshToken,
});
},
usePost: (url, options) => {
var _a;
const dynamicHeaders = (_a = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.setHeaders) === null || _a === void 0 ? void 0 : _a.call(baseOptions);
const headers = {
...dynamicHeaders,
Authorization: `Bearer ${localStorage.getItem((baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey) || "")}`,
};
return usePost(baseApiUrl, url, {
...options,
headers,
onResponseGot(url, endpoint, responseCode) {
var _a;
(_a = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.onResponse) === null || _a === void 0 ? void 0 : _a.call(baseOptions, url, endpoint, responseCode);
},
accessTokenLocalStorageKey: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey,
callRefreshToken: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.callRefreshToken,
});
},
usePut: (url, options) => {
var _a;
const dynamicHeaders = (_a = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.setHeaders) === null || _a === void 0 ? void 0 : _a.call(baseOptions);
const headers = {
...dynamicHeaders,
Authorization: `Bearer ${localStorage.getItem((baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey) || "")}`,
};
return usePut(baseApiUrl, url, {
...options,
headers,
onResponseGot(url, endpoint, responseCode) {
var _a;
(_a = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.onResponse) === null || _a === void 0 ? void 0 : _a.call(baseOptions, url, endpoint, responseCode);
},
accessTokenLocalStorageKey: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey,
callRefreshToken: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.callRefreshToken,
});
},
useDelete: (url, options) => {
var _a;
const dynamicHeaders = (_a = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.setHeaders) === null || _a === void 0 ? void 0 : _a.call(baseOptions);
const headers = {
...dynamicHeaders,
Authorization: `Bearer ${localStorage.getItem((baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey) || "")}`,
};
return useDelete(baseApiUrl, url, {
...options,
headers,
onResponseGot(url, endpoint, responseCode) {
var _a;
(_a = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.onResponse) === null || _a === void 0 ? void 0 : _a.call(baseOptions, url, endpoint, responseCode);
},
accessTokenLocalStorageKey: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey,
callRefreshToken: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.callRefreshToken,
});
},
httpClient: {
get: (url, options) => {
var _a;
const dynamicHeaders = (_a = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.setHeaders) === null || _a === void 0 ? void 0 : _a.call(baseOptions);
const headers = {
...dynamicHeaders,
Authorization: `Bearer ${localStorage.getItem((baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey) || "")}`,
};
return get(baseApiUrl, url, {
...options,
headers,
accessTokenLocalStorageKey: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey,
callRefreshToken: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.callRefreshToken,
});
},
post: (url, postData, options) => {
var _a;
const dynamicHeaders = (_a = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.setHeaders) === null || _a === void 0 ? void 0 : _a.call(baseOptions);
const headers = {
...dynamicHeaders,
Authorization: `Bearer ${localStorage.getItem((baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey) || "")}`,
};
return post(baseApiUrl, url, postData, {
...options,
headers,
accessTokenLocalStorageKey: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey,
callRefreshToken: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.callRefreshToken,
});
},
put: (url, dataToPut, options) => {
var _a;
const dynamicHeaders = (_a = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.setHeaders) === null || _a === void 0 ? void 0 : _a.call(baseOptions);
const headers = {
...dynamicHeaders,
Authorization: `Bearer ${localStorage.getItem((baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey) || "")}`,
};
return put(baseApiUrl, url, dataToPut, {
...options,
headers,
accessTokenLocalStorageKey: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey,
callRefreshToken: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.callRefreshToken,
});
},
del: (url, options) => {
var _a;
const dynamicHeaders = (_a = baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.setHeaders) === null || _a === void 0 ? void 0 : _a.call(baseOptions);
const headers = {
...dynamicHeaders,
Authorization: `Bearer ${localStorage.getItem((baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey) || "")}`,
};
return del(baseApiUrl, url, {
...options,
headers,
accessTokenLocalStorageKey: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.accessTokenLocalStorageKey,
callRefreshToken: baseOptions === null || baseOptions === void 0 ? void 0 : baseOptions.callRefreshToken,
});
},
},
};
}