@ventlio/tanstack-query 0.3.1 → 0.3.2

package/dist/queries/usePatchRequest.d.ts

@@ -4,11 +4,11 @@ import type { DefaultRequestOptions } from './queries.interface';
 export declare const usePatchRequest: <TResponse>({ path, baseUrl, headers }: {
     path: string;
 } & DefaultRequestOptions) => {
+    isLoading: boolean;
     data: undefined;
     error: null;
     isError: false;
     isIdle: true;
-    isLoading: false;
     isSuccess: false;
     status: "idle";
     mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
@@ -19,14 +19,14 @@ export declare const usePatchRequest: <TResponse>({ path, baseUrl, headers }: {
     isPaused: boolean;
     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>>;
+    patch: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
     uploadProgressPercent: number;
 } | {
+    isLoading: boolean;
     data: undefined;
     error: null;
     isError: false;
     isIdle: false;
-    isLoading: true;
     isSuccess: false;
     status: "loading";
     mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
@@ -37,14 +37,14 @@ export declare const usePatchRequest: <TResponse>({ path, baseUrl, headers }: {
     isPaused: boolean;
     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>>;
+    patch: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
     uploadProgressPercent: number;
 } | {
+    isLoading: boolean;
     data: undefined;
     error: IRequestError;
     isError: true;
     isIdle: false;
-    isLoading: false;
     isSuccess: false;
     status: "error";
     mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
@@ -55,14 +55,14 @@ export declare const usePatchRequest: <TResponse>({ path, baseUrl, headers }: {
     isPaused: boolean;
     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>>;
+    patch: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
     uploadProgressPercent: number;
 } | {
+    isLoading: boolean;
     data: IRequestSuccess<TResponse>;
     error: null;
     isError: false;
     isIdle: false;
-    isLoading: false;
     isSuccess: true;
     status: "success";
     mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
@@ -73,6 +73,6 @@ export declare const usePatchRequest: <TResponse>({ path, baseUrl, headers }: {
     isPaused: boolean;
     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>>;
+    patch: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
     uploadProgressPercent: number;
 };

package/dist/queries/usePatchRequest.js

@@ -1,4 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
+import { useState, useEffect } from 'react';
 import 'url-search-params-polyfill';
 import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
 import { useQueryConfig } from '../config/useQueryConfig.js';
@@ -8,10 +9,13 @@ import { useUploadProgress } from '../hooks/useUploadProgress.js';
 import 'axios';
 import { makeRequest } from '../request/make-request.js';
 import { HttpMethod } from '../request/request.enum.js';
+import { usePauseFutureRequests } from '../stores/usePauseFutureRequests.js';
 
 const usePatchRequest = ({ path, baseUrl, headers }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
     const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
+    const [requestPayload, setRequestPayload] = useState();
+    const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
     const { getHeaders } = useQueryHeaders();
     const config = useQueryConfig();
     const sendRequest = async (res, rej, data) => {
@@ -59,9 +63,22 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
         return sendRequest(res, rej, dataData);
     }), { mutationKey: [path, { type: 'mutation' }] });
     const patch = async (data, options) => {
-        return mutation.mutateAsync(data, options);
+        if (!isFutureMutationsPaused) {
+            return mutation.mutateAsync(data, options);
+        }
+        else {
+            setRequestPayload({ data, options });
+            return undefined;
+        }
     };
-    return { patch, uploadProgressPercent, ...mutation };
+    useEffect(() => {
+        if (!isFutureMutationsPaused && requestPayload) {
+            patch(requestPayload.data, requestPayload.options);
+            setRequestPayload(undefined);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFutureMutationsPaused]);
+    return { patch, uploadProgressPercent, ...mutation, isLoading: mutation.isLoading || isFutureMutationsPaused };
 };
 
 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

@@ -6,11 +6,11 @@ export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, he
     isFormData?: boolean | undefined;
     fileSelectors?: string[] | undefined;
 } & DefaultRequestOptions) => {
+    isLoading: boolean;
     data: undefined;
     error: null;
     isError: false;
     isIdle: true;
-    isLoading: false;
     isSuccess: false;
     status: "idle";
     mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, {
@@ -39,14 +39,14 @@ export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, he
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
     } & {
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
-    }) | undefined) => Promise<IRequestSuccess<TResponse>>;
+    }) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
     uploadProgressPercent: number;
 } | {
+    isLoading: boolean;
     data: undefined;
     error: null;
     isError: false;
     isIdle: false;
-    isLoading: true;
     isSuccess: false;
     status: "loading";
     mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, {
@@ -75,14 +75,14 @@ export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, he
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
     } & {
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
-    }) | undefined) => Promise<IRequestSuccess<TResponse>>;
+    }) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
     uploadProgressPercent: number;
 } | {
+    isLoading: boolean;
     data: undefined;
     error: IRequestError;
     isError: true;
     isIdle: false;
-    isLoading: false;
     isSuccess: false;
     status: "error";
     mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, {
@@ -111,14 +111,14 @@ export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, he
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
     } & {
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
-    }) | undefined) => Promise<IRequestSuccess<TResponse>>;
+    }) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
     uploadProgressPercent: number;
 } | {
+    isLoading: boolean;
     data: IRequestSuccess<TResponse>;
     error: null;
     isError: false;
     isIdle: false;
-    isLoading: false;
     isSuccess: true;
     status: "success";
     mutate: import("@tanstack/react-query").UseMutateFunction<IRequestSuccess<TResponse>, IRequestError, {
@@ -147,6 +147,6 @@ export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, he
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
     } & {
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
-    }) | undefined) => Promise<IRequestSuccess<TResponse>>;
+    }) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
     uploadProgressPercent: number;
 };

package/dist/queries/usePostRequest.js

@@ -4,11 +4,13 @@ import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
 import { useQueryConfig } from '../config/useQueryConfig.js';
 import { useQueryHeaders } from '../config/useQueryHeaders.js';
 import { useReactNativeEnv } from '../config/useReactNativeEnv.js';
+import { useState, useEffect } from 'react';
 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';
+import { usePauseFutureRequests } from '../stores/usePauseFutureRequests.js';
 
 const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelectors, }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
@@ -16,6 +18,8 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
     const { getHeaders } = useQueryHeaders();
     const { isApp } = useReactNativeEnv();
     const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
+    const [requestPayload, setRequestPayload] = useState();
+    const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
     const sendRequest = async (res, rej, postData) => {
         // get request headers
         const globalHeaders = getHeaders();
@@ -69,10 +73,23 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
         mutationKey: [path, { type: 'mutation' }],
     });
     const post = async (data, options) => {
-        const { requestConfig, ...otherOptions } = options ?? {};
-        return mutation.mutateAsync({ data, requestConfig }, otherOptions);
+        if (!isFutureMutationsPaused) {
+            const { requestConfig, ...otherOptions } = options ?? {};
+            return mutation.mutateAsync({ data, requestConfig }, otherOptions);
+        }
+        else {
+            setRequestPayload({ data, options });
+            return undefined;
+        }
     };
-    return { post, uploadProgressPercent, ...mutation };
+    useEffect(() => {
+        if (!isFutureMutationsPaused && requestPayload) {
+            post(requestPayload.data, requestPayload.options);
+            setRequestPayload(undefined);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFutureMutationsPaused]);
+    return { post, uploadProgressPercent, ...mutation, isLoading: mutation.isLoading || isFutureMutationsPaused };
 };
 
 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/stores/index.d.ts

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

package/dist/stores/usePauseFutureRequests.d.ts

@@ -0,0 +1,7 @@
+export interface PauseFutureRequest {
+    isFutureQueriesPaused: boolean;
+    isFutureMutationsPaused: boolean;
+    pauseFutureMutation: (status: boolean) => void;
+    pauseFutureQueries: (status: boolean) => void;
+}
+export declare const usePauseFutureRequests: import("zustand").UseBoundStore<import("zustand").StoreApi<PauseFutureRequest>>;

package/dist/stores/usePauseFutureRequests.js

@@ -0,0 +1,19 @@
+import { create } from 'zustand';
+
+const usePauseFutureRequests = create((set) => {
+    const pauseFutureQueries = (status) => {
+        return set({ isFutureQueriesPaused: status });
+    };
+    const pauseFutureMutation = (status) => {
+        return set({ isFutureQueriesPaused: status });
+    };
+    return {
+        isFutureMutationsPaused: false,
+        isFutureQueriesPaused: false,
+        pauseFutureQueries,
+        pauseFutureMutation,
+    };
+});
+
+export { usePauseFutureRequests };
+//# sourceMappingURL=usePauseFutureRequests.js.map

package/dist/stores/usePauseFutureRequests.js.map

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

package/package.json

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

package/src/index.ts

@@ -1,6 +1,8 @@
 export * from './config';
 export * from './helpers';
+export * from './hooks';
 export * from './model';
 export * from './queries';
 export * from './request';
+export * from './stores';
 export * from './types';

package/src/queries/useDeleteRequest.ts

@@ -1,10 +1,11 @@
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import type { RawAxiosRequestHeaders } from 'axios';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
+import { usePauseFutureRequests } from '../stores';
 import type { DefaultRequestOptions } from './queries.interface';
 
 export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOptions) => {
@@ -13,6 +14,9 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
   const [options, setOptions] = useState<any>();
 
   const { options: queryConfigOptions } = useQueryConfig();
+  const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+
+  const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
@@ -75,15 +79,28 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
       Array<any>
     > & { cached?: boolean }
   ): Promise<IRequestSuccess<TResponse> | undefined> => {
-    // set enabled to be true for every delete
-    internalDeleteOptions = internalDeleteOptions ?? {};
-    internalDeleteOptions.enabled = true;
+    if (!isFutureQueriesPaused) {
+      // set enabled to be true for every delete
+      internalDeleteOptions = internalDeleteOptions ?? {};
+      internalDeleteOptions.enabled = true;
 
-    await setOptionsAsync(internalDeleteOptions);
-    await updatedPathAsync(link);
+      await setOptionsAsync(internalDeleteOptions);
+      await updatedPathAsync(link);
 
-    return query.data;
+      return query.data;
+    } else {
+      setRequestPayload({ link, internalDeleteOptions });
+      return undefined;
+    }
   };
 
-  return { destroy, ...query };
+  useEffect(() => {
+    if (!isFutureQueriesPaused && requestPayload) {
+      destroy(requestPayload.link, requestPayload.internalDeleteOptions);
+      setRequestPayload(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFutureQueriesPaused]);
+
+  return { destroy, ...query, isLoading: query.isLoading || isFutureQueriesPaused };
 };

package/src/queries/useGetInfiniteRequest.ts

@@ -6,6 +6,7 @@ import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../con
 
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
+import { usePauseFutureRequests } from '../stores';
 import type { DefaultRequestOptions, TanstackInfiniteQueryOption } from './queries.interface';
 
 interface Pagination {
@@ -36,6 +37,9 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
 
   const [options, setOptions] = useState<any>(queryOptions);
   const { options: queryConfigOptions } = useQueryConfig();
+  const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+
+  const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
 
   let queryClient = useQueryClient();
 
@@ -115,7 +119,7 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
         sendRequest(res, rej, queryKey, pageParam)
       ),
     {
-      enabled: load,
+      enabled: load && !isFutureQueriesPaused,
       getNextPageParam: (lastPage) => constructPaginationLink('next_page', lastPage),
       getPreviousPageParam: (lastPage) => constructPaginationLink('previous_page', lastPage),
       ...options,
@@ -146,12 +150,25 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
       >
     | undefined
   > => {
-    await setOptionsAsync(fetchOptions);
-    await updatedPathAsync(link);
+    if (!isFutureQueriesPaused) {
+      await setOptionsAsync(fetchOptions);
+      await updatedPathAsync(link);
 
-    return query.data;
+      return query.data;
+    } else {
+      setRequestPayload({ link, fetchOptions });
+      return undefined;
+    }
   };
 
+  useEffect(() => {
+    if (!isFutureQueriesPaused && requestPayload) {
+      get(requestPayload.link, requestPayload.fetchOptions);
+      setRequestPayload(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFutureQueriesPaused]);
+
   const updatedPathAsync = async (link: string) => {
     startTransition(() => {
       setRequestPath(link);
@@ -173,5 +190,6 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
   return {
     get,
     ...query,
+    isLoading: query.isLoading || isFutureQueriesPaused,
   };
 };

package/src/queries/useGetRequest.ts

@@ -6,6 +6,7 @@ import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../con
 
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
+import { usePauseFutureRequests } from '../stores';
 import type { DefaultRequestOptions, IPagination, TanstackQueryOption } from './queries.interface';
 
 export const useGetRequest = <TResponse extends Record<string, any>>({
@@ -28,6 +29,9 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
   const { getHeaders } = useQueryHeaders();
   const { options: queryConfigOptions } = useQueryConfig();
+  const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+
+  const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
 
   let queryClient = useQueryClient();
 
@@ -82,7 +86,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     ({ queryKey }) =>
       new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => sendRequest(res, rej, queryKey)),
     {
-      enabled: load,
+      enabled: load && !isFutureQueriesPaused,
       ...options,
     }
   );
@@ -165,14 +169,28 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
       Array<any>
     >
   ): Promise<IRequestSuccess<TResponse> | undefined> => {
-    await setOptionsAsync(fetchOptions);
-    await updatedPathAsync(link);
+    if (!isFutureQueriesPaused) {
+      await setOptionsAsync(fetchOptions);
+      await updatedPathAsync(link);
 
-    return query.data;
+      return query.data;
+    } else {
+      setRequestPayload({ link, fetchOptions });
+      return undefined;
+    }
   };
 
+  useEffect(() => {
+    if (!isFutureQueriesPaused && requestPayload) {
+      get(requestPayload.link, requestPayload.fetchOptions);
+      setRequestPayload(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFutureQueriesPaused]);
+
   return {
     ...query,
+    isLoading: query.isLoading || isFutureQueriesPaused,
     setRequestPath,
     nextPage,
     prevPage,

package/src/queries/usePatchRequest.ts

@@ -1,17 +1,23 @@
 import type { MutateOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import type { RawAxiosRequestHeaders } from 'axios';
+import { useEffect, useState } from 'react';
 import { useEnvironmentVariables, useQueryConfig, 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 { usePauseFutureRequests } from '../stores';
 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 [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+
+  const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
+
   const { getHeaders } = useQueryHeaders();
 
   const config = useQueryConfig();
@@ -71,9 +77,22 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
   const patch = async (
     data: any,
     options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined
-  ): Promise<IRequestSuccess<TResponse>> => {
-    return mutation.mutateAsync(data, options);
+  ): Promise<IRequestSuccess<TResponse> | undefined> => {
+    if (!isFutureMutationsPaused) {
+      return mutation.mutateAsync(data, options);
+    } else {
+      setRequestPayload({ data, options });
+      return undefined;
+    }
   };
 
-  return { patch, uploadProgressPercent, ...mutation };
+  useEffect(() => {
+    if (!isFutureMutationsPaused && requestPayload) {
+      patch(requestPayload.data, requestPayload.options);
+      setRequestPayload(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFutureMutationsPaused]);
+
+  return { patch, uploadProgressPercent, ...mutation, isLoading: mutation.isLoading || isFutureMutationsPaused };
 };

package/src/queries/usePostRequest.ts

@@ -3,10 +3,12 @@ import { useMutation } from '@tanstack/react-query';
 import { useEnvironmentVariables, useQueryConfig, useQueryHeaders, useReactNativeEnv } from '../config';
 
 import type { RawAxiosRequestHeaders } from 'axios';
+import { useEffect, useState } from 'react';
 import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
 import type { IMakeRequest, IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
+import { usePauseFutureRequests } from '../stores';
 import type { DefaultRequestOptions } from './queries.interface';
 
 export const usePostRequest = <TResponse>({
@@ -27,6 +29,9 @@ export const usePostRequest = <TResponse>({
   const { getHeaders } = useQueryHeaders();
   const { isApp } = useReactNativeEnv();
   const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
+  const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+
+  const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
 
   const sendRequest = async (
     res: (value: any) => void,
@@ -108,10 +113,23 @@ export const usePostRequest = <TResponse>({
       | { requestConfig?: Partial<Omit<IMakeRequest, 'body'>> }
       | undefined
     ) & { requestConfig?: Partial<Omit<IMakeRequest, 'body'>> }
-  ): Promise<IRequestSuccess<TResponse>> => {
-    const { requestConfig, ...otherOptions } = options ?? {};
-    return mutation.mutateAsync({ data, requestConfig }, otherOptions);
+  ): Promise<IRequestSuccess<TResponse> | undefined> => {
+    if (!isFutureMutationsPaused) {
+      const { requestConfig, ...otherOptions } = options ?? {};
+      return mutation.mutateAsync({ data, requestConfig }, otherOptions);
+    } else {
+      setRequestPayload({ data, options });
+      return undefined;
+    }
   };
 
-  return { post, uploadProgressPercent, ...mutation };
+  useEffect(() => {
+    if (!isFutureMutationsPaused && requestPayload) {
+      post(requestPayload.data, requestPayload.options);
+      setRequestPayload(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFutureMutationsPaused]);
+
+  return { post, uploadProgressPercent, ...mutation, isLoading: mutation.isLoading || isFutureMutationsPaused };
 };

package/src/stores/index.ts

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

package/src/stores/usePauseFutureRequests.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+
+export interface PauseFutureRequest {
+  isFutureQueriesPaused: boolean;
+  isFutureMutationsPaused: boolean;
+
+  pauseFutureMutation: (status: boolean) => void;
+  pauseFutureQueries: (status: boolean) => void;
+}
+
+export const usePauseFutureRequests = create<PauseFutureRequest>((set) => {
+  const pauseFutureQueries = (status: boolean) => {
+    return set({ isFutureQueriesPaused: status });
+  };
+  const pauseFutureMutation = (status: boolean) => {
+    return set({ isFutureQueriesPaused: status });
+  };
+
+  return {
+    isFutureMutationsPaused: false,
+    isFutureQueriesPaused: false,
+    pauseFutureQueries,
+    pauseFutureMutation,
+  };
+});