@ventlio/tanstack-query 0.2.75 → 0.2.77

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useUploadProgress';

package/dist/hooks/useUploadProgress.d.ts

@@ -0,0 +1,5 @@
+import type { AxiosProgressEvent } from 'axios';
+export declare const useUploadProgress: () => {
+    onUploadProgress: (progressEvent: AxiosProgressEvent) => void;
+    uploadProgressPercent: number;
+};

package/dist/hooks/useUploadProgress.js

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+
+const useUploadProgress = () => {
+    const [uploadProgressPercent, setUploadProgressPercent] = useState(0);
+    const onUploadProgress = (progressEvent) => {
+        const { loaded, total } = progressEvent;
+        const percentage = Math.round((loaded / total) * 100);
+        setUploadProgressPercent(percentage);
+    };
+    return { onUploadProgress, uploadProgressPercent };
+};
+
+export { useUploadProgress };
+//# sourceMappingURL=useUploadProgress.js.map

package/dist/hooks/useUploadProgress.js.map

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

package/dist/index.mjs

@@ -313,7 +313,7 @@ const successTransformer = (data) => {
     };
 };
 
-async function makeRequest({ body, method = HttpMethod.GET, path, isFormData, headers = {}, baseURL, timeout, appFileConfig, }) {
+async function makeRequest({ body, method = HttpMethod.GET, path, isFormData, headers = {}, baseURL, timeout, appFileConfig, onUploadProgress, }) {
     // 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;
@@ -351,6 +351,7 @@ async function makeRequest({ body, method = HttpMethod.GET, path, isFormData, he
             url: path,
             method,
             data: body,
+            onUploadProgress,
         });
         // get response json
         const jsonResp = await resp.data;
@@ -459,23 +460,23 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
             res(null);
         }
     };
-    const query = useInfiniteQuery([path, {}], ({ pageParam = path }) => new Promise((res, rej) => sendRequest(res, rej, pageParam)), {
-        enabled: load,
-        getNextPageParam: (lastPage, pages) => constructPaginationLink('next_page', lastPage, pages),
-        getPreviousPageParam: (lastPage, pages) => constructPaginationLink('previous_page', lastPage, pages),
-        ...queryOptions,
-    });
     /**
      *
      * This pagination implementation is currently tied to our use case
      */
-    const constructPaginationLink = (direction, lastPage, pages) => {
-        const [pathname, queryString] = lastPage.split('?');
+    const constructPaginationLink = (direction, lastPage) => {
+        const [pathname, queryString] = path.split('?');
         const queryParams = new URLSearchParams(queryString);
-        const lastPageItem = pages[pages.length - 1];
-        queryParams.set('page', String(lastPageItem?.data.pagination[direction]));
+        const lastPageItem = lastPage.data.pagination[direction];
+        queryParams.set('page', String(lastPageItem));
         return pathname + '?' + queryParams.toString();
     };
+    const query = useInfiniteQuery([path, {}], ({ pageParam = path }) => new Promise((res, rej) => sendRequest(res, rej, pageParam)), {
+        enabled: load,
+        getNextPageParam: (lastPage) => constructPaginationLink('next_page', lastPage),
+        getPreviousPageParam: (lastPage) => constructPaginationLink('previous_page', lastPage),
+        ...queryOptions,
+    });
     useEffect(() => {
         if (keyTracker) {
             // set expiration time for the tracker
@@ -599,8 +600,19 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
     };
 };
 
+const useUploadProgress = () => {
+    const [uploadProgressPercent, setUploadProgressPercent] = useState(0);
+    const onUploadProgress = (progressEvent) => {
+        const { loaded, total } = progressEvent;
+        const percentage = Math.round((loaded / total) * 100);
+        setUploadProgressPercent(percentage);
+    };
+    return { onUploadProgress, uploadProgressPercent };
+};
+
 const usePatchRequest = ({ path, baseUrl, headers }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
+    const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
     const { getHeaders } = useQueryHeaders();
     const queryClient = useQueryClient();
     const config = queryClient.getQueryData(['config']);
@@ -614,6 +626,7 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
             headers: { ...globalHeaders, ...headers },
             baseURL: baseUrl ?? API_URL,
             timeout: TIMEOUT,
+            onUploadProgress,
         });
         if (patchResponse.status) {
             // scroll to top after success
@@ -637,7 +650,7 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
     const patch = async (data, options) => {
         return mutation.mutateAsync(data, options);
     };
-    return { patch, ...mutation };
+    return { patch, uploadProgressPercent, ...mutation };
 };
 
 const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelectors, }) => {
@@ -645,6 +658,7 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
     const queryClient = useQueryClient();
     const { getHeaders } = useQueryHeaders();
     const { isApp } = useReactNativeEnv();
+    const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
     const sendRequest = async (res, rej, postData) => {
         // get request headers
         const globalHeaders = getHeaders();
@@ -661,6 +675,7 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
                 isApp,
                 fileSelectors,
             },
+            onUploadProgress,
         });
         if (postResponse.status) {
             // scroll to top after success
@@ -682,7 +697,7 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
     const post = async (data, options) => {
         return mutation.mutateAsync(data, options);
     };
-    return { post, ...mutation };
+    return { post, uploadProgressPercent, ...mutation };
 };
 
 export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, getDateInFuture, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetInfiniteRequest, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery };

package/dist/index.mjs.map

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

package/dist/queries/useGetInfiniteRequest.js

@@ -34,23 +34,23 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
             res(null);
         }
     };
-    const query = useInfiniteQuery([path, {}], ({ pageParam = path }) => new Promise((res, rej) => sendRequest(res, rej, pageParam)), {
-        enabled: load,
-        getNextPageParam: (lastPage, pages) => constructPaginationLink('next_page', lastPage, pages),
-        getPreviousPageParam: (lastPage, pages) => constructPaginationLink('previous_page', lastPage, pages),
-        ...queryOptions,
-    });
     /**
      *
      * This pagination implementation is currently tied to our use case
      */
-    const constructPaginationLink = (direction, lastPage, pages) => {
-        const [pathname, queryString] = lastPage.split('?');
+    const constructPaginationLink = (direction, lastPage) => {
+        const [pathname, queryString] = path.split('?');
         const queryParams = new URLSearchParams(queryString);
-        const lastPageItem = pages[pages.length - 1];
-        queryParams.set('page', String(lastPageItem?.data.pagination[direction]));
+        const lastPageItem = lastPage.data.pagination[direction];
+        queryParams.set('page', String(lastPageItem));
         return pathname + '?' + queryParams.toString();
     };
+    const query = useInfiniteQuery([path, {}], ({ pageParam = path }) => new Promise((res, rej) => sendRequest(res, rej, pageParam)), {
+        enabled: load,
+        getNextPageParam: (lastPage) => constructPaginationLink('next_page', lastPage),
+        getPreviousPageParam: (lastPage) => constructPaginationLink('previous_page', lastPage),
+        ...queryOptions,
+    });
     useEffect(() => {
         if (keyTracker) {
             // set expiration time for the tracker

package/dist/queries/usePatchRequest.d.ts

@@ -20,6 +20,7 @@ export declare const usePatchRequest: <TResponse>({ path, baseUrl, headers }: {
     variables: void | undefined;
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
     patch: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+    uploadProgressPercent: number;
 } | {
     data: undefined;
     error: null;
@@ -37,6 +38,7 @@ export declare const usePatchRequest: <TResponse>({ path, baseUrl, headers }: {
     variables: void | undefined;
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
     patch: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+    uploadProgressPercent: number;
 } | {
     data: undefined;
     error: IRequestError;
@@ -54,6 +56,7 @@ export declare const usePatchRequest: <TResponse>({ path, baseUrl, headers }: {
     variables: void | undefined;
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
     patch: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+    uploadProgressPercent: number;
 } | {
     data: IRequestSuccess<TResponse>;
     error: null;
@@ -71,4 +74,5 @@ export declare const usePatchRequest: <TResponse>({ path, baseUrl, headers }: {
     variables: void | undefined;
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
     patch: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+    uploadProgressPercent: number;
 };

package/dist/queries/usePatchRequest.js

@@ -3,12 +3,14 @@ import 'url-search-params-polyfill';
 import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
 import { useQueryHeaders } from '../config/useQueryHeaders.js';
 import { scrollToTop } from '../helpers/scrollToTop.js';
+import { useUploadProgress } from '../hooks/useUploadProgress.js';
 import 'axios';
 import { makeRequest } from '../request/make-request.js';
 import { HttpMethod } from '../request/request.enum.js';
 
 const usePatchRequest = ({ path, baseUrl, headers }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
+    const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
     const { getHeaders } = useQueryHeaders();
     const queryClient = useQueryClient();
     const config = queryClient.getQueryData(['config']);
@@ -22,6 +24,7 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
             headers: { ...globalHeaders, ...headers },
             baseURL: baseUrl ?? API_URL,
             timeout: TIMEOUT,
+            onUploadProgress,
         });
         if (patchResponse.status) {
             // scroll to top after success
@@ -45,7 +48,7 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
     const patch = async (data, options) => {
         return mutation.mutateAsync(data, options);
     };
-    return { patch, ...mutation };
+    return { patch, uploadProgressPercent, ...mutation };
 };
 
 export { usePatchRequest };

package/dist/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/queries/usePostRequest.d.ts

@@ -22,6 +22,7 @@ export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, he
     variables: void | undefined;
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
     post: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+    uploadProgressPercent: number;
 } | {
     data: undefined;
     error: null;
@@ -39,6 +40,7 @@ export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, he
     variables: void | undefined;
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
     post: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+    uploadProgressPercent: number;
 } | {
     data: undefined;
     error: IRequestError;
@@ -56,6 +58,7 @@ export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, he
     variables: void | undefined;
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
     post: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+    uploadProgressPercent: number;
 } | {
     data: IRequestSuccess<TResponse>;
     error: null;
@@ -73,4 +76,5 @@ export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, he
     variables: void | undefined;
     mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
     post: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
+    uploadProgressPercent: number;
 };

package/dist/queries/usePostRequest.js

@@ -4,6 +4,7 @@ import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
 import { useQueryHeaders } from '../config/useQueryHeaders.js';
 import { useReactNativeEnv } from '../config/useReactNativeEnv.js';
 import { scrollToTop } from '../helpers/scrollToTop.js';
+import { useUploadProgress } from '../hooks/useUploadProgress.js';
 import 'axios';
 import { makeRequest } from '../request/make-request.js';
 import { HttpMethod } from '../request/request.enum.js';
@@ -13,6 +14,7 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
     const queryClient = useQueryClient();
     const { getHeaders } = useQueryHeaders();
     const { isApp } = useReactNativeEnv();
+    const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
     const sendRequest = async (res, rej, postData) => {
         // get request headers
         const globalHeaders = getHeaders();
@@ -29,6 +31,7 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
                 isApp,
                 fileSelectors,
             },
+            onUploadProgress,
         });
         if (postResponse.status) {
             // scroll to top after success
@@ -50,7 +53,7 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
     const post = async (data, options) => {
         return mutation.mutateAsync(data, options);
     };
-    return { post, ...mutation };
+    return { post, uploadProgressPercent, ...mutation };
 };
 
 export { usePostRequest };

package/dist/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/request/make-request.d.ts

@@ -1,2 +1,2 @@
 import type { IMakeRequest } from './request.interface';
-export declare function makeRequest<TResponse>({ body, method, path, isFormData, headers, baseURL, timeout, appFileConfig, }: IMakeRequest): Promise<import("./request.interface").IRequestError>;
+export declare function makeRequest<TResponse>({ body, method, path, isFormData, headers, baseURL, timeout, appFileConfig, onUploadProgress, }: IMakeRequest): Promise<import("./request.interface").IRequestError>;

package/dist/request/make-request.js

@@ -3,7 +3,7 @@ import { axiosInstance } from './axios-instance.js';
 import { ContentType, HttpMethod } from './request.enum.js';
 import { errorTransformer, successTransformer } from './transformer.js';
 
-async function makeRequest({ body, method = HttpMethod.GET, path, isFormData, headers = {}, baseURL, timeout, appFileConfig, }) {
+async function makeRequest({ body, method = HttpMethod.GET, path, isFormData, headers = {}, baseURL, timeout, appFileConfig, onUploadProgress, }) {
     // 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;
@@ -41,6 +41,7 @@ async function makeRequest({ body, method = HttpMethod.GET, path, isFormData, he
             url: path,
             method,
             data: body,
+            onUploadProgress,
         });
         // get response json
         const jsonResp = await resp.data;

package/dist/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/request/request.interface.d.ts

@@ -1,4 +1,4 @@
-import type { RawAxiosRequestHeaders } from 'axios';
+import type { AxiosProgressEvent, RawAxiosRequestHeaders } from 'axios';
 import type { HttpMethod } from './request.enum';
 export interface IMakeRequest {
     baseURL: string;
@@ -9,6 +9,7 @@ export interface IMakeRequest {
     isFormData?: boolean;
     headers: RawAxiosRequestHeaders;
     appFileConfig?: AppFileConfig;
+    onUploadProgress?: (progressEvent: AxiosProgressEvent) => void;
 }
 export interface AppFileConfig {
     fileSelectors?: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ventlio/tanstack-query",
-  "version": "0.2.75",
+  "version": "0.2.77",
   "license": "MIT",
   "main": "dist/index.js",
   "contributors": [

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useUploadProgress';

package/src/hooks/useUploadProgress.ts

@@ -0,0 +1,15 @@
+import type { AxiosProgressEvent } from 'axios';
+import { useState } from 'react';
+
+export const useUploadProgress = () => {
+  const [uploadProgressPercent, setUploadProgressPercent] = useState<number>(0);
+
+  const onUploadProgress = (progressEvent: AxiosProgressEvent) => {
+    const { loaded, total } = progressEvent;
+    const percentage = Math.round((loaded / (total as number)) * 100);
+
+    setUploadProgressPercent(percentage);
+  };
+
+  return { onUploadProgress, uploadProgressPercent };
+};

package/src/queries/useGetInfiniteRequest.ts

@@ -68,43 +68,42 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
     }
   };
 
-  const query = useInfiniteQuery<any, any, IRequestSuccess<TResponse & { pagination: Pagination }>>(
-    [path, {}],
-    ({ pageParam = path }) =>
-      new Promise<IRequestSuccess<TResponse & { pagination: Pagination }> | IRequestError>((res, rej) =>
-        sendRequest(res, rej, pageParam)
-      ),
-    {
-      enabled: load,
-      getNextPageParam: (lastPage, pages) => constructPaginationLink('next_page', lastPage, pages),
-      getPreviousPageParam: (lastPage, pages) => constructPaginationLink('previous_page', lastPage, pages),
-      ...(queryOptions as any),
-    }
-  );
-
   /**
    *
    * This pagination implementation is currently tied to our use case
    */
   const constructPaginationLink = (
     direction: 'next_page' | 'previous_page',
-    lastPage: string,
-    pages: IRequestSuccess<
+    lastPage: IRequestSuccess<
       TResponse & {
         pagination: Pagination;
       }
-    >[]
+    >
   ) => {
-    const [pathname, queryString] = lastPage.split('?');
+    const [pathname, queryString] = path.split('?');
 
     const queryParams = new URLSearchParams(queryString);
-    const lastPageItem = pages[pages.length - 1];
+    const lastPageItem = lastPage.data.pagination[direction];
 
-    queryParams.set('page', String(lastPageItem?.data.pagination[direction]));
+    queryParams.set('page', String(lastPageItem));
 
     return pathname + '?' + queryParams.toString();
   };
 
+  const query = useInfiniteQuery<any, any, IRequestSuccess<TResponse & { pagination: Pagination }>>(
+    [path, {}],
+    ({ pageParam = path }) =>
+      new Promise<IRequestSuccess<TResponse & { pagination: Pagination }> | IRequestError>((res, rej) =>
+        sendRequest(res, rej, pageParam)
+      ),
+    {
+      enabled: load,
+      getNextPageParam: (lastPage) => constructPaginationLink('next_page', lastPage),
+      getPreviousPageParam: (lastPage) => constructPaginationLink('previous_page', lastPage),
+      ...(queryOptions as any),
+    }
+  );
+
   useEffect(() => {
     if (keyTracker) {
       // set expiration time for the tracker

package/src/queries/usePatchRequest.ts

@@ -3,6 +3,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import type { RawAxiosRequestHeaders } from 'axios';
 import { useEnvironmentVariables, useQueryHeaders } from '../config';
 import { scrollToTop } from '../helpers';
+import { useUploadProgress } from '../hooks';
 import { HttpMethod, makeRequest } from '../request';
 import type { IRequestError, IRequestSuccess } from '../request/request.interface';
 import type { TanstackQueryConfig } from '../types';
@@ -10,6 +11,7 @@ import type { DefaultRequestOptions } from './queries.interface';
 
 export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: string } & DefaultRequestOptions) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
+  const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
 
   const { getHeaders } = useQueryHeaders();
   const queryClient = useQueryClient();
@@ -27,6 +29,7 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
       headers: { ...globalHeaders, ...headers },
       baseURL: baseUrl ?? API_URL,
       timeout: TIMEOUT,
+      onUploadProgress,
     });
 
     if (patchResponse.status) {
@@ -59,5 +62,5 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
     return mutation.mutateAsync(data, options);
   };
 
-  return { patch, ...mutation };
+  return { patch, uploadProgressPercent, ...mutation };
 };

package/src/queries/usePostRequest.ts

@@ -4,6 +4,7 @@ import { useEnvironmentVariables, useQueryHeaders, useReactNativeEnv } from '../
 
 import type { RawAxiosRequestHeaders } from 'axios';
 import { scrollToTop } from '../helpers';
+import { useUploadProgress } from '../hooks';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
 import type { TanstackQueryConfig } from '../types';
@@ -24,6 +25,8 @@ export const usePostRequest = <TResponse>({
   const queryClient = useQueryClient();
   const { getHeaders } = useQueryHeaders();
   const { isApp } = useReactNativeEnv();
+  const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
+
   const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, postData: any) => {
     // get request headers
     const globalHeaders: RawAxiosRequestHeaders = getHeaders();
@@ -41,6 +44,7 @@ export const usePostRequest = <TResponse>({
         isApp,
         fileSelectors,
       },
+      onUploadProgress,
     });
 
     if (postResponse.status) {
@@ -70,5 +74,5 @@ export const usePostRequest = <TResponse>({
     return mutation.mutateAsync(data, options);
   };
 
-  return { post, ...mutation };
+  return { post, uploadProgressPercent, ...mutation };
 };

package/src/request/make-request.ts

@@ -14,6 +14,7 @@ export async function makeRequest<TResponse>({
   baseURL,
   timeout,
   appFileConfig,
+  onUploadProgress,
 }: IMakeRequest) {
   // 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
@@ -53,6 +54,7 @@ export async function makeRequest<TResponse>({
       url: path,
       method,
       data: body,
+      onUploadProgress,
     });
 
     // get response json

package/src/request/request.interface.ts

@@ -1,4 +1,4 @@
-import type { RawAxiosRequestHeaders } from 'axios';
+import type { AxiosProgressEvent, RawAxiosRequestHeaders } from 'axios';
 import type { HttpMethod } from './request.enum';
 
 export interface IMakeRequest {
@@ -10,12 +10,14 @@ export interface IMakeRequest {
   isFormData?: boolean;
   headers: RawAxiosRequestHeaders;
   appFileConfig?: AppFileConfig;
+  onUploadProgress?: (progressEvent: AxiosProgressEvent) => void;
 }
 
 export interface AppFileConfig {
   fileSelectors?: string[];
   isApp: boolean;
 }
+
 export interface AxiosInstanceOption {
   bearerToken?: string;
   contentType?: string;