@ventlio/tanstack-query 0.5.14 → 0.6.1

package/src/queries/useDeleteRequest.ts

@@ -1,7 +1,9 @@
-import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
-import { useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+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';
+import { bootStore } from '../config/bootStore';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
 import { useHeaderStore, usePauseFutureRequests } from '../stores';
@@ -9,103 +11,76 @@ 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 { middleware: middlewares } = useStore(bootStore);
-  // const [middleware] = middlewares as unknown as MiddlewareFunction[];
-  const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+  const { headerProvider } = useStore(bootStore);
+  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();
 
-  const globalHeaders = useHeaderStore((state) => state.headers);
+  const storeHeaders = useHeaderStore((state) => state.headers);
 
-  const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, queryKey: QueryKey) => {
-    const [url] = queryKey;
-    const requestUrl = (url ?? requestPath) as string;
+  // Get headers from both the store and the headerProvider (if configured)
+  const globalHeaders = useMemo(() => {
+    const providerHeaders = headerProvider ? headerProvider() : undefined;
+    return { ...providerHeaders, ...storeHeaders };
+  }, [storeHeaders, headerProvider]);
 
+  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,
+  };
 };

package/src/queries/useGetInfiniteRequest.ts

@@ -33,11 +33,17 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
   keyTracker?: string;
 } & DefaultRequestOptions) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
-  const globalHeaders = useHeaderStore((state) => state.headers);
-  const [requestPath, setRequestPath] = useState<string>(path);
+  const { headerProvider } = useStore(bootStore);
+  const storeHeaders = useHeaderStore((state) => state.headers);
+
+  // Get headers from both the store and the headerProvider (if configured)
+  const globalHeaders = useMemo(() => {
+    const providerHeaders = headerProvider ? headerProvider() : undefined;
+    return { ...providerHeaders, ...storeHeaders };
+  }, [storeHeaders, headerProvider]);
 
+  const [requestPath, setRequestPath] = useState<string>(path);
   const [options, setOptions] = useState<any>(queryOptions);
-  useStore(bootStore);
 
   const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
 

package/src/queries/useGetRequest.ts

@@ -1,5 +1,5 @@
-import { QueryKey, useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query';
-import { startTransition, useEffect, useMemo, useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useEnvironmentVariables } from '../config';
 
 import { useStore } from '@tanstack/react-store';
@@ -33,22 +33,24 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   };
 } & DefaultRequestOptions) => {
   const [requestPath, setRequestPath] = useState<string>(path);
-  const [options, setOptions] = useState<any>(queryOptions);
   const [page, setPage] = useState<number>(1);
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
-  const { middleware, pagination: globalPaginationConfig } = useStore(bootStore);
+  const { middleware, pagination: globalPaginationConfig, headerProvider } = useStore(bootStore);
 
-  const globalHeaders = useHeaderStore((state) => state.headers);
+  const storeHeaders = useHeaderStore((state) => state.headers);
 
-  const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
+  // Get headers from both the store and the headerProvider (if configured)
+  // headerProvider allows reading from cookies/localStorage synchronously
+  const globalHeaders = useMemo(() => {
+    const providerHeaders = headerProvider ? headerProvider() : undefined;
+    // Merge: store headers take precedence over provider headers
+    return { ...providerHeaders, ...storeHeaders };
+  }, [storeHeaders, headerProvider]);
 
   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(
@@ -59,73 +61,74 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     [globalPaginationConfig, paginationConfig]
   );
 
-  const sendRequest = async (
-    res: (
-      value: IRequestError | IRequestSuccess<TResponse> | PromiseLike<IRequestError | IRequestSuccess<TResponse>>
-    ) => void,
-    rej: (reason?: any) => void,
-    queryKey: QueryKey
-  ) => {
-    const [url] = queryKey;
-    const requestUrl = (url ?? requestPath) as string;
-
-    const requestOptions = {
-      path: requestUrl,
-      headers: { ...globalHeaders, ...headers },
-      baseURL: baseUrl ?? API_URL,
-      timeout: TIMEOUT,
-    };
-
-    // Create the final handler that makes the actual request
-    const finalHandler: MiddlewareNext<TResponse> = async (options) => {
-      const finalOptions = options ? { ...requestOptions, ...options } : requestOptions;
-      return await makeRequest<TResponse>(finalOptions);
-    };
-
-    let getResponse: IRequestError | IRequestSuccess<TResponse>;
-
-    // If middleware is available, execute the middleware chain
-    if (middleware && Array.isArray(middleware) && middleware.length > 0) {
-      const context: MiddlewareContext<TResponse> = {
-        baseUrl: baseUrl ?? API_URL,
+  /**
+   * Core request function that makes the actual HTTP request
+   */
+  const executeRequest = useCallback(
+    async (requestUrl: string): Promise<IRequestSuccess<TResponse>> => {
+      const requestOptions = {
         path: requestUrl,
-        options: requestOptions,
+        headers: { ...globalHeaders, ...headers },
+        baseURL: baseUrl ?? API_URL,
+        timeout: TIMEOUT,
       };
 
-      getResponse = await executeMiddlewareChain<TResponse>(middleware, context, finalHandler);
-    } else {
-      // Otherwise, just make the request directly
-      getResponse = await makeRequest<TResponse>(requestOptions);
-    }
+      // Create the final handler that makes the actual request
+      const finalHandler: MiddlewareNext<TResponse> = async (options) => {
+        const finalOptions = options ? { ...requestOptions, ...options } : requestOptions;
+        return await makeRequest<TResponse>(finalOptions);
+      };
 
-    if (getResponse.status) {
-      res(getResponse as IRequestSuccess<TResponse>);
-    } else {
-      rej(getResponse);
-    }
-  };
+      let getResponse: IRequestError | IRequestSuccess<TResponse>;
+
+      // If middleware is available, execute the middleware chain
+      if (middleware && Array.isArray(middleware) && middleware.length > 0) {
+        const context: MiddlewareContext<TResponse> = {
+          baseUrl: baseUrl ?? API_URL,
+          path: requestUrl,
+          options: requestOptions,
+        };
+
+        getResponse = await executeMiddlewareChain<TResponse>(middleware, context, finalHandler);
+      } else {
+        // Otherwise, just make the request directly
+        getResponse = await makeRequest<TResponse>(requestOptions);
+      }
+
+      if (getResponse.status) {
+        return getResponse as IRequestSuccess<TResponse>;
+      } else {
+        throw getResponse;
+      }
+    },
+    [globalHeaders, headers, baseUrl, API_URL, TIMEOUT, middleware]
+  );
 
-  const query = useQuery<any, any, IRequestSuccess<TResponse>>({
-    queryKey: [requestPath, {}],
-    queryFn: ({ queryKey }) =>
-      new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => sendRequest(res, rej, queryKey)),
-    enabled: load && !isFutureQueriesPaused,
-    ...options,
+  // The declarative query - only runs when load is true
+  const query = useQuery({
+    queryKey: [requestPath, {}] as const,
+    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,
       });
-
       queryClient.setQueryData([keyTracker], [requestPath, {}]);
     }
   }, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
@@ -133,142 +136,149 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   /**
    * Extract pagination data from response using configured extractor
    */
-  const getPaginationData = (response: IRequestSuccess<TResponse>): IPagination | undefined => {
-    // Use the configured pagination extractor or fall back to default
-    const extractPagination =
-      pagination.extractPagination ||
-      ((res) => {
-        if ('pagination' in res.data) {
-          return res.data.pagination as IPagination;
-        }
-        return undefined;
-      });
+  const getPaginationData = useCallback(
+    (response: IRequestSuccess<TResponse>): IPagination | undefined => {
+      const extractPagination =
+        pagination.extractPagination ||
+        ((res) => {
+          if ('pagination' in res.data) {
+            return res.data.pagination as IPagination;
+          }
+          return undefined;
+        });
+
+      return extractPagination(response);
+    },
+    [pagination.extractPagination]
+  );
 
-    return extractPagination(response);
-  };
+  /**
+   * Construct a pagination URL using the configured builder
+   */
+  const constructPaginationLink = useCallback(
+    (link: string, pageNumber: number) => {
+      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 as any).data && getPaginationData(query.data);
+  const nextPage = useCallback(() => {
+    const data = query.data as IRequestSuccess<TResponse> | undefined;
+    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 as any).data && getPaginationData(query.data);
+  const prevPage = useCallback(() => {
+    const data = query.data as IRequestSuccess<TResponse> | undefined;
+    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: string, pageNumber: number) => {
-    // 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: number) => {
+      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: number) => {
-    setRequestPath(constructPaginationLink(requestPath, pageNumber));
-  };
-
-  const updatedPathAsync = async (link: string) => {
-    startTransition(() => {
-      setRequestPath(link);
-    });
-  };
-
-  const setOptionsAsync = async (fetchOptions: any) => {
-    startTransition(() => {
-      setOptions(fetchOptions);
-    });
-  };
+  const get = useCallback(
+    async (
+      url: string,
+      fetchOptions?: {
+        staleTime?: number;
+        gcTime?: number;
+      }
+    ): Promise<IRequestSuccess<TResponse>> => {
+      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, {}] as const,
+        queryFn: () => executeRequest(url),
+        staleTime: fetchOptions?.staleTime,
+        gcTime: fetchOptions?.gcTime,
+      });
 
-  const get = async (
-    link: string,
-    fetchOptions?: UseQueryOptions<
-      IRequestSuccess<TResponse | undefined>,
-      IRequestError,
-      IRequestSuccess<TResponse | undefined>,
-      Array<any>
-    >
-  ): Promise<IRequestSuccess<TResponse> | undefined> => {
-    if (!isFutureQueriesPaused) {
-      await setOptionsAsync(fetchOptions);
-      await updatedPathAsync(link);
-
-      return query.data;
-    } else {
-      setRequestPayload({ link, fetchOptions });
-      return undefined;
-    }
-  };
+      return result;
+    },
+    [queryClient, executeRequest, isFutureQueriesPaused]
+  );
 
-  useEffect(() => {
-    if (!isFutureQueriesPaused && requestPayload) {
-      get(requestPayload.link, requestPayload.fetchOptions);
-      setRequestPayload(undefined);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isFutureQueriesPaused]);
+  /**
+   * Refetch the current query with the existing path
+   */
+  const refetch = useCallback(() => {
+    return query.refetch();
+  }, [query]);
 
   return {
     ...query,
-    isLoading: (query.isLoading as boolean) || isFutureQueriesPaused,
+    isLoading: query.isLoading || isFutureQueriesPaused,
     setRequestPath,
     nextPage,
     prevPage,
     get,
     gotoPage,
     page,
-    queryKey: [requestPath, {}],
-    // Add pagination data accessor - restructured to avoid linter error
-    getPaginationData: function () {
-      return (query as any).data ? getPaginationData(query.data) : undefined;
+    refetch,
+    queryKey: [requestPath, {}] as const,
+    getPaginationData: () => {
+      const data = query.data as IRequestSuccess<TResponse> | undefined;
+      return data ? getPaginationData(data) : undefined;
     },
   };
 };

package/src/queries/usePatchRequest.ts

@@ -1,10 +1,9 @@
 import type { MutateOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useStore } from '@tanstack/react-store';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useEnvironmentVariables } from '../config';
 import { bootStore } from '../config/bootStore';
-import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
 import { HttpMethod, makeRequest } from '../request';
 import type { IRequestError, IRequestSuccess } from '../request/request.interface';
@@ -14,12 +13,19 @@ 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 globalHeaders = useHeaderStore((state) => state.headers);
+  const { headerProvider } = useStore(bootStore);
+
+  const storeHeaders = useHeaderStore((state) => state.headers);
+
+  // Get headers from both the store and the headerProvider (if configured)
+  const globalHeaders = useMemo(() => {
+    const providerHeaders = headerProvider ? headerProvider() : undefined;
+    return { ...providerHeaders, ...storeHeaders };
+  }, [storeHeaders, headerProvider]);
 
   const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
 
   const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
-  const { context } = useStore(bootStore);
 
   const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, data: any) => {
     // get request headers
@@ -54,16 +60,8 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
     const patchResponse = await makeRequest<TResponse>(requestOptions);
     // }
     if (patchResponse.status) {
-      // scroll to top after success
-      if (context !== 'app') {
-        scrollToTop();
-      }
       res(patchResponse as IRequestSuccess<TResponse>);
     } else {
-      // scroll to top after error
-      if (context !== 'app') {
-        scrollToTop();
-      }
       rej(patchResponse);
     }
   };