@ventlio/tanstack-query 0.6.0 → 0.6.1

package/dist/src/queries/useDeleteRequest.js

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { useStore } from '../../node_modules/@tanstack/react-store/dist/esm/index.js';
 import { useState, useMemo, useEffect } from 'react';
 import 'url-search-params-polyfill';
@@ -13,11 +13,9 @@ import { HttpMethod } from '../request/request.enum.js';
 
 const useDeleteRequest = (deleteOptions) => {
     const { baseUrl, headers } = deleteOptions ?? {};
-    const [requestPath, setRequestPath] = useState('');
-    const [options, setOptions] = useState();
     const { headerProvider } = useStore(bootStore);
     const [requestPayload, setRequestPayload] = useState();
-    const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
+    const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
     const storeHeaders = useHeaderStore((state) => state.headers);
     // Get headers from both the store and the headerProvider (if configured)
@@ -25,74 +23,55 @@ const useDeleteRequest = (deleteOptions) => {
         const providerHeaders = headerProvider ? headerProvider() : undefined;
         return { ...providerHeaders, ...storeHeaders };
     }, [storeHeaders, headerProvider]);
-    const sendRequest = async (res, rej, queryKey) => {
-        const [url] = queryKey;
-        const requestUrl = (url ?? requestPath);
+    const sendRequest = async (path) => {
         const requestOptions = {
-            path: requestUrl,
+            path,
             headers: { ...globalHeaders, ...headers },
             baseURL: baseUrl ?? API_URL,
             method: HttpMethod.DELETE,
             timeout: TIMEOUT,
         };
-        // let deleteResponse: IRequestError | IRequestSuccess<TResponse>;
-        // if (middleware) {
-        //   // perform global middleware
-        //   deleteResponse = await middleware(
-        //     async (middlewareOptions) =>
-        //       await makeRequest<TResponse>(
-        //         middlewareOptions ? { ...requestOptions, ...middlewareOptions } : requestOptions
-        //       ),
-        //     {
-        //       path: requestUrl,
-        //       baseUrl: baseUrl ?? API_URL,
-        //     }
-        //   );
-        // } else {
         const deleteResponse = await makeRequest(requestOptions);
-        // }
         if (deleteResponse.status) {
-            res(deleteResponse);
+            return deleteResponse;
         }
         else {
-            rej(deleteResponse);
+            throw deleteResponse;
         }
     };
-    const query = useQuery({
-        queryKey: [requestPath, {}],
-        queryFn: ({ queryKey }) => new Promise((res, rej) => sendRequest(res, rej, queryKey)),
-        enabled: false,
-        ...options,
+    // Use mutation instead of query for DELETE operations
+    const mutation = useMutation({
+        mutationFn: async ({ path }) => sendRequest(path),
     });
-    const updatedPathAsync = async (link) => {
-        return setRequestPath(link);
-    };
-    const setOptionsAsync = async (fetchOptions) => {
-        return setOptions(fetchOptions);
-    };
-    const destroy = async (link, internalDeleteOptions) => {
-        if (!isFutureQueriesPaused) {
-            // set enabled to be true for every delete
-            internalDeleteOptions = internalDeleteOptions
-                ? { ...internalDeleteOptions, queryKey: [link, {}], enabled: true }
-                : { queryKey: [link, {}], enabled: true };
-            await setOptionsAsync(internalDeleteOptions);
-            await updatedPathAsync(link);
-            return query.data;
+    /**
+     * Perform a DELETE request to the specified path
+     * @param path - The API path to send the DELETE request to
+     * @param options - Optional mutation options (onSuccess, onError, etc.)
+     */
+    const destroy = async (path, options) => {
+        if (!isFutureMutationsPaused) {
+            return mutation.mutateAsync({ path }, options);
         }
         else {
-            setRequestPayload({ link, internalDeleteOptions });
+            setRequestPayload({ path, options });
             return undefined;
         }
     };
+    // Resume paused requests when mutations are unpaused
     useEffect(() => {
-        if (!isFutureQueriesPaused && requestPayload) {
-            destroy(requestPayload.link, requestPayload.internalDeleteOptions);
+        if (!isFutureMutationsPaused && requestPayload) {
+            destroy(requestPayload.path, requestPayload.options);
             setRequestPayload(undefined);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFutureQueriesPaused]);
-    return { destroy, ...query, isLoading: query.isLoading || isFutureQueriesPaused };
+    }, [isFutureMutationsPaused]);
+    return {
+        destroy,
+        ...mutation,
+        isLoading: mutation.isPending || isFutureMutationsPaused,
+        // For backward compatibility - mutations don't have initial loading state
+        isInitialLoading: false,
+    };
 };
 
 export { useDeleteRequest };

package/dist/src/queries/useDeleteRequest.js.map

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

package/dist/src/queries/useGetRequest.js

@@ -1,5 +1,5 @@
 import { useQueryClient, useQuery } from '@tanstack/react-query';
-import { useState, useMemo, useEffect, startTransition } from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
 import 'url-search-params-polyfill';
 import { bootStore } from '../config/bootStore.js';
 import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
@@ -16,7 +16,6 @@ import '../request/request.enum.js';
  */
 const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, paginationConfig, }) => {
     const [requestPath, setRequestPath] = useState(path);
-    const [options, setOptions] = useState(queryOptions);
     const [page, setPage] = useState(1);
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
     const { middleware, pagination: globalPaginationConfig, headerProvider } = useStore(bootStore);
@@ -28,19 +27,17 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
         // Merge: store headers take precedence over provider headers
         return { ...providerHeaders, ...storeHeaders };
     }, [storeHeaders, headerProvider]);
-    const [requestPayload, setRequestPayload] = useState();
     const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
-    let queryClient = useQueryClient();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    queryClient = useMemo(() => queryClient, []);
+    const queryClient = useQueryClient();
     // Merge global and local pagination config
     const pagination = useMemo(() => ({
         ...globalPaginationConfig,
         ...paginationConfig,
     }), [globalPaginationConfig, paginationConfig]);
-    const sendRequest = async (res, rej, queryKey) => {
-        const [url] = queryKey;
-        const requestUrl = (url ?? requestPath);
+    /**
+     * Core request function that makes the actual HTTP request
+     */
+    const executeRequest = useCallback(async (requestUrl) => {
         const requestOptions = {
             path: requestUrl,
             headers: { ...globalHeaders, ...headers },
@@ -67,26 +64,32 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
             getResponse = await makeRequest(requestOptions);
         }
         if (getResponse.status) {
-            res(getResponse);
+            return getResponse;
         }
         else {
-            rej(getResponse);
+            throw getResponse;
         }
-    };
+    }, [globalHeaders, headers, baseUrl, API_URL, TIMEOUT, middleware]);
+    // The declarative query - only runs when load is true
     const query = useQuery({
         queryKey: [requestPath, {}],
-        queryFn: ({ queryKey }) => new Promise((res, rej) => sendRequest(res, rej, queryKey)),
-        enabled: load && !isFutureQueriesPaused,
-        ...options,
+        queryFn: async ({ queryKey }) => {
+            const [url] = queryKey;
+            return executeRequest(url);
+        },
+        // Only enable when load is explicitly true AND queries aren't paused
+        enabled: load === true && !isFutureQueriesPaused,
+        ...queryOptions,
     });
+    // Update request path when prop changes
     useEffect(() => {
-        if (path) {
+        if (path && path !== requestPath) {
             setRequestPath(path);
         }
-    }, [path]);
+    }, [path, requestPath]);
+    // Track query key for external reference
     useEffect(() => {
         if (keyTracker) {
-            // set expiration time for the tracker
             queryClient.setQueryDefaults([keyTracker], {
                 staleTime: Infinity,
             });
@@ -96,8 +99,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
     /**
      * Extract pagination data from response using configured extractor
      */
-    const getPaginationData = (response) => {
-        // Use the configured pagination extractor or fall back to default
+    const getPaginationData = useCallback((response) => {
         const extractPagination = pagination.extractPagination ||
             ((res) => {
                 if ('pagination' in res.data) {
@@ -106,90 +108,90 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
                 return undefined;
             });
         return extractPagination(response);
-    };
+    }, [pagination.extractPagination]);
+    /**
+     * Construct a pagination URL using the configured builder
+     */
+    const constructPaginationLink = useCallback((link, pageNumber) => {
+        const buildPaginationUrl = pagination.buildPaginationUrl ||
+            ((url, targetPage) => {
+                const [pathname, queryString] = url.split('?');
+                const queryParams = new URLSearchParams(queryString || '');
+                const pageParamName = pagination.pageParamName || 'page';
+                queryParams.set(pageParamName, String(targetPage));
+                return pathname + '?' + queryParams.toString();
+            });
+        return buildPaginationUrl(link, pageNumber);
+    }, [pagination.buildPaginationUrl, pagination.pageParamName]);
     /**
      * Navigate to the next page if available
      */
-    const nextPage = () => {
-        // The linter thinks query.data is always falsy, but we know it can be defined after a successful query
-        // Let's restructure to avoid the conditional
-        const paginationData = query.data && getPaginationData(query.data);
+    const nextPage = useCallback(() => {
+        const data = query.data;
+        if (!data)
+            return;
+        const paginationData = getPaginationData(data);
         if (!paginationData)
             return;
         if (paginationData.next_page !== paginationData.current_page &&
             paginationData.next_page > paginationData.current_page) {
-            setRequestPath(constructPaginationLink(requestPath, paginationData.next_page));
+            const newPath = constructPaginationLink(requestPath, paginationData.next_page);
+            setRequestPath(newPath);
+            setPage(paginationData.next_page);
         }
-    };
+    }, [query.data, getPaginationData, constructPaginationLink, requestPath]);
     /**
      * Navigate to the previous page if available
      */
-    const prevPage = () => {
-        // The linter thinks query.data is always falsy, but we know it can be defined after a successful query
-        // Let's restructure to avoid the conditional
-        const paginationData = query.data && getPaginationData(query.data);
+    const prevPage = useCallback(() => {
+        const data = query.data;
+        if (!data)
+            return;
+        const paginationData = getPaginationData(data);
         if (!paginationData)
             return;
         if (paginationData.previous_page !== paginationData.current_page &&
             paginationData.previous_page < paginationData.current_page) {
-            setRequestPath(constructPaginationLink(requestPath, paginationData.previous_page));
+            const newPath = constructPaginationLink(requestPath, paginationData.previous_page);
+            setRequestPath(newPath);
+            setPage(paginationData.previous_page);
         }
-    };
+    }, [query.data, getPaginationData, constructPaginationLink, requestPath]);
     /**
-     * Construct a pagination URL using the configured builder
+     * Navigate to a specific page
      */
-    const constructPaginationLink = (link, pageNumber) => {
-        // Use the configured pagination URL builder or fall back to default
-        const buildPaginationUrl = pagination.buildPaginationUrl ||
-            ((url, page) => {
-                const [pathname, queryString] = url.split('?');
-                const queryParams = new URLSearchParams(queryString || '');
-                const pageParamName = pagination.pageParamName || 'page';
-                const oldPage = Number(queryParams.get(pageParamName));
-                queryParams.set(pageParamName, String(page));
-                const newUrl = pathname + '?' + queryParams.toString();
-                // only update page when pagination number changed
-                if (oldPage !== pageNumber) {
-                    setPage(pageNumber);
-                }
-                return newUrl;
-            });
-        return buildPaginationUrl(link, pageNumber);
-    };
+    const gotoPage = useCallback((pageNumber) => {
+        const newPath = constructPaginationLink(requestPath, pageNumber);
+        setRequestPath(newPath);
+        setPage(pageNumber);
+    }, [constructPaginationLink, requestPath]);
     /**
-     * Navigate to a specific page
+     * Imperative GET request - fetches data from a dynamic URL
+     * Uses queryClient.fetchQuery for proper caching and deduplication
+     *
+     * @param url - The URL to fetch from
+     * @param fetchOptions - Optional query options (staleTime, gcTime, etc.)
+     * @returns Promise resolving to the response data
      */
-    const gotoPage = (pageNumber) => {
-        setRequestPath(constructPaginationLink(requestPath, pageNumber));
-    };
-    const updatedPathAsync = async (link) => {
-        startTransition(() => {
-            setRequestPath(link);
-        });
-    };
-    const setOptionsAsync = async (fetchOptions) => {
-        startTransition(() => {
-            setOptions(fetchOptions);
-        });
-    };
-    const get = async (link, fetchOptions) => {
-        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);
+    const get = useCallback(async (url, fetchOptions) => {
+        if (isFutureQueriesPaused) {
+            throw new Error('Queries are currently paused');
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFutureQueriesPaused]);
+        // Use fetchQuery for imperative fetching - this properly handles caching
+        const result = await queryClient.fetchQuery({
+            queryKey: [url, {}],
+            queryFn: () => executeRequest(url),
+            staleTime: fetchOptions?.staleTime,
+            gcTime: fetchOptions?.gcTime,
+        });
+        return result;
+    }, [queryClient, executeRequest, isFutureQueriesPaused]);
+    /**
+     * Refetch the current query with the existing path
+     */
+    const refetch = useCallback(() => {
+        return query.refetch();
+    }, [query]);
     return {
         ...query,
         isLoading: query.isLoading || isFutureQueriesPaused,
@@ -199,10 +201,11 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
         get,
         gotoPage,
         page,
+        refetch,
         queryKey: [requestPath, {}],
-        // Add pagination data accessor - restructured to avoid linter error
-        getPaginationData: function () {
-            return query.data ? getPaginationData(query.data) : undefined;
+        getPaginationData: () => {
+            const data = query.data;
+            return data ? getPaginationData(data) : undefined;
         },
     };
 };

package/dist/src/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/src/queries/usePatchRequest.js

@@ -7,7 +7,6 @@ import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
 import '../stores/useBaseUrlStore.js';
 import { useHeaderStore } from '../stores/useHeaderStore.js';
 import { usePauseFutureRequests } from '../stores/usePauseFutureRequests.js';
-import { scrollToTop } from '../helpers/scrollToTop.js';
 import { useUploadProgress } from '../hooks/useUploadProgress.js';
 import 'axios';
 import { makeRequest } from '../request/make-request.js';
@@ -16,7 +15,7 @@ import { HttpMethod } from '../request/request.enum.js';
 const usePatchRequest = ({ path, baseUrl, headers }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
     const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
-    const { context, headerProvider } = useStore(bootStore);
+    const { headerProvider } = useStore(bootStore);
     const storeHeaders = useHeaderStore((state) => state.headers);
     // Get headers from both the store and the headerProvider (if configured)
     const globalHeaders = useMemo(() => {
@@ -55,17 +54,9 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
         const patchResponse = await makeRequest(requestOptions);
         // }
         if (patchResponse.status) {
-            // scroll to top after success
-            if (context !== 'app') {
-                scrollToTop();
-            }
             res(patchResponse);
         }
         else {
-            // scroll to top after error
-            if (context !== 'app') {
-                scrollToTop();
-            }
             rej(patchResponse);
         }
     };

package/dist/src/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/src/queries/usePostRequest.js

@@ -8,7 +8,6 @@ import { usePauseFutureRequests } from '../stores/usePauseFutureRequests.js';
 import { useReactNativeEnv } from '../config/useReactNativeEnv.js';
 import { useStore } from '../../node_modules/@tanstack/react-store/dist/esm/index.js';
 import { useMemo, 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';
@@ -16,7 +15,7 @@ import { HttpMethod } from '../request/request.enum.js';
 
 const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelectors, }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
-    const { context, headerProvider } = useStore(bootStore);
+    const { headerProvider } = useStore(bootStore);
     const storeHeaders = useHeaderStore((state) => state.headers);
     // Get headers from both the store and the headerProvider (if configured)
     // headerProvider allows reading from cookies/localStorage synchronously
@@ -66,17 +65,9 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
         const postResponse = await makeRequest(requestOptions);
         // }
         if (postResponse.status) {
-            // scroll to top after success
-            if (context !== 'app') {
-                scrollToTop();
-            }
             res(postResponse);
         }
         else {
-            // scroll to top after error
-            if (context !== 'app') {
-                scrollToTop();
-            }
             rej(postResponse);
         }
     };

package/dist/src/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/package.json

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

package/src/helpers/index.ts

@@ -1,3 +1,2 @@
 export { result } from './result';
-export * from './scrollToTop';
 export * from './timeFuncs';

package/src/queries/useDeleteRequest.ts

@@ -1,5 +1,5 @@
-import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
-import { useQuery } from '@tanstack/react-query';
+import type { MutateOptions } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { useStore } from '@tanstack/react-store';
 import { useEffect, useMemo, useState } from 'react';
 import { useEnvironmentVariables } from '../config';
@@ -11,13 +11,11 @@ import type { DefaultRequestOptions } from './queries.interface';
 
 export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOptions) => {
   const { baseUrl, headers } = deleteOptions ?? {};
-  const [requestPath, setRequestPath] = useState<string>('');
-  const [options, setOptions] = useState<any>();
 
   const { headerProvider } = useStore(bootStore);
-  const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+  const [requestPayload, setRequestPayload] = useState<{ path: string; options?: any }>();
 
-  const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
+  const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
@@ -29,90 +27,60 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
     return { ...providerHeaders, ...storeHeaders };
   }, [storeHeaders, headerProvider]);
 
-  const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, queryKey: QueryKey) => {
-    const [url] = queryKey;
-    const requestUrl = (url ?? requestPath) as string;
-
+  const sendRequest = async (path: string): Promise<IRequestSuccess<TResponse>> => {
     const requestOptions = {
-      path: requestUrl,
+      path,
       headers: { ...globalHeaders, ...headers },
       baseURL: baseUrl ?? API_URL,
       method: HttpMethod.DELETE,
       timeout: TIMEOUT,
     };
 
-    // let deleteResponse: IRequestError | IRequestSuccess<TResponse>;
-    // if (middleware) {
-    //   // perform global middleware
-    //   deleteResponse = await middleware(
-    //     async (middlewareOptions) =>
-    //       await makeRequest<TResponse>(
-    //         middlewareOptions ? { ...requestOptions, ...middlewareOptions } : requestOptions
-    //       ),
-    //     {
-    //       path: requestUrl,
-    //       baseUrl: baseUrl ?? API_URL,
-    //     }
-    //   );
-    // } else {
     const deleteResponse = await makeRequest<TResponse>(requestOptions);
-    // }
 
     if (deleteResponse.status) {
-      res(deleteResponse as IRequestSuccess<TResponse>);
+      return deleteResponse as IRequestSuccess<TResponse>;
     } else {
-      rej(deleteResponse);
+      throw deleteResponse;
     }
   };
 
-  const query = useQuery<any, any, IRequestSuccess<TResponse>>({
-    queryKey: [requestPath, {}],
-    queryFn: ({ queryKey }) =>
-      new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => sendRequest(res, rej, queryKey)),
-    enabled: false,
-    ...options,
+  // Use mutation instead of query for DELETE operations
+  const mutation = useMutation<IRequestSuccess<TResponse>, IRequestError, { path: string }>({
+    mutationFn: async ({ path }) => sendRequest(path),
   });
 
-  const updatedPathAsync = async (link: string) => {
-    return setRequestPath(link);
-  };
-
-  const setOptionsAsync = async (fetchOptions: any) => {
-    return setOptions(fetchOptions);
-  };
-
+  /**
+   * Perform a DELETE request to the specified path
+   * @param path - The API path to send the DELETE request to
+   * @param options - Optional mutation options (onSuccess, onError, etc.)
+   */
   const destroy = async (
-    link: string,
-    internalDeleteOptions?: UseQueryOptions<
-      IRequestSuccess<TResponse | undefined>,
-      IRequestError,
-      IRequestSuccess<TResponse | undefined>,
-      Array<any>
-    > & { cached?: boolean }
+    path: string,
+    options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, { path: string }, unknown>
   ): Promise<IRequestSuccess<TResponse> | undefined> => {
-    if (!isFutureQueriesPaused) {
-      // set enabled to be true for every delete
-      internalDeleteOptions = internalDeleteOptions
-        ? { ...internalDeleteOptions, queryKey: [link, {}], enabled: true }
-        : { queryKey: [link, {}], enabled: true };
-
-      await setOptionsAsync(internalDeleteOptions);
-      await updatedPathAsync(link);
-
-      return query.data;
+    if (!isFutureMutationsPaused) {
+      return mutation.mutateAsync({ path }, options);
     } else {
-      setRequestPayload({ link, internalDeleteOptions });
+      setRequestPayload({ path, options });
       return undefined;
     }
   };
 
+  // Resume paused requests when mutations are unpaused
   useEffect(() => {
-    if (!isFutureQueriesPaused && requestPayload) {
-      destroy(requestPayload.link, requestPayload.internalDeleteOptions);
+    if (!isFutureMutationsPaused && requestPayload) {
+      destroy(requestPayload.path, requestPayload.options);
       setRequestPayload(undefined);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isFutureQueriesPaused]);
-
-  return { destroy, ...query, isLoading: (query.isLoading as boolean) || isFutureQueriesPaused };
+  }, [isFutureMutationsPaused]);
+
+  return {
+    destroy,
+    ...mutation,
+    isLoading: mutation.isPending || isFutureMutationsPaused,
+    // For backward compatibility - mutations don't have initial loading state
+    isInitialLoading: false,
+  };
 };