react-http-fetch
Version:
An http library for React JS built on top of native JS fetch
131 lines (130 loc) • 6.77 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useHttpRequest = void 0;
var react_1 = require("react");
var action_creators_1 = require("./action-creators");
var state_reducer_1 = require("./state-reducer");
var react_fast_compare_1 = __importDefault(require("react-fast-compare"));
var client_1 = require("../client");
var shared_1 = require("../shared");
var useHttpRequest = function (params) {
/**
* Grabs the "request" function from the http client.
*/
var _a = (0, client_1.useHttpClient)(), httpClientAbortableRequest = _a.abortableRequest, httpClientRequest = _a.request;
// The state of the request.
var _b = (0, react_1.useReducer)(state_reducer_1.httpRequestReducer, (0, state_reducer_1.initialState)(params.initialData)), state = _b[0], dispatch = _b[1];
/**
* A ref telling whether the component is currently mounted or not.
*/
var isMounted = (0, react_1.useRef)(false);
/**
* Safely dispatches an action by first checking the mounting state of the component.
*/
var safelyDispatch = (0, react_1.useCallback)(function (action) {
if (isMounted.current) {
dispatch(action);
}
}, [dispatch]);
/**
* Gets the http params needed to perform the request using the http client related method.
*/
var performHttpRequestParams = (0, shared_1.useCompareMemo)(function () { return ({
baseUrlOverride: params.baseUrlOverride,
parser: params.parser,
relativeUrl: params.relativeUrl,
requestOptions: params.requestOptions,
context: params.context,
}); }, [params], react_fast_compare_1.default);
/**
* Merges the overrided http params into the source one.
*/
var mergeParams = (0, react_1.useCallback)(function (source, override) {
var _a, _b, _c, _d, _e, _f, _g;
var baseUrlOverride = override.baseUrlOverride, parser = override.parser, relativeUrl = override.relativeUrl, requestOptions = override.requestOptions, context = override.context;
return {
baseUrlOverride: baseUrlOverride || source.baseUrlOverride,
parser: parser || source.parser,
relativeUrl: relativeUrl || source.relativeUrl,
context: context || source.context,
requestOptions: {
body: (requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions.body) || ((_a = source.requestOptions) === null || _a === void 0 ? void 0 : _a.body),
credentials: (requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions.credentials) || ((_b = source.requestOptions) === null || _b === void 0 ? void 0 : _b.credentials),
headers: __assign(__assign({}, (((_c = source.requestOptions) === null || _c === void 0 ? void 0 : _c.headers) || {})), ((requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions.headers) || {})),
maxAge: (requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions.maxAge) || ((_d = source.requestOptions) === null || _d === void 0 ? void 0 : _d.maxAge),
method: (requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions.method) || ((_e = source.requestOptions) === null || _e === void 0 ? void 0 : _e.method),
queryParams: (requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions.queryParams) || ((_f = source.requestOptions) === null || _f === void 0 ? void 0 : _f.queryParams),
signal: (requestOptions === null || requestOptions === void 0 ? void 0 : requestOptions.signal) || ((_g = source.requestOptions) === null || _g === void 0 ? void 0 : _g.signal),
},
};
}, []);
/**
* Performs the http request allowing to abort it.
*/
var abortableRequest = (0, shared_1.useCompareCallback)(function (paramsOverride) {
safelyDispatch((0, action_creators_1.requestInit)());
var mergedParams = paramsOverride
? mergeParams(performHttpRequestParams, paramsOverride)
: performHttpRequestParams;
var _a = httpClientAbortableRequest(mergedParams), reqResult = _a[0], abortController = _a[1];
// Listen request to be successfully resolved or reject and
// update the state accordingly.
reqResult
.then(function (response) {
safelyDispatch((0, action_creators_1.requestSuccess)(response));
})
.catch(function (error) {
safelyDispatch((0, action_creators_1.requestError)(error));
});
return { reqResult: reqResult, abortController: abortController };
}, [httpClientAbortableRequest, performHttpRequestParams, safelyDispatch], react_fast_compare_1.default);
/**
* Performs the http request.
*/
var request = (0, shared_1.useCompareCallback)(function (paramsOverride) {
safelyDispatch((0, action_creators_1.requestInit)());
var mergedParams = paramsOverride
? mergeParams(performHttpRequestParams, paramsOverride)
: performHttpRequestParams;
var reqResult = httpClientRequest(mergedParams);
// Listen request to be successfully resolved or reject and
// update the state accordingly.
reqResult
.then(function (response) {
safelyDispatch((0, action_creators_1.requestSuccess)(response));
})
.catch(function (error) {
safelyDispatch((0, action_creators_1.requestError)(error));
});
return reqResult;
}, [httpClientRequest, performHttpRequestParams, safelyDispatch], react_fast_compare_1.default);
/**
* Keeps track of the mounting state of the component.
*/
(0, shared_1.useCompareEffect)(function () {
isMounted.current = true;
var fetchOnBootstrap = params.fetchOnBootstrap;
if (fetchOnBootstrap) {
request();
}
return function () {
isMounted.current = false;
};
}, [params, request], react_fast_compare_1.default);
return [state, abortableRequest, request];
};
exports.useHttpRequest = useHttpRequest;