@ventlio/tanstack-query 0.2.76 → 0.2.78

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;
@@ -435,6 +436,8 @@ const useDeleteRequest = (deleteOptions) => {
 const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
     const { getHeaders } = useQueryHeaders();
+    const [requestPath, updatePath] = useState(path);
+    const [options, setOptions] = useState(queryOptions);
     let queryClient = useQueryClient();
     // eslint-disable-next-line react-hooks/exhaustive-deps
     queryClient = useMemo(() => queryClient, []);
@@ -443,7 +446,7 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
             // get request headers
             const globalHeaders = getHeaders();
             const getResponse = await makeRequest({
-                path: pageParam ?? path,
+                path: pageParam ?? requestPath,
                 headers: { ...globalHeaders, ...headers },
                 baseURL: baseUrl ?? API_URL,
                 timeout: TIMEOUT,
@@ -464,18 +467,33 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
      * This pagination implementation is currently tied to our use case
      */
     const constructPaginationLink = (direction, lastPage) => {
-        const [pathname, queryString] = path.split('?');
+        const [pathname, queryString] = requestPath.split('?');
         const queryParams = new URLSearchParams(queryString);
         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)), {
+    const query = useInfiniteQuery([requestPath, {}], ({ pageParam = requestPath }) => new Promise((res, rej) => sendRequest(res, rej, pageParam)), {
         enabled: load,
         getNextPageParam: (lastPage) => constructPaginationLink('next_page', lastPage),
         getPreviousPageParam: (lastPage) => constructPaginationLink('previous_page', lastPage),
-        ...queryOptions,
+        ...options,
     });
+    const setOptionsAsync = async (fetchOptions) => {
+        startTransition(() => {
+            setOptions(fetchOptions);
+        });
+    };
+    const get = async (link, fetchOptions) => {
+        await setOptionsAsync(fetchOptions);
+        await updatedPathAsync(link);
+        return query.data;
+    };
+    const updatedPathAsync = async (link) => {
+        startTransition(() => {
+            updatePath(link);
+        });
+    };
     useEffect(() => {
         if (keyTracker) {
             // set expiration time for the tracker
@@ -483,10 +501,11 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
                 cacheTime: Infinity,
                 staleTime: Infinity,
             });
-            queryClient.setQueryData([keyTracker], [path, {}]);
+            queryClient.setQueryData([keyTracker], [requestPath, {}]);
         }
-    }, [keyTracker, path, queryClient, queryOptions?.staleTime]);
+    }, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
     return {
+        get,
         ...query,
     };
 };
@@ -599,8 +618,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 +644,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 +668,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 +676,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 +693,7 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
                 isApp,
                 fileSelectors,
             },
+            onUploadProgress,
         });
         if (postResponse.status) {
             // scroll to top after success
@@ -682,7 +715,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.d.ts

@@ -1,4 +1,5 @@
-import type { IRequestSuccess } from '../request';
+import type { InfiniteData, UseQueryOptions } from '@tanstack/react-query';
+import type { IRequestError, IRequestSuccess } from '../request';
 import type { DefaultRequestOptions, TanstackInfiniteQueryOption } from './queries.interface';
 interface Pagination {
     previous_page: number;
@@ -48,11 +49,14 @@ export declare const useGetInfiniteRequest: <TResponse extends Record<string, an
     isPreviousData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<IRequestSuccess<TResponse & {
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<IRequestSuccess<TResponse & {
         pagination: Pagination;
     }>>, any>>;
     remove: () => void;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
+    get: (link: string, fetchOptions?: UseQueryOptions<IRequestSuccess<TResponse | undefined>, IRequestError, IRequestSuccess<TResponse | undefined>, any[]> | undefined) => Promise<InfiniteData<IRequestSuccess<TResponse & {
+        pagination: Pagination;
+    }>> | undefined>;
 } | {
     data: undefined;
     error: null;
@@ -86,13 +90,16 @@ export declare const useGetInfiniteRequest: <TResponse extends Record<string, an
     isPreviousData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<IRequestSuccess<TResponse & {
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<IRequestSuccess<TResponse & {
         pagination: Pagination;
     }>>, any>>;
     remove: () => void;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
+    get: (link: string, fetchOptions?: UseQueryOptions<IRequestSuccess<TResponse | undefined>, IRequestError, IRequestSuccess<TResponse | undefined>, any[]> | undefined) => Promise<InfiniteData<IRequestSuccess<TResponse & {
+        pagination: Pagination;
+    }>> | undefined>;
 } | {
-    data: import("@tanstack/react-query").InfiniteData<IRequestSuccess<TResponse & {
+    data: InfiniteData<IRequestSuccess<TResponse & {
         pagination: Pagination;
     }>>;
     error: any;
@@ -126,13 +133,16 @@ export declare const useGetInfiniteRequest: <TResponse extends Record<string, an
     isPreviousData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<IRequestSuccess<TResponse & {
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<IRequestSuccess<TResponse & {
         pagination: Pagination;
     }>>, any>>;
     remove: () => void;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
+    get: (link: string, fetchOptions?: UseQueryOptions<IRequestSuccess<TResponse | undefined>, IRequestError, IRequestSuccess<TResponse | undefined>, any[]> | undefined) => Promise<InfiniteData<IRequestSuccess<TResponse & {
+        pagination: Pagination;
+    }>> | undefined>;
 } | {
-    data: import("@tanstack/react-query").InfiniteData<IRequestSuccess<TResponse & {
+    data: InfiniteData<IRequestSuccess<TResponse & {
         pagination: Pagination;
     }>>;
     error: null;
@@ -166,10 +176,13 @@ export declare const useGetInfiniteRequest: <TResponse extends Record<string, an
     isPreviousData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<IRequestSuccess<TResponse & {
+    refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<InfiniteData<IRequestSuccess<TResponse & {
         pagination: Pagination;
     }>>, any>>;
     remove: () => void;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
+    get: (link: string, fetchOptions?: UseQueryOptions<IRequestSuccess<TResponse | undefined>, IRequestError, IRequestSuccess<TResponse | undefined>, any[]> | undefined) => Promise<InfiniteData<IRequestSuccess<TResponse & {
+        pagination: Pagination;
+    }>> | undefined>;
 };
 export {};

package/dist/queries/useGetInfiniteRequest.js

@@ -1,5 +1,5 @@
 import { useQueryClient, useInfiniteQuery } from '@tanstack/react-query';
-import { useMemo, useEffect } from 'react';
+import { useState, useMemo, useEffect, startTransition } from 'react';
 import 'url-search-params-polyfill';
 import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
 import { useQueryHeaders } from '../config/useQueryHeaders.js';
@@ -10,6 +10,8 @@ import '../request/request.enum.js';
 const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
     const { getHeaders } = useQueryHeaders();
+    const [requestPath, updatePath] = useState(path);
+    const [options, setOptions] = useState(queryOptions);
     let queryClient = useQueryClient();
     // eslint-disable-next-line react-hooks/exhaustive-deps
     queryClient = useMemo(() => queryClient, []);
@@ -18,7 +20,7 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
             // get request headers
             const globalHeaders = getHeaders();
             const getResponse = await makeRequest({
-                path: pageParam ?? path,
+                path: pageParam ?? requestPath,
                 headers: { ...globalHeaders, ...headers },
                 baseURL: baseUrl ?? API_URL,
                 timeout: TIMEOUT,
@@ -39,18 +41,33 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
      * This pagination implementation is currently tied to our use case
      */
     const constructPaginationLink = (direction, lastPage) => {
-        const [pathname, queryString] = path.split('?');
+        const [pathname, queryString] = requestPath.split('?');
         const queryParams = new URLSearchParams(queryString);
         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)), {
+    const query = useInfiniteQuery([requestPath, {}], ({ pageParam = requestPath }) => new Promise((res, rej) => sendRequest(res, rej, pageParam)), {
         enabled: load,
         getNextPageParam: (lastPage) => constructPaginationLink('next_page', lastPage),
         getPreviousPageParam: (lastPage) => constructPaginationLink('previous_page', lastPage),
-        ...queryOptions,
+        ...options,
     });
+    const setOptionsAsync = async (fetchOptions) => {
+        startTransition(() => {
+            setOptions(fetchOptions);
+        });
+    };
+    const get = async (link, fetchOptions) => {
+        await setOptionsAsync(fetchOptions);
+        await updatedPathAsync(link);
+        return query.data;
+    };
+    const updatedPathAsync = async (link) => {
+        startTransition(() => {
+            updatePath(link);
+        });
+    };
     useEffect(() => {
         if (keyTracker) {
             // set expiration time for the tracker
@@ -58,10 +75,11 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
                 cacheTime: Infinity,
                 staleTime: Infinity,
             });
-            queryClient.setQueryData([keyTracker], [path, {}]);
+            queryClient.setQueryData([keyTracker], [requestPath, {}]);
         }
-    }, [keyTracker, path, queryClient, queryOptions?.staleTime]);
+    }, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
     return {
+        get,
         ...query,
     };
 };

package/dist/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/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.76",
+  "version": "0.2.78",
   "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

@@ -1,6 +1,7 @@
+import type { InfiniteData, UseQueryOptions } from '@tanstack/react-query';
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
 import type { RawAxiosRequestHeaders } from 'axios';
-import { useEffect, useMemo } from 'react';
+import { startTransition, useEffect, useMemo, useState } from 'react';
 import { useEnvironmentVariables, useQueryHeaders } from '../config';
 
 import type { IRequestError, IRequestSuccess } from '../request';
@@ -31,6 +32,9 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
 } & DefaultRequestOptions) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
   const { getHeaders } = useQueryHeaders();
+  const [requestPath, updatePath] = useState<string>(path);
+
+  const [options, setOptions] = useState<any>(queryOptions);
 
   let queryClient = useQueryClient();
 
@@ -52,7 +56,7 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
       const globalHeaders: RawAxiosRequestHeaders = getHeaders();
 
       const getResponse = await makeRequest<TResponse>({
-        path: pageParam ?? path,
+        path: pageParam ?? requestPath,
         headers: { ...globalHeaders, ...headers },
         baseURL: baseUrl ?? API_URL,
         timeout: TIMEOUT,
@@ -80,7 +84,7 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
       }
     >
   ) => {
-    const [pathname, queryString] = path.split('?');
+    const [pathname, queryString] = requestPath.split('?');
 
     const queryParams = new URLSearchParams(queryString);
     const lastPageItem = lastPage.data.pagination[direction];
@@ -91,8 +95,8 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
   };
 
   const query = useInfiniteQuery<any, any, IRequestSuccess<TResponse & { pagination: Pagination }>>(
-    [path, {}],
-    ({ pageParam = path }) =>
+    [requestPath, {}],
+    ({ pageParam = requestPath }) =>
       new Promise<IRequestSuccess<TResponse & { pagination: Pagination }> | IRequestError>((res, rej) =>
         sendRequest(res, rej, pageParam)
       ),
@@ -100,10 +104,46 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
       enabled: load,
       getNextPageParam: (lastPage) => constructPaginationLink('next_page', lastPage),
       getPreviousPageParam: (lastPage) => constructPaginationLink('previous_page', lastPage),
-      ...(queryOptions as any),
+      ...options,
     }
   );
 
+  const setOptionsAsync = async (fetchOptions: any) => {
+    startTransition(() => {
+      setOptions(fetchOptions);
+    });
+  };
+
+  const get = async (
+    link: string,
+    fetchOptions?: UseQueryOptions<
+      IRequestSuccess<TResponse | undefined>,
+      IRequestError,
+      IRequestSuccess<TResponse | undefined>,
+      Array<any>
+    >
+  ): Promise<
+    | InfiniteData<
+        IRequestSuccess<
+          TResponse & {
+            pagination: Pagination;
+          }
+        >
+      >
+    | undefined
+  > => {
+    await setOptionsAsync(fetchOptions);
+    await updatedPathAsync(link);
+
+    return query.data;
+  };
+
+  const updatedPathAsync = async (link: string) => {
+    startTransition(() => {
+      updatePath(link);
+    });
+  };
+
   useEffect(() => {
     if (keyTracker) {
       // set expiration time for the tracker
@@ -112,11 +152,12 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
         staleTime: Infinity,
       });
 
-      queryClient.setQueryData([keyTracker], [path, {}]);
+      queryClient.setQueryData([keyTracker], [requestPath, {}]);
     }
-  }, [keyTracker, path, queryClient, queryOptions?.staleTime]);
+  }, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
 
   return {
+    get,
     ...query,
   };
 };

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;