@ventlio/tanstack-query 0.5.11 → 0.5.13

package/dist/src/queries/useGetInfiniteRequest.js

@@ -16,7 +16,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();
@@ -31,17 +31,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);
             }

package/dist/src/queries/useGetInfiniteRequest.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGetInfiniteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"useGetInfiniteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/queries/useGetRequest.js

@@ -8,21 +8,29 @@ import { useHeaderStore } from '../stores/useHeaderStore.js';
 import { usePauseFutureRequests } from '../stores/usePauseFutureRequests.js';
 import { useStore } from '../../node_modules/@tanstack/react-store/dist/esm/index.js';
 import 'axios';
-import { makeRequest } from '../request/make-request.js';
+import { executeMiddlewareChain, makeRequest } from '../request/make-request.js';
 import '../request/request.enum.js';
 
-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);
@@ -32,15 +40,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) {
@@ -70,34 +86,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));
     };
@@ -139,6 +193,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;
+        },
     };
 };
 

package/dist/src/queries/useGetRequest.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/queries/usePatchRequest.js

@@ -19,7 +19,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 = {
@@ -31,19 +31,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') {

package/dist/src/queries/usePatchRequest.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePatchRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"usePatchRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/queries/usePostRequest.js

@@ -16,7 +16,7 @@ import { HttpMethod } from '../request/request.enum.js';
 
 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();
@@ -41,18 +41,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') {

package/dist/src/queries/usePostRequest.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePostRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"usePostRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/request/make-request.js

@@ -3,23 +3,92 @@ import { axiosInstance } from './axios-instance.js';
 import { HttpMethod, ContentType } from './request.enum.js';
 import { errorTransformer, successTransformer } from './transformer.js';
 
-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
@@ -85,5 +154,5 @@ function getAppFiles(body, fileSelectors = []) {
     return files;
 }
 
-export { makeRequest };
+export { executeMiddlewareChain, makeRequest };
 //# sourceMappingURL=make-request.js.map

package/dist/src/request/make-request.js.map

@@ -1 +1 @@
-{"version":3,"file":"make-request.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"make-request.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/index.d.ts

@@ -1,5 +1,22 @@
 import type { AxiosProgressEvent, RawAxiosRequestHeaders } from 'axios';
 import type { AppFileConfig, HttpMethod, IMakeRequest, IRequestError, IRequestSuccess } from '../request';
+import type { IPagination } from '../queries';
+export type MiddlewareFunction<T = any> = (context: MiddlewareContext<T>, next: MiddlewareNext<T>) => Promise<IRequestError | IRequestSuccess<T>>;
+export interface MiddlewareContext<T = any> {
+    baseUrl: string;
+    path: string;
+    body?: Record<string, any>;
+    method?: HttpMethod;
+    headers?: RawAxiosRequestHeaders;
+    options?: Partial<NextOptions>;
+    response?: IRequestError | IRequestSuccess<T>;
+}
+export type MiddlewareNext<T = any> = (options?: Partial<NextOptions>) => Promise<IRequestError | IRequestSuccess<T>>;
+export type LegacyMiddlewareFunction<T = any> = (next: (options?: Partial<NextOptions>) => Promise<IRequestSuccess<T> | IRequestError>, configs?: {
+    baseUrl: string;
+    path: string;
+    body?: Record<string, any>;
+}) => Promise<IRequestError | IRequestSuccess<T>>;
 export interface BootstrapConfig {
     environments?: {
         appBaseUrl: string;
@@ -7,11 +24,13 @@ export interface BootstrapConfig {
     };
     context?: ContextType;
     modelConfig?: BootstrapModelConfig;
-    middleware?: <T = any>(next: (options?: Partial<NextOptions>) => Promise<IRequestSuccess<T> | IRequestError>, configs?: {
-        baseUrl: string;
-        path: string;
-        body?: Record<string, any>;
-    }) => Promise<IRequestError | IRequestSuccess<T>>;
+    middleware?: MiddlewareFunction[] | LegacyMiddlewareFunction;
+    pagination?: PaginationConfig;
+}
+export interface PaginationConfig {
+    extractPagination?: <T>(response: IRequestSuccess<T>) => IPagination | undefined;
+    buildPaginationUrl?: (url: string, page: number) => string;
+    pageParamName?: string;
 }
 export interface NextOptions extends Partial<IMakeRequest> {
     baseURL: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ventlio/tanstack-query",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "license": "MIT",
   "main": "dist/index.js",
   "contributors": [
@@ -91,6 +91,6 @@
     "lodash.result": "^4.5.2",
     "lodash.set": "^4.3.2",
     "url-search-params-polyfill": "^8.2.5",
-    "zustand": "^4.4.6"
+    "zustand": "^5.0.4"
   }
 }

package/src/config/bootstrapQueryRequest.ts

@@ -1,11 +1,56 @@
 import type { QueryClient } from '@tanstack/react-query';
 import 'url-search-params-polyfill';
-import type { BootstrapConfig } from '../types';
+import type { BootstrapConfig, LegacyMiddlewareFunction, MiddlewareFunction } from '../types';
 import { bootStore } from './bootStore';
+import type { IPagination } from '../queries';
 
-export const bootstrapQueryRequest = async (queryClient: QueryClient, options: BootstrapConfig): Promise<void> => {
-  // set default query config
+/**
+ * Bootstrap the query request system with configuration options
+ *
+ * @param queryClient - TanStack Query client instance
+ * @param options - Configuration options
+ */
+export const bootstrapQueryRequest = async (queryClient: QueryClient, options: BootstrapConfig = {}): Promise<void> => {
+  // Resume any paused mutations
   await queryClient.resumePausedMutations();
 
+  // Set default pagination configuration if not provided
+  if (!options.pagination) {
+    options.pagination = {
+      pageParamName: 'page',
+      buildPaginationUrl: (url: string, page: number) => {
+        const [pathname, queryString] = url.split('?');
+        const queryParams = new URLSearchParams(queryString);
+        queryParams.set('page', String(page));
+        return pathname + '?' + queryParams.toString();
+      },
+      extractPagination: (response: any) => {
+        // Default pagination extraction from response
+        if (response.data && 'pagination' in response.data) {
+          return response.data.pagination as IPagination;
+        }
+        return undefined;
+      },
+    };
+  }
+
+  // Convert legacy middleware to new format if needed
+  if (options.middleware && !Array.isArray(options.middleware)) {
+    const legacyMiddleware = options.middleware as LegacyMiddlewareFunction;
+
+    // Create a new middleware function that adapts the legacy format
+    const adaptedMiddleware: MiddlewareFunction = 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);
 };

package/src/config/useEnvironmentVariables.ts

@@ -1,15 +1,53 @@
+import { useStore } from '@tanstack/react-store';
 import { useBaseUrlStore } from '../stores/useBaseUrlStore';
+import { bootStore } from './bootStore';
 import type { IConfig } from './config.interface';
 import { useReactNativeEnv } from './useReactNativeEnv';
 
+/**
+ * Hook to access environment variables across different frameworks
+ * Supports React (CRA), Next.js, Vite, and React Native
+ */
 export const useEnvironmentVariables = (): IConfig => {
   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 as string,
-    TIMEOUT: Number(timeout),
+    TIMEOUT: Number(timeout) || 30000, // Default timeout of 30 seconds
   };
 };