@ventlio/tanstack-query 0.6.0 → 0.6.1

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,7 +33,6 @@ 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();
@@ -49,14 +48,9 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     return { ...providerHeaders, ...storeHeaders };
   }, [storeHeaders, headerProvider]);
 
-  const [requestPayload, setRequestPayload] = useState<Record<any, any>>();
-
   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(
@@ -67,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]);
@@ -141,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

@@ -4,7 +4,6 @@ import { useStore } from '@tanstack/react-store';
 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,7 +13,7 @@ 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 { context, headerProvider } = useStore(bootStore);
+  const { headerProvider } = useStore(bootStore);
 
   const storeHeaders = useHeaderStore((state) => state.headers);
 
@@ -61,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);
     }
   };

package/src/queries/usePostRequest.ts

@@ -5,7 +5,6 @@ import { useEnvironmentVariables, useReactNativeEnv } from '../config';
 import { useStore } from '@tanstack/react-store';
 import { useEffect, useMemo, useState } from 'react';
 import { bootStore } from '../config/bootStore';
-import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
 import type { IMakeRequest, IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
@@ -25,7 +24,7 @@ export const usePostRequest = <TResponse>({
 } & DefaultRequestOptions) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
-  const { context, headerProvider } = useStore(bootStore);
+  const { headerProvider } = useStore(bootStore);
 
   const storeHeaders = useHeaderStore((state) => state.headers);
 
@@ -88,17 +87,8 @@ export const usePostRequest = <TResponse>({
     // }
 
     if (postResponse.status) {
-      // scroll to top after success
-
-      if (context !== 'app') {
-        scrollToTop();
-      }
       res(postResponse as IRequestSuccess<TResponse>);
     } else {
-      // scroll to top after error
-      if (context !== 'app') {
-        scrollToTop();
-      }
       rej(postResponse);
     }
   };

package/src/queries/usePutRequest.ts

@@ -4,7 +4,6 @@ import { useStore } from '@tanstack/react-store';
 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,7 +13,7 @@ import type { DefaultRequestOptions } from './queries.interface';
 export const usePutRequest = <TResponse>({ path, baseUrl, headers }: { path: string } & DefaultRequestOptions) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
   const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
-  const { context, headerProvider } = useStore(bootStore);
+  const { headerProvider } = useStore(bootStore);
 
   const storeHeaders = useHeaderStore((state) => state.headers);
 
@@ -57,16 +56,8 @@ export const usePutRequest = <TResponse>({ path, baseUrl, headers }: { path: str
     const putResponse = await makeRequest<TResponse>(requestOptions);
     // }
     if (putResponse.status) {
-      // scroll to top after success
-      if (context !== 'app') {
-        scrollToTop();
-      }
       res(putResponse as IRequestSuccess<TResponse>);
     } else {
-      // scroll to top after error
-      if (context !== 'app') {
-        scrollToTop();
-      }
       rej(putResponse);
     }
   };

package/dist/helpers/scrollToTop.d.ts

@@ -1 +0,0 @@
-export declare const scrollToTop: () => void;

package/dist/src/helpers/scrollToTop.js

@@ -1,9 +0,0 @@
-const scrollToTop = () => {
-    window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-    });
-};
-
-export { scrollToTop };
-//# sourceMappingURL=scrollToTop.js.map

package/dist/src/helpers/scrollToTop.js.map

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

package/src/helpers/scrollToTop.ts

@@ -1,6 +0,0 @@
-export const scrollToTop = () => {
-  window.scrollTo({
-    top: 0,
-    behavior: 'smooth',
-  });
-};