@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.
50 lines (49 loc) • 3.89 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.useQuery = void 0;
const tslib_1 = require("tslib");
/*
* React hook for querying data on the client
* --------------------------------------
* Wraps the SWR hook, see here: https://swr.vercel.app
*/
const React = tslib_1.__importStar(require("react"));
const swr_1 = tslib_1.__importDefault(require("swr"));
const caching_1 = require("../utils/caching");
const useClientFetch_1 = require("./useClientFetch");
const useContentMemo_1 = require("./useContentMemo");
/**
* A wrapper around the `useSwr` hook that includes a custom `fetch` function, `cacheKey` generator and SWR config.
* @template TFunc - A function that returns a Promise with some data from the API.
* @template TConfig - A configuration object to be passed to the fetch function.
* @param {string} endpointId - The `controller.endpoint` ID
* @param {TFunc} fetcher - The function to use for fetching data.
* @param {IUseQueryConfig<TFunc, TConfig>} hookConfig - An object containing the `cacheKey`, `params`, `config` and `swrConfig` options.
* @param {APIProcessingHook} useProcessing - An optional API processing hook to render.
* @param {GlobalFetchWrapperHook<TConfig>} useGlobalFetchWrapper - An optional fetch wrapper hook to render.
* @param {SWRConfiguration<unknown | undefined>} globalSwrConfig - Global level SWR config.
* @returns {SWRResponse<unknown>} - The response from the `useSwr` hook.
*/
const useQuery = (endpointId, fetcher, hookConfig, useProcessing, useGlobalFetchWrapper, globalSwrConfig) => {
/** Used to fetch data on the client, calls the root fetcher with the params and config passed into the hook */
const { clientFetch, error, processingResponse } = (0, useClientFetch_1.useClientFetch)(endpointId, 'query', hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.fetchConfig, fetcher, hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.params, useProcessing, useGlobalFetchWrapper, hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.fetchWrapper);
/** Content memo on the swr config to avoid dependency changes in SWR */
const swrConfig = (0, useContentMemo_1.useContentMemo)(hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.swrConfig);
/** Content memo on the global swr config to avoid dependency changes in SWR */
const globalSwrConfigMemo = (0, useContentMemo_1.useContentMemo)(globalSwrConfig);
/** Reads the cacheKey value from the cacheKey definition sent to the hook */
const cacheKeyValue = React.useMemo(() => {
if ((hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.waitFor) === false) {
return undefined;
}
return (0, caching_1.readCacheKey)(endpointId, hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.cacheKey, hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.params);
}, [hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.cacheKey, hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.params, hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.waitFor, endpointId]);
/** Protect the root fetcher from causing dependency changes in SWR */
const rootFetch = React.useCallback(() => clientFetch(), [clientFetch]);
/** Protect the combined SWR config from causing dependency changes in SWR */
const combinedSwrConfig = React.useMemo(() => (Object.assign(Object.assign({}, globalSwrConfigMemo), swrConfig)), [globalSwrConfigMemo, swrConfig]);
/** Returns the native useSwr hook from the SWR library, see here: https://swr.vercel.app */
return Object.assign(Object.assign({}, (0, swr_1.default)(cacheKeyValue, rootFetch, combinedSwrConfig)), { error, processingResponse });
};
exports.useQuery = useQuery;