@ventlio/tanstack-query 0.5.12 → 0.5.13

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import 'url-search-params-polyfill';
-import { create } from 'zustand';
 import require$$0, { useState, useEffect, useMemo, startTransition } from 'react';
+import { create } from 'zustand';
 import { useQueryClient, useQuery, useInfiniteQuery, useMutation } from '@tanstack/react-query';
 import result from 'lodash.result';
 import lodashSet from 'lodash.set';
@@ -700,9 +700,49 @@ const bootStore = new Store({
     modelConfig: undefined,
 });
 
+/**
+ * Bootstrap the query request system with configuration options
+ *
+ * @param queryClient - TanStack Query client instance
+ * @param options - Configuration options
+ */
 const bootstrapQueryRequest = async (queryClient, options = {}) => {
-    // set default query config
+    // Resume any paused mutations
     await queryClient.resumePausedMutations();
+    // Set default pagination configuration if not provided
+    if (!options.pagination) {
+        options.pagination = {
+            pageParamName: 'page',
+            buildPaginationUrl: (url, page) => {
+                const [pathname, queryString] = url.split('?');
+                const queryParams = new URLSearchParams(queryString);
+                queryParams.set('page', String(page));
+                return pathname + '?' + queryParams.toString();
+            },
+            extractPagination: (response) => {
+                // Default pagination extraction from response
+                if (response.data && 'pagination' in response.data) {
+                    return response.data.pagination;
+                }
+                return undefined;
+            },
+        };
+    }
+    // Convert legacy middleware to new format if needed
+    if (options.middleware && !Array.isArray(options.middleware)) {
+        const legacyMiddleware = options.middleware;
+        // Create a new middleware function that adapts the legacy format
+        const adaptedMiddleware = async (context, next) => {
+            return await legacyMiddleware((opts) => next(opts), {
+                baseUrl: context.baseUrl,
+                path: context.path,
+                body: context.body,
+            });
+        };
+        // Replace with array containing the adapted middleware
+        options.middleware = [adaptedMiddleware];
+    }
+    // Store the configuration
     bootStore.setState(() => options);
 };
 
@@ -719,14 +759,43 @@ const useReactNativeEnv = () => {
     return { appUrl, appTimeout, isApp };
 };
 
+/**
+ * Hook to access environment variables across different frameworks
+ * Supports React (CRA), Next.js, Vite, and React Native
+ */
 const useEnvironmentVariables = () => {
     const { appTimeout, appUrl } = useReactNativeEnv();
     const { baseUrl } = useBaseUrlStore();
-    const url = baseUrl ?? process.env.REACT_APP_API_URL ?? process.env.NEXT_PUBLIC_API_URL ?? appUrl;
-    const timeout = baseUrl ?? process.env.REACT_APP_API_TIMEOUT ?? process.env.NEXT_PUBLIC_API_TIMEOUT ?? appTimeout;
+    const { environments } = useStore(bootStore);
+    // Framework environment variables detection
+    // Order of precedence:
+    // 1. Runtime baseUrl (set via useBaseUrlStore)
+    // 2. Bootstrap config environments
+    // 3. Framework-specific environment variables
+    // 4. React Native app URL
+    // Get global object to check for various environment variables
+    const globalObj = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : {};
+    // Check for Vite environment variables (without using import.meta directly)
+    // @ts-ignore - Access potential Vite environment variables
+    const viteEnv = globalObj.__VITE_ENV__ || {};
+    const viteApiUrl = viteEnv.VITE_API_URL;
+    const viteApiTimeout = viteEnv.VITE_API_TIMEOUT;
+    // Get URL with fallbacks
+    const url = baseUrl ??
+        environments?.appBaseUrl ??
+        process.env.REACT_APP_API_URL ??
+        process.env.NEXT_PUBLIC_API_URL ??
+        viteApiUrl ??
+        appUrl;
+    // Get timeout with fallbacks
+    const timeout = environments?.appTimeout ??
+        process.env.REACT_APP_API_TIMEOUT ??
+        process.env.NEXT_PUBLIC_API_TIMEOUT ??
+        viteApiTimeout ??
+        appTimeout;
     return {
         API_URL: url,
-        TIMEOUT: Number(timeout),
+        TIMEOUT: Number(timeout) || 30000, // Default timeout of 30 seconds
     };
 };
 
@@ -1017,23 +1086,92 @@ const successTransformer = (data) => {
     };
 };
 
-async function makeRequest({ body = {}, method = HttpMethod.GET, path, isFormData, headers = {}, baseURL, timeout, appFileConfig, onUploadProgress, }) {
+/**
+ * Execute a chain of middleware functions
+ */
+async function executeMiddlewareChain(middlewares, context, finalHandler) {
+    // Create a chain of middleware functions
+    const chain = middlewares.reduceRight((next, middleware) => {
+        return (options) => {
+            // Update context with new options if provided
+            const updatedContext = options ? { ...context, options: { ...context.options, ...options } } : context;
+            return middleware(updatedContext, next);
+        };
+    }, finalHandler);
+    // Execute the middleware chain
+    return await chain(undefined);
+}
+/**
+ * Make an HTTP request with middleware support
+ *
+ * @param requestOptions - Request options
+ * @param middlewares - Optional array of middleware functions
+ */
+async function makeRequest(requestOptions, middlewares) {
+    const { body = {}, method = HttpMethod.GET, path, isFormData, headers = {}, baseURL, timeout, appFileConfig, onUploadProgress, } = requestOptions;
     // check if file is included in mobile app environment and extract all file input to avoid
     // it being formatted to object using axios formData builder
     const isApp = appFileConfig?.isApp;
     const appFiles = isApp ? getAppFiles(body, appFileConfig.fileSelectors) : {};
     // configure body
-    body = (isFormData ? axios.toFormData(body) : body);
-    // configure request header1
-    configureRequestHeader(isFormData, headers, isApp, appFiles, body);
+    const processedBody = (isFormData ? axios.toFormData(body) : body);
+    // configure request header
+    configureRequestHeader(isFormData, headers, isApp, appFiles, processedBody);
+    // Create the final handler that makes the actual request
+    const finalHandler = async (options) => {
+        const finalRequestOptions = options
+            ? {
+                ...requestOptions,
+                body: processedBody,
+                ...options,
+            }
+            : {
+                ...requestOptions,
+                body: processedBody,
+            };
+        return await performRequest(finalRequestOptions);
+    };
+    // If middleware is available, execute the middleware chain
+    if (middlewares && middlewares.length > 0) {
+        const context = {
+            baseUrl: baseURL,
+            path,
+            body: body,
+            method,
+            headers,
+            options: {
+                baseURL,
+                timeout,
+                path,
+                body: processedBody,
+                method,
+                isFormData,
+                headers,
+                appFileConfig,
+                onUploadProgress,
+            },
+        };
+        return await executeMiddlewareChain(middlewares, context, finalHandler);
+    }
+    // Otherwise, just make the request directly
+    return await finalHandler(undefined);
+}
+/**
+ * Perform the actual HTTP request
+ */
+async function performRequest({ body, method, path, isFormData, headers, baseURL, timeout, appFileConfig, onUploadProgress, }) {
     try {
         const axiosRequest = axiosInstance({ baseURL, headers, timeout });
+        const isApp = appFileConfig?.isApp;
         const axiosRequestConfig = {
             url: path,
             method,
             onUploadProgress,
         };
-        if (Object.keys(body).length > 0 || (isFormData && !isApp && [...body.keys()].length > 0)) {
+        // Check if body exists and is not null
+        if (body &&
+            ((typeof body === 'object' && Object.keys(body).length > 0) ||
+                (isFormData && !isApp && body instanceof FormData && Array.from(body.keys()).length > 0))) {
             axiosRequestConfig.data = body;
         }
         //   send request
@@ -1103,7 +1241,8 @@ const useDeleteRequest = (deleteOptions) => {
     const { baseUrl, headers } = deleteOptions ?? {};
     const [requestPath, setRequestPath] = useState('');
     const [options, setOptions] = useState();
-    const { middleware } = useStore(bootStore);
+    // const { middleware: middlewares } = useStore(bootStore);
+    // const [middleware] = middlewares as unknown as MiddlewareFunction[];
     const [requestPayload, setRequestPayload] = useState();
     const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
@@ -1118,17 +1257,22 @@ const useDeleteRequest = (deleteOptions) => {
             method: HttpMethod.DELETE,
             timeout: TIMEOUT,
         };
-        let deleteResponse;
-        if (middleware) {
-            // perform global middleware
-            deleteResponse = await middleware(async (middlewareOptions) => await makeRequest(middlewareOptions ? { ...requestOptions, ...middlewareOptions } : requestOptions), {
-                path: requestUrl,
-                baseUrl: baseUrl ?? API_URL,
-            });
-        }
-        else {
-            deleteResponse = await makeRequest(requestOptions);
-        }
+        // let deleteResponse: IRequestError | IRequestSuccess<TResponse>;
+        // if (middleware) {
+        //   // perform global middleware
+        //   deleteResponse = await middleware(
+        //     async (middlewareOptions) =>
+        //       await makeRequest<TResponse>(
+        //         middlewareOptions ? { ...requestOptions, ...middlewareOptions } : requestOptions
+        //       ),
+        //     {
+        //       path: requestUrl,
+        //       baseUrl: baseUrl ?? API_URL,
+        //     }
+        //   );
+        // } else {
+        const deleteResponse = await makeRequest(requestOptions);
+        // }
         if (deleteResponse.status) {
             res(deleteResponse);
         }
@@ -1178,7 +1322,7 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
     const globalHeaders = useHeaderStore((state) => state.headers);
     const [requestPath, setRequestPath] = useState(path);
     const [options, setOptions] = useState(queryOptions);
-    const { middleware } = useStore(bootStore);
+    useStore(bootStore);
     const [requestPayload, setRequestPayload] = useState();
     const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
     let queryClient = useQueryClient();
@@ -1193,17 +1337,22 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
                 baseURL: baseUrl ?? API_URL,
                 timeout: TIMEOUT,
             };
-            let getResponse;
-            if (middleware) {
-                // perform global middleware
-                getResponse = await middleware(async (middlewareOptions) => await makeRequest(middlewareOptions ? { ...requestOptions, ...middlewareOptions } : requestOptions), {
-                    path,
-                    baseUrl: baseUrl ?? API_URL,
-                });
-            }
-            else {
-                getResponse = await makeRequest(requestOptions);
-            }
+            // let getResponse: IRequestError | IRequestSuccess<TResponse>;
+            // if (middleware) {
+            //   // perform global middleware
+            //   getResponse = await middleware(
+            //     async (middlewareOptions) =>
+            //       await makeRequest<TResponse>(
+            //         middlewareOptions ? { ...requestOptions, ...middlewareOptions } : requestOptions
+            //       ),
+            //     {
+            //       path,
+            //       baseUrl: baseUrl ?? API_URL,
+            //     }
+            //   );
+            // } else {
+            const getResponse = await makeRequest(requestOptions);
+            // }
             if (getResponse.status) {
                 res(getResponse);
             }
@@ -1278,18 +1427,26 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
     };
 };
 
-const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
+/**
+ * Hook for making GET requests with pagination support
+ */
+const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, paginationConfig, }) => {
     const [requestPath, setRequestPath] = useState(path);
     const [options, setOptions] = useState(queryOptions);
     const [page, setPage] = useState(1);
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
-    const { middleware } = useStore(bootStore);
+    const { middleware, pagination: globalPaginationConfig } = useStore(bootStore);
     const globalHeaders = useHeaderStore((state) => state.headers);
     const [requestPayload, setRequestPayload] = useState();
     const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
     let queryClient = useQueryClient();
     // eslint-disable-next-line react-hooks/exhaustive-deps
     queryClient = useMemo(() => queryClient, []);
+    // Merge global and local pagination config
+    const pagination = useMemo(() => ({
+        ...globalPaginationConfig,
+        ...paginationConfig,
+    }), [globalPaginationConfig, paginationConfig]);
     const sendRequest = async (res, rej, queryKey) => {
         const [url] = queryKey;
         const requestUrl = (url ?? requestPath);
@@ -1299,15 +1456,23 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
             baseURL: baseUrl ?? API_URL,
             timeout: TIMEOUT,
         };
+        // Create the final handler that makes the actual request
+        const finalHandler = async (options) => {
+            const finalOptions = options ? { ...requestOptions, ...options } : requestOptions;
+            return await makeRequest(finalOptions);
+        };
         let getResponse;
-        if (middleware) {
-            // perform global middleware
-            getResponse = await middleware(async (middlewareOptions) => await makeRequest(middlewareOptions ? { ...requestOptions, ...middlewareOptions } : requestOptions), {
-                path,
+        // If middleware is available, execute the middleware chain
+        if (middleware && Array.isArray(middleware) && middleware.length > 0) {
+            const context = {
                 baseUrl: baseUrl ?? API_URL,
-            });
+                path: requestUrl,
+                options: requestOptions,
+            };
+            getResponse = await executeMiddlewareChain(middleware, context, finalHandler);
         }
         else {
+            // Otherwise, just make the request directly
             getResponse = await makeRequest(requestOptions);
         }
         if (getResponse.status) {
@@ -1337,34 +1502,72 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
             queryClient.setQueryData([keyTracker], [requestPath, {}]);
         }
     }, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
+    /**
+     * Extract pagination data from response using configured extractor
+     */
+    const getPaginationData = (response) => {
+        // Use the configured pagination extractor or fall back to default
+        const extractPagination = pagination.extractPagination ||
+            ((res) => {
+                if ('pagination' in res.data) {
+                    return res.data.pagination;
+                }
+                return undefined;
+            });
+        return extractPagination(response);
+    };
+    /**
+     * Navigate to the next page if available
+     */
     const nextPage = () => {
-        if (query.data.data.pagination) {
-            const pagination = query.data.data.pagination;
-            if (pagination.next_page !== pagination.current_page && pagination.next_page > pagination.current_page) {
-                setRequestPath(constructPaginationLink(requestPath, pagination.next_page));
-            }
+        // The linter thinks query.data is always falsy, but we know it can be defined after a successful query
+        // Let's restructure to avoid the conditional
+        const paginationData = query.data && getPaginationData(query.data);
+        if (!paginationData)
+            return;
+        if (paginationData.next_page !== paginationData.current_page &&
+            paginationData.next_page > paginationData.current_page) {
+            setRequestPath(constructPaginationLink(requestPath, paginationData.next_page));
         }
     };
+    /**
+     * Navigate to the previous page if available
+     */
     const prevPage = () => {
-        if (query.data.data.pagination) {
-            const pagination = query.data.data.pagination;
-            if (pagination.previous_page !== pagination.current_page && pagination.previous_page < pagination.current_page) {
-                setRequestPath(constructPaginationLink(requestPath, pagination.previous_page));
-            }
+        // The linter thinks query.data is always falsy, but we know it can be defined after a successful query
+        // Let's restructure to avoid the conditional
+        const paginationData = query.data && getPaginationData(query.data);
+        if (!paginationData)
+            return;
+        if (paginationData.previous_page !== paginationData.current_page &&
+            paginationData.previous_page < paginationData.current_page) {
+            setRequestPath(constructPaginationLink(requestPath, paginationData.previous_page));
         }
     };
+    /**
+     * Construct a pagination URL using the configured builder
+     */
     const constructPaginationLink = (link, pageNumber) => {
-        const [pathname, queryString] = link.split('?');
-        const queryParams = new URLSearchParams(queryString);
-        const oldPage = Number(queryParams.get('page'));
-        queryParams.set('page', pageNumber);
-        link = pathname + '?' + queryParams.toString();
-        // only update page when pagination number changed
-        if (oldPage !== pageNumber) {
-            setPage(pageNumber);
-        }
-        return link;
+        // Use the configured pagination URL builder or fall back to default
+        const buildPaginationUrl = pagination.buildPaginationUrl ||
+            ((url, page) => {
+                const [pathname, queryString] = url.split('?');
+                const queryParams = new URLSearchParams(queryString || '');
+                const pageParamName = pagination.pageParamName || 'page';
+                const oldPage = Number(queryParams.get(pageParamName));
+                queryParams.set(pageParamName, String(page));
+                const newUrl = pathname + '?' + queryParams.toString();
+                // only update page when pagination number changed
+                if (oldPage !== pageNumber) {
+                    setPage(pageNumber);
+                }
+                return newUrl;
+            });
+        return buildPaginationUrl(link, pageNumber);
     };
+    /**
+     * Navigate to a specific page
+     */
     const gotoPage = (pageNumber) => {
         setRequestPath(constructPaginationLink(requestPath, pageNumber));
     };
@@ -1406,6 +1609,10 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
         gotoPage,
         page,
         queryKey: [requestPath, {}],
+        // Add pagination data accessor - restructured to avoid linter error
+        getPaginationData: function () {
+            return query.data ? getPaginationData(query.data) : undefined;
+        },
     };
 };
 
@@ -1415,7 +1622,7 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
     const globalHeaders = useHeaderStore((state) => state.headers);
     const [requestPayload, setRequestPayload] = useState();
     const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
-    const { middleware, context } = useStore(bootStore);
+    const { context } = useStore(bootStore);
     const sendRequest = async (res, rej, data) => {
         // get request headers
         const requestOptions = {
@@ -1427,19 +1634,24 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
             timeout: TIMEOUT,
             onUploadProgress,
         };
-        let patchResponse;
-        if (middleware) {
-            // perform global middleware
-            const middlewareResponse = await middleware(async (options) => await makeRequest(options ? { ...requestOptions, ...options } : requestOptions), {
-                path,
-                baseUrl: baseUrl ?? API_URL,
-                body: data,
-            });
-            patchResponse = middlewareResponse;
-        }
-        else {
-            patchResponse = await makeRequest(requestOptions);
-        }
+        // let patchResponse: IRequestError | IRequestSuccess<TResponse>;
+        // if (middleware) {
+        //   // perform global middleware
+        //   const middlewareResponse = await middleware(
+        //     async (options) =>
+        //       await makeRequest<TResponse>(
+        //         options ? { ...requestOptions, ...options } : requestOptions
+        //       ),
+        //     {
+        //       path,
+        //       baseUrl: baseUrl ?? API_URL,
+        //       body: data,
+        //     }
+        //   );
+        //   patchResponse = middlewareResponse;
+        // } else {
+        const patchResponse = await makeRequest(requestOptions);
+        // }
         if (patchResponse.status) {
             // scroll to top after success
             if (context !== 'app') {
@@ -1483,7 +1695,7 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
 
 const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelectors, }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
-    const { middleware, context } = useStore(bootStore);
+    const { context } = useStore(bootStore);
     const globalHeaders = useHeaderStore((state) => state.headers);
     const { isApp } = useReactNativeEnv();
     const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
@@ -1508,18 +1720,23 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
             onUploadProgress,
             ...requestConfig,
         };
-        let postResponse;
-        if (middleware) {
-            // perform global middleware
-            postResponse = await middleware(async (options) => await makeRequest(options ? { ...requestOptions, ...options } : requestOptions), {
-                path,
-                baseUrl: baseUrl ?? API_URL,
-                body: data,
-            });
-        }
-        else {
-            postResponse = await makeRequest(requestOptions);
-        }
+        // let postResponse: IRequestError | IRequestSuccess<TResponse>;
+        // if (middleware) {
+        //   // perform global middleware
+        //   postResponse = await middleware(
+        //     async (options) =>
+        //       await makeRequest<TResponse>(
+        //         options ? { ...requestOptions, ...options } : requestOptions
+        //       ),
+        //     {
+        //       path,
+        //       baseUrl: baseUrl ?? API_URL,
+        //       body: data,
+        //     }
+        //   );
+        // } else {
+        const postResponse = await makeRequest(requestOptions);
+        // }
         if (postResponse.status) {
             // scroll to top after success
             if (context !== 'app') {
@@ -1560,5 +1777,5 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
     return { post, uploadProgressPercent, ...mutation, isLoading: mutation.isPending || isFutureMutationsPaused };
 };
 
-export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, getDateInFuture, makeRequest, scrollToTop, successTransformer, useBaseUrlStore, useDeleteRequest, useEnvironmentVariables, useGetInfiniteRequest, useGetRequest, useHeaderStore, useKeyTrackerModel, usePatchRequest, usePauseFutureRequests, usePostRequest, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery, useUploadProgress };
+export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, executeMiddlewareChain, getDateInFuture, makeRequest, scrollToTop, successTransformer, useBaseUrlStore, useDeleteRequest, useEnvironmentVariables, useGetInfiniteRequest, useGetRequest, useHeaderStore, useKeyTrackerModel, usePatchRequest, usePauseFutureRequests, usePostRequest, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery, useUploadProgress };
 //# sourceMappingURL=index.mjs.map