@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.
52 lines (51 loc) • 4.22 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", { value: true });
exports.useInfiniteQuery = 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 infinite_1 = tslib_1.__importDefault(require("swr/infinite"));
const caching_1 = require("../utils/caching");
const useClientFetch_1 = require("./useClientFetch");
const useContentMemo_1 = require("./useContentMemo");
/**
* A wrapper around the `useSwrInfinite` 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 {IUseQueryInfiniteConfig<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 {SWRInfiniteConfiguration<unknown | undefined>} globalSwrInfiniteConfig - Global level infinite SWR config.
* @returns {IUseInfiniteQueryResponse<TFunc, TProcessingResponse>} - The response from the `useSwrInfinite` hook augmented with the error and processing response.
*/
const useInfiniteQuery = (endpointId, fetcher, hookConfig, useProcessing, useGlobalFetchWrapper, globalSwrInfiniteConfig) => {
/** 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, undefined, 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)(globalSwrInfiniteConfig);
/** Reads the cacheKey value from the cacheKey definition sent to the hook, appending the params so that they can be read back when fetching */
const cacheKeyValue = React.useCallback((index, prevData) => {
var _a;
const finalParams = (_a = hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.params) === null || _a === void 0 ? void 0 : _a.call(hookConfig, index, prevData);
return [(0, caching_1.readCacheKey)(endpointId, hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.cacheKey, finalParams), finalParams];
}, [hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.cacheKey, hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.params, endpointId]);
/** Protect the root fetcher from causing dependency changes in SWR */
const rootFetch = React.useCallback((key) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
return clientFetch(key[1]);
}), [clientFetch, hookConfig === null || hookConfig === void 0 ? void 0 : hookConfig.params]);
/** 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 useSwrInfinite hook from the SWR library, see here: https://swr.vercel.app */
return Object.assign(Object.assign({}, (0, infinite_1.default)(cacheKeyValue, rootFetch, combinedSwrConfig)), { error,
processingResponse });
};
exports.useInfiniteQuery = useInfiniteQuery;