@rocketmakers/api-swr/dist/esm/hooks/useClientFetch.js

Rocketmakers front-end library for parsing a generated Typescript API client into a set of configurable React hooks for fetching and mutating data.

'use client';
/*
 * React hook for fetching data on the client
 * --------------------------------------
 * Allows for centralized processing on all API calls
 */
import * as React from 'react';
import { useContentMemo } from './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)
 */
export 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 = 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(async (execParams) => {
        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 = await wrapper({ rootFetcher: fetcher, params: finalParams, mode, config: fetchConfig, endpointId });
            }
            else {
                response = await 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 };
};