@ventlio/tanstack-query 0.6.0 → 0.6.1

package/dist/helpers/index.d.ts

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

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import 'url-search-params-polyfill';
-import require$$0, { useState, useMemo, useEffect, startTransition } from 'react';
+import require$$0, { useState, useMemo, useEffect, startTransition, useCallback } from 'react';
 import { create } from 'zustand';
-import { useQueryClient, useQuery, useInfiniteQuery, useMutation } from '@tanstack/react-query';
+import { useQueryClient, useMutation, useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import lodashSet from 'lodash.set';
 import axios from 'axios';
 
@@ -888,13 +888,6 @@ function result(object, path, defaultValue) {
     return current;
 }
 
-const scrollToTop = () => {
-    window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-    });
-};
-
 function getDateInFuture(days) {
     // Create a new Date object
     const date = new Date();
@@ -1295,11 +1288,9 @@ function getAppFiles(body, fileSelectors = []) {
 
 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)
@@ -1307,74 +1298,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,
+    };
 };
 
 const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
@@ -1497,7 +1469,6 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
  */
 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);
@@ -1509,19 +1480,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 },
@@ -1548,26 +1517,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,
             });
@@ -1577,8 +1552,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) {
@@ -1587,90 +1561,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 get = useCallback(async (url, fetchOptions) => {
+        if (isFutureQueriesPaused) {
+            throw new Error('Queries are currently paused');
+        }
+        // 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,
         });
-    };
-    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);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFutureQueriesPaused]);
+        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,
@@ -1680,10 +1654,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;
         },
     };
 };
@@ -1691,7 +1666,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
 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(() => {
@@ -1730,17 +1705,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);
         }
     };
@@ -1772,7 +1739,7 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
 
 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
@@ -1822,17 +1789,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);
         }
     };
@@ -1861,5 +1820,5 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
     return { post, uploadProgressPercent, ...mutation, isLoading: mutation.isPending || isFutureMutationsPaused };
 };
 
-export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, executeMiddlewareChain, getDateInFuture, makeRequest, result, scrollToTop, successTransformer, useBaseUrlStore, useDeleteRequest, useEnvironmentVariables, useGetInfiniteRequest, useGetRequest, useHeaderStore, useKeyTrackerModel, usePatchRequest, usePauseFutureRequests, usePostRequest, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery, useUploadProgress };
+export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, executeMiddlewareChain, getDateInFuture, makeRequest, result, successTransformer, useBaseUrlStore, useDeleteRequest, useEnvironmentVariables, useGetInfiniteRequest, useGetRequest, useHeaderStore, useKeyTrackerModel, usePatchRequest, usePauseFutureRequests, usePostRequest, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery, useUploadProgress };
 //# sourceMappingURL=index.mjs.map