@ventlio/tanstack-query 0.5.11 → 0.5.13

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') {

package/src/request/make-request.ts

@@ -2,34 +2,126 @@ import type { AxiosRequestConfig, RawAxiosRequestHeaders } from 'axios';
 import axios from 'axios';
 import { axiosInstance } from './axios-instance';
 
+import type { MiddlewareContext, MiddlewareFunction, MiddlewareNext } from '../types';
 import { ContentType, HttpMethod } from './request.enum';
 import type { IMakeRequest, IRequestError, IRequestSuccess } from './request.interface';
 import { errorTransformer, successTransformer } from './transformer';
 
-export async function makeRequest<TResponse>({
-  body = {},
-  method = HttpMethod.GET,
-  path,
-  isFormData,
-  headers = {},
-  baseURL,
-  timeout,
-  appFileConfig,
-  onUploadProgress,
-}: IMakeRequest): Promise<IRequestSuccess<TResponse> | IRequestError> {
+/**
+ * Execute a chain of middleware functions
+ */
+export async function executeMiddlewareChain<T>(
+  middlewares: MiddlewareFunction[],
+  context: MiddlewareContext<T>,
+  finalHandler: MiddlewareNext<T>
+): Promise<IRequestSuccess<T> | IRequestError> {
+  // Create a chain of middleware functions
+  const chain = middlewares.reduceRight((next: MiddlewareNext<T>, middleware: MiddlewareFunction<T>) => {
+    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
+ */
+export async function makeRequest<TResponse>(
+  requestOptions: IMakeRequest,
+  middlewares?: MiddlewareFunction[]
+): Promise<IRequestSuccess<TResponse> | IRequestError> {
+  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: Record<string, string> = isApp ? getAppFiles(body, appFileConfig.fileSelectors) : {};
 
   // configure body
-  body = (isFormData ? axios.toFormData(body as FormData) : body) as FormData;
+  const processedBody = (isFormData ? axios.toFormData(body as FormData) : body) as FormData;
+
+  // configure request header
+  configureRequestHeader(isFormData, headers, isApp, appFiles, processedBody);
+
+  // Create the final handler that makes the actual request
+  const finalHandler: MiddlewareNext<TResponse> = async (options) => {
+    const finalRequestOptions = options
+      ? {
+          ...requestOptions,
+          body: processedBody,
+          ...options,
+        }
+      : {
+          ...requestOptions,
+          body: processedBody,
+        };
+
+    return await performRequest<TResponse>(finalRequestOptions);
+  };
+
+  // If middleware is available, execute the middleware chain
+  if (middlewares && middlewares.length > 0) {
+    const context: MiddlewareContext<TResponse> = {
+      baseUrl: baseURL,
+      path,
+      body: body as Record<string, any>,
+      method,
+      headers,
+      options: {
+        baseURL,
+        timeout,
+        path,
+        body: processedBody,
+        method,
+        isFormData,
+        headers,
+        appFileConfig,
+        onUploadProgress,
+      },
+    };
+
+    return await executeMiddlewareChain<TResponse>(middlewares, context, finalHandler);
+  }
 
-  // configure request header1
-  configureRequestHeader(isFormData, headers, isApp, appFiles, body);
+  // Otherwise, just make the request directly
+  return await finalHandler(undefined);
+}
 
+/**
+ * Perform the actual HTTP request
+ */
+async function performRequest<TResponse>({
+  body,
+  method,
+  path,
+  isFormData,
+  headers,
+  baseURL,
+  timeout,
+  appFileConfig,
+  onUploadProgress,
+}: IMakeRequest): Promise<IRequestSuccess<TResponse> | IRequestError> {
   try {
     const axiosRequest = axiosInstance({ baseURL, headers, timeout });
+    const isApp = appFileConfig?.isApp;
 
     const axiosRequestConfig: AxiosRequestConfig<Record<string, any>> = {
       url: path,
@@ -37,7 +129,12 @@ export async function makeRequest<TResponse>({
       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;
     }