@ventlio/tanstack-query 0.5.12 → 0.5.14

package/src/config/useEnvironmentVariables.ts

@@ -1,15 +1,53 @@
-import { useBaseUrlStore } from '../stores/useBaseUrlStore';
+import { useStore } from '@tanstack/react-store';
+import { bootStore } from './bootStore';
 import type { IConfig } from './config.interface';
 import { useReactNativeEnv } from './useReactNativeEnv';
+import { useBaseUrlStore } from '../stores/useBaseUrlStore';
 
+/**
+ * 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
   };
 };

package/src/helpers/index.ts

@@ -1,2 +1,3 @@
+export { result } from './result';
 export * from './scrollToTop';
 export * from './timeFuncs';

package/src/helpers/result.ts

@@ -0,0 +1,65 @@
+/**
+ * Gets the value at path of object. If the resolved value is a function,
+ * it's invoked with the this binding of its parent object and its result is returned.
+ * Similar to lodash.result functionality.
+ *
+ * @param object - The object to query
+ * @param path - The path of the property to get (supports dot notation)
+ * @param defaultValue - The value returned if the resolved value is undefined
+ * @returns The resolved value
+ *
+ * @example
+ * const obj = { a: { b: { c: 'value' } } };
+ * result(obj, 'a.b.c'); // => 'value'
+ *
+ * @example
+ * const obj = { a: { b: () => 'computed' } };
+ * result(obj, 'a.b'); // => 'computed'
+ *
+ * @example
+ * result({}, 'a.b.c', 'default'); // => 'default'
+ */
+export function result<T = any>(object: any, path: string | string[], defaultValue?: T): T | undefined {
+  if (object == null) {
+    return defaultValue;
+  }
+
+  // Convert path to array if it's a string
+  const pathArray = Array.isArray(path)
+    ? path
+    : path
+        .split('.')
+        .flatMap((part) => part.split('[').flatMap((p) => p.split(']')))
+        .filter(Boolean);
+
+  let current = object;
+  let parent = object;
+
+  // Traverse the path
+  for (let i = 0; i < pathArray.length; i++) {
+    if (current == null) {
+      return defaultValue;
+    }
+
+    parent = current;
+    const key = pathArray[i];
+    if (key === undefined) {
+      return defaultValue;
+    }
+    current = current[key];
+  }
+
+  // If the final value is undefined, return the default value
+  if (current === undefined) {
+    return defaultValue;
+  }
+
+  // If the value is a function, invoke it with the parent object as context
+  if (typeof current === 'function') {
+    return current.call(parent) as T;
+  }
+
+  return current as T;
+}
+
+export default result;

package/src/model/useQueryModel.ts

@@ -1,8 +1,8 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { useStore } from '@tanstack/react-store';
-import result from 'lodash.result';
 import { default as lodashSet } from 'lodash.set';
 import { bootStore } from '../config/bootStore';
+import { result } from '../helpers';
 import type { QueryModelAddPosition, QueryModelBuilder } from './model.interface';
 import { useKeyTrackerModel } from './useKeyTrackerModel';
 
@@ -40,7 +40,7 @@ export const useQueryModel = <T>(keyTracker: string): QueryModelBuilder<T> => {
     }
 
     if (!path) {
-      return Array.isArray(data) ? data : [data];
+      return Array.isArray(data) ? data : [data as any];
     }
 
     return result<T[]>(data, path, []);

package/src/queries/useDeleteRequest.ts

@@ -1,9 +1,7 @@
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
-import { useStore } from '@tanstack/react-store';
 import { useEffect, useState } from 'react';
 import { useEnvironmentVariables } from '../config';
-import { bootStore } from '../config/bootStore';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
 import { useHeaderStore, usePauseFutureRequests } from '../stores';
@@ -14,8 +12,8 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
   const [requestPath, setRequestPath] = useState<string>('');
   const [options, setOptions] = useState<any>();
 
-  const { middleware } = useStore(bootStore);
-
+  // const { middleware: middlewares } = useStore(bootStore);
+  // const [middleware] = middlewares as unknown as MiddlewareFunction[];
   const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
 
   const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
@@ -36,22 +34,22 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
       timeout: TIMEOUT,
     };
 
-    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 {
-      deleteResponse = await makeRequest<TResponse>(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<TResponse>(requestOptions);
+    // }
 
     if (deleteResponse.status) {
       res(deleteResponse as IRequestSuccess<TResponse>);

package/src/queries/useGetInfiniteRequest.ts

@@ -37,7 +37,7 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
   const [requestPath, setRequestPath] = useState<string>(path);
 
   const [options, setOptions] = useState<any>(queryOptions);
-  const { middleware } = useStore(bootStore);
+  useStore(bootStore);
 
   const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
 
@@ -68,22 +68,22 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
         timeout: TIMEOUT,
       };
 
-      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 {
-        getResponse = await makeRequest<TResponse>(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<TResponse>(requestOptions);
+      // }
 
       if (getResponse.status) {
         res(getResponse as IRequestSuccess<TResponse & { pagination: Pagination }>);

package/src/queries/useGetRequest.ts

@@ -5,9 +5,14 @@ import { useEnvironmentVariables } from '../config';
 import { useStore } from '@tanstack/react-store';
 import { bootStore } from '../config/bootStore';
 import { IRequestError, IRequestSuccess, makeRequest } from '../request';
+import { executeMiddlewareChain } from '../request/make-request';
 import { useHeaderStore, usePauseFutureRequests } from '../stores';
+import type { MiddlewareContext, MiddlewareNext } from '../types';
 import { DefaultRequestOptions, IPagination, TanstackQueryOption } from './queries.interface';
 
+/**
+ * Hook for making GET requests with pagination support
+ */
 export const useGetRequest = <TResponse extends Record<string, any>>({
   path,
   load = false,
@@ -15,18 +20,24 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   keyTracker,
   baseUrl,
   headers,
+  paginationConfig,
 }: {
   path: string;
   load?: boolean;
   queryOptions?: TanstackQueryOption<TResponse>;
   keyTracker?: string;
+  paginationConfig?: {
+    extractPagination?: (response: IRequestSuccess<TResponse>) => IPagination | undefined;
+    buildPaginationUrl?: (url: string, page: number) => string;
+    pageParamName?: string;
+  };
 } & DefaultRequestOptions) => {
   const [requestPath, setRequestPath] = useState<string>(path);
   const [options, setOptions] = useState<any>(queryOptions);
   const [page, setPage] = useState<number>(1);
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
-  const { middleware } = useStore(bootStore);
+  const { middleware, pagination: globalPaginationConfig } = useStore(bootStore);
 
   const globalHeaders = useHeaderStore((state) => state.headers);
 
@@ -39,6 +50,15 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   // 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: (
       value: IRequestError | IRequestSuccess<TResponse> | PromiseLike<IRequestError | IRequestSuccess<TResponse>>
@@ -56,20 +76,25 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
       timeout: TIMEOUT,
     };
 
+    // Create the final handler that makes the actual request
+    const finalHandler: MiddlewareNext<TResponse> = async (options) => {
+      const finalOptions = options ? { ...requestOptions, ...options } : requestOptions;
+      return await makeRequest<TResponse>(finalOptions);
+    };
+
     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,
-        }
-      );
+
+    // If middleware is available, execute the middleware chain
+    if (middleware && Array.isArray(middleware) && middleware.length > 0) {
+      const context: MiddlewareContext<TResponse> = {
+        baseUrl: baseUrl ?? API_URL,
+        path: requestUrl,
+        options: requestOptions,
+      };
+
+      getResponse = await executeMiddlewareChain<TResponse>(middleware, context, finalHandler);
     } else {
+      // Otherwise, just make the request directly
       getResponse = await makeRequest<TResponse>(requestOptions);
     }
 
@@ -105,41 +130,88 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     }
   }, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
 
+  /**
+   * Extract pagination data from response using configured extractor
+   */
+  const getPaginationData = (response: IRequestSuccess<TResponse>): IPagination | undefined => {
+    // Use the configured pagination extractor or fall back to default
+    const extractPagination =
+      pagination.extractPagination ||
+      ((res) => {
+        if ('pagination' in res.data) {
+          return res.data.pagination as IPagination;
+        }
+        return undefined;
+      });
+
+    return extractPagination(response);
+  };
+
+  /**
+   * Navigate to the next page if available
+   */
   const nextPage = () => {
-    if (query.data.data.pagination) {
-      const pagination: IPagination = 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 as any).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: IPagination = 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 as any).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: string, pageNumber: number) => {
-    const [pathname, queryString] = link.split('?');
-    const queryParams = new URLSearchParams(queryString);
+    // 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('page'));
+        const oldPage = Number(queryParams.get(pageParamName));
+        queryParams.set(pageParamName, String(page));
 
-    queryParams.set('page', pageNumber as any);
+        const newUrl = pathname + '?' + queryParams.toString();
 
-    link = pathname + '?' + queryParams.toString();
+        // only update page when pagination number changed
+        if (oldPage !== pageNumber) {
+          setPage(pageNumber);
+        }
 
-    // only update page when pagination number changed
-    if (oldPage !== pageNumber) {
-      setPage(pageNumber);
-    }
-    return link;
+        return newUrl;
+      });
+
+    return buildPaginationUrl(link, pageNumber);
   };
 
+  /**
+   * Navigate to a specific page
+   */
   const gotoPage = (pageNumber: number) => {
     setRequestPath(constructPaginationLink(requestPath, pageNumber));
   };
@@ -194,5 +266,9 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     gotoPage,
     page,
     queryKey: [requestPath, {}],
+    // Add pagination data accessor - restructured to avoid linter error
+    getPaginationData: function () {
+      return (query as any).data ? getPaginationData(query.data) : undefined;
+    },
   };
 };

package/src/queries/usePatchRequest.ts

@@ -19,7 +19,7 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
   const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
 
   const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
-  const { middleware, context } = useStore(bootStore);
+  const { context } = useStore(bootStore);
 
   const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, data: any) => {
     // get request headers
@@ -34,22 +34,25 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
       onUploadProgress,
     };
 
-    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,
-        }
-      );
+    // 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 {
-      patchResponse = await makeRequest<TResponse>(requestOptions);
-    }
+    //   patchResponse = middlewareResponse;
+    // } else {
+    const patchResponse = await makeRequest<TResponse>(requestOptions);
+    // }
     if (patchResponse.status) {
       // scroll to top after success
       if (context !== 'app') {

package/src/queries/usePostRequest.ts

@@ -25,7 +25,7 @@ export const usePostRequest = <TResponse>({
 } & DefaultRequestOptions) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
-  const { middleware, context } = useStore(bootStore);
+  const { context } = useStore(bootStore);
 
   const globalHeaders = useHeaderStore((state) => state.headers);
   const { isApp } = useReactNativeEnv();
@@ -61,20 +61,23 @@ export const usePostRequest = <TResponse>({
       ...requestConfig,
     };
 
-    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 {
-      postResponse = await makeRequest<TResponse>(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<TResponse>(requestOptions);
+    // }
 
     if (postResponse.status) {
       // scroll to top after success

package/src/queries/usePutRequest.ts

@@ -20,7 +20,7 @@ export const usePutRequest = <TResponse>({ path, baseUrl, headers }: { path: str
 
   const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
 
-  const { middleware, context } = useStore(bootStore);
+  const { context } = useStore(bootStore);
 
   const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, data: any) => {
     // get request headers
@@ -35,20 +35,21 @@ export const usePutRequest = <TResponse>({ path, baseUrl, headers }: { path: str
       onUploadProgress,
     };
 
-    let putResponse: IRequestError | IRequestSuccess<TResponse>;
-    if (middleware) {
-      // perform global middleware
-      putResponse = await middleware(
-        async (options) => await makeRequest<TResponse>(options ? { ...requestOptions, ...options } : requestOptions),
-        {
-          path,
-          baseUrl: baseUrl ?? API_URL,
-          body: data,
-        }
-      );
-    } else {
-      putResponse = await makeRequest<TResponse>(requestOptions);
-    }
+    // let putResponse: IRequestError | IRequestSuccess<TResponse>;
+    // if (middleware) {
+    //   // perform global middleware
+    //   putResponse = await middleware(
+    //     async (options) =>
+    //       await makeRequest<TResponse>(options ? { ...requestOptions, ...options } : requestOptions),
+    //     {
+    //       path,
+    //       baseUrl: baseUrl ?? API_URL,
+    //       body: data,
+    //     }
+    //   );
+    // } else {
+    const putResponse = await makeRequest<TResponse>(requestOptions);
+    // }
     if (putResponse.status) {
       // scroll to top after success
       if (context !== 'app') {