@rocketmakers/api-swr
Version:
Rocketmakers front-end library for parsing a generated Typescript API client into a set of configurable React hooks for fetching and mutating data.
72 lines (71 loc) • 3.58 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.useClientFetch = void 0;
const tslib_1 = require("tslib");
/*
* React hook for fetching data on the client
* --------------------------------------
* Allows for centralized processing on all API calls
*/
const React = tslib_1.__importStar(require("react"));
const useContentMemo_1 = require("./useContentMemo");
/**
* Root hook for fetching data on the client.
* - Used by both `useQuery` and `useMutation`
* - Renders the global API Processing hook.
* @param endpointId The `controller.endpoint` formatted endpoint ID
* @param mode The hook mode (either `query` or `mutation`)
* @param fetchConfigArg The fetch config to be sent as the second arg to the fetch method
* @param fetcher The fetch method for performing the request
* @param paramsArg The fetch params to be sent as the first arg to the fetch method
* @param useApProcessing The global API Processing hook if defined.
* @param globalFetchWrapperHook An optional hook which returns a wrapper around the fetcher method.
* @param localFetchWrapper An optional hook specific fetch wrapper function to use instead of the global hook.
* @returns a client side fetch function and some other useful state (including the response from the processing hook)
*/
const useClientFetch = (endpointId, mode, fetchConfig, fetcher, paramsArg, useApProcessing, globalFetchWrapperHook, localFetchWrapper) => {
const [data, setData] = React.useState();
const [error, setError] = React.useState();
const [isLoading, setIsLoading] = React.useState(false);
const [stateParams, setStateParams] = React.useState();
const params = (0, useContentMemo_1.useContentMemo)(paramsArg);
const fetchWrapper = globalFetchWrapperHook === null || globalFetchWrapperHook === void 0 ? void 0 : globalFetchWrapperHook();
/** Used to fetch data on the client, calls the root fetcher with the params and config passed into the hook */
const clientFetch = React.useCallback((execParams) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
try {
setError(undefined);
setIsLoading(true);
const finalParams = Object.assign(Object.assign({}, (params !== null && params !== void 0 ? params : {})), (execParams !== null && execParams !== void 0 ? execParams : {}));
setStateParams(finalParams);
let response;
const wrapper = (localFetchWrapper !== null && localFetchWrapper !== void 0 ? localFetchWrapper : fetchWrapper);
if (wrapper) {
response = yield wrapper({ rootFetcher: fetcher, params: finalParams, mode, config: fetchConfig, endpointId });
}
else {
response = yield fetcher(finalParams, fetchConfig);
}
setData(response);
return response;
}
catch (caughtError) {
setError(caughtError);
return undefined;
}
finally {
setIsLoading(false);
}
}), [params, localFetchWrapper, fetchWrapper, fetcher, mode, fetchConfig, endpointId]);
/** Render the processing hook if it exists */
const processingResponse = useApProcessing === null || useApProcessing === void 0 ? void 0 : useApProcessing({
data: data,
mode,
isLoading,
endpointId,
params: stateParams,
error,
});
return { processingResponse, clientFetch, data, error, isLoading };
};
exports.useClientFetch = useClientFetch;