@ventlio/tanstack-query 0.3.1 → 0.3.3

package/dist/queries/useGetRequest.js

@@ -7,6 +7,7 @@ import { useQueryHeaders } from '../config/useQueryHeaders.js';
 import 'axios';
 import { makeRequest } from '../request/make-request.js';
 import '../request/request.enum.js';
+import { usePauseFutureRequests } from '../stores/usePauseFutureRequests.js';
 
 const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
     const [requestPath, setRequestPath] = useState(path);
@@ -15,6 +16,8 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
     const { getHeaders } = useQueryHeaders();
     const { options: queryConfigOptions } = useQueryConfig();
+    const [requestPayload, setRequestPayload] = useState();
+    const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
     let queryClient = useQueryClient();
     // eslint-disable-next-line react-hooks/exhaustive-deps
     queryClient = useMemo(() => queryClient, []);
@@ -52,7 +55,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
         }
     };
     const query = useQuery([requestPath, {}], ({ queryKey }) => new Promise((res, rej) => sendRequest(res, rej, queryKey)), {
-        enabled: load,
+        enabled: load && !isFutureQueriesPaused,
         ...options,
     });
     useEffect(() => {
@@ -112,12 +115,26 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
         });
     };
     const get = async (link, fetchOptions) => {
-        await setOptionsAsync(fetchOptions);
-        await updatedPathAsync(link);
-        return query.data;
+        if (!isFutureQueriesPaused) {
+            await setOptionsAsync(fetchOptions);
+            await updatedPathAsync(link);
+            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/dist/queries/useGetRequest.js.map

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

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.3",
   "license": "MIT",
   "main": "dist/index.js",
   "contributors": [
@@ -48,6 +48,7 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",
     "@tanstack/react-query": "^4.26.1",
+    "@testing-library/react": "^13.1",
     "@testing-library/react-hooks": "^8.0.1",
     "@types/axios": "^0.14.0",
     "@types/jest": "^29.5.1",
@@ -88,6 +89,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/__tests__/queries/usePostRequest.spec.tsx

@@ -0,0 +1,84 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook } from '@testing-library/react';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import type { ReactNode } from 'react';
+import React from 'react';
+import { useGetRequest } from '../../queries';
+
+const mockAxios = new MockAdapter(axios);
+
+describe('usePostRequest', () => {
+  const path = '/test';
+  const postData = { name: 'John Doe' };
+  const response = { id: 123, name: 'John Doe' };
+
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <QueryClientProvider client={new QueryClient()}>{children}</QueryClientProvider>
+  );
+  beforeEach(() => {
+    mockAxios.reset();
+  });
+
+  it('should return post function and mutation object', () => {
+    const { result } = renderHook(() => useGetRequest<{ id: number; name: string }>({ path, load: false }), {
+      wrapper,
+    });
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isSuccess).toBe(false);
+    expect(result.current.isError).toBe(false);
+  });
+
+  // it('should make post request and return response data', async () => {
+  //   mockAxios.onPost(path).reply(200, response);
+
+  //   const { result, waitForNextUpdate } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
+
+  //   const responsePromise = result.current.post(postData);
+
+  //   expect(result.current.isLoading).toBe(true);
+
+  //   await waitForNextUpdate();
+
+  //   expect(result.current.isLoading).toBe(false);
+  //   expect(result.current.isSuccess).toBe(true);
+  //   expect(result.current.data).toEqual(response);
+  //   expect(await responsePromise).toEqual(response);
+  // });
+
+  // it('should make post request and return error', async () => {
+  //   const errorMessage = 'Request failed with status code 500';
+  //   mockAxios.onPost(path).reply(500, { message: errorMessage });
+
+  //   const { result, waitForNextUpdate } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
+
+  //   const responsePromise = result.current.post(postData);
+
+  //   expect(result.current.isLoading).toBe(true);
+
+  //   await waitForNextUpdate();
+
+  //   expect(result.current.isLoading).toBe(false);
+  //   expect(result.current.isError).toBe(true);
+  //   expect(result.current.error?.message).toBe(errorMessage);
+
+  //   await expect(responsePromise).rejects.toEqual({
+  //     message: errorMessage,
+  //   });
+  // });
+
+  // it('should make post request with FormData', async () => {
+  //   const formData = new FormData();
+  //   formData.append('name', 'John Doe');
+  //   mockAxios.onPost(path).reply(200, response);
+
+  //   const { result } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path, isFormData: true }));
+
+  //   const responsePromise = result.current.post(formData);
+
+  //   expect(result.current.isLoading).toBe(true);
+
+  //   await expect(responsePromise).resolves.toEqual(response);
+  // });
+});

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 { HttpMethod, 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();
 
@@ -29,6 +33,7 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
       path: requestUrl,
       headers: { ...globalHeaders, ...headers },
       baseURL: baseUrl ?? API_URL,
+      method: HttpMethod.DELETE,
       timeout: TIMEOUT,
     };
 
@@ -75,15 +80,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,