@ventlio/tanstack-query 0.2.86 → 0.2.89

package/src/queries/useGetRequest.ts

@@ -1,8 +1,7 @@
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { startTransition, useEffect, useMemo, useState } from 'react';
-import type { RawAxiosRequestHeaders } from '../../node_modules/axios/index';
-import { useEnvironmentVariables, useQueryHeaders } from '../config';
+import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
 
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
@@ -21,12 +20,14 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   queryOptions?: TanstackQueryOption<TResponse>;
   keyTracker?: string;
 } & DefaultRequestOptions) => {
-  const [requestPath, updatePath] = useState<string>(path);
+  const [requestPath, setRequestPath] = useState<string>(path);
   const [options, setOptions] = useState<any>(queryOptions);
   const [page, setPage] = useState<number>(1);
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
   const { getHeaders } = useQueryHeaders();
+  const { options: queryConfigOptions, setConfig } = useQueryConfig();
+  const [queryConfig, setQueryConfig] = useState<{ link: string; fetchOptions: any }>();
 
   let queryClient = useQueryClient();
 
@@ -38,25 +39,38 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
       value: IRequestError | IRequestSuccess<TResponse> | PromiseLike<IRequestError | IRequestSuccess<TResponse>>
     ) => void,
     rej: (reason?: any) => void,
-    queryKey?: QueryKey
+    queryKey: QueryKey
   ) => {
     if (load) {
       // get request headers
-      const globalHeaders: RawAxiosRequestHeaders = getHeaders();
+      const globalHeaders = getHeaders();
 
-      const [url] = (queryKey ?? []) as string[];
+      const [url] = queryKey;
+      const requestUrl = (url ?? requestPath) as string;
 
-      const getResponse = await makeRequest<TResponse>({
-        path: url ?? requestPath,
+      const requestOptions = {
+        path: requestUrl,
         headers: { ...globalHeaders, ...headers },
         baseURL: baseUrl ?? API_URL,
         timeout: TIMEOUT,
-      });
+      };
 
-      if (getResponse.status) {
-        res(getResponse as IRequestSuccess<TResponse>);
+      let shouldContinue = true;
+
+      if (queryConfigOptions.queryMiddleware) {
+        shouldContinue = await queryConfigOptions.queryMiddleware({ queryKey, ...requestOptions });
+      }
+
+      if (shouldContinue) {
+        const getResponse = await makeRequest<TResponse>(requestOptions);
+
+        if (getResponse.status) {
+          res(getResponse as IRequestSuccess<TResponse>);
+        } else {
+          rej(getResponse);
+        }
       } else {
-        rej(getResponse);
+        rej(null);
       }
     } else {
       res(null as any);
@@ -75,27 +89,22 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
 
   useEffect(() => {
     if (path) {
-      updatePath(path);
+      setRequestPath(path);
     }
   }, [path]);
 
   useEffect(() => {
     if (keyTracker) {
-      // set expiration time for the tracker
-      queryClient.setQueryDefaults([keyTracker], {
-        cacheTime: Infinity,
-        staleTime: Infinity,
-      });
-
-      queryClient.setQueryData([keyTracker], [requestPath, {}]);
+      setConfig({ [keyTracker]: [requestPath, {}] });
     }
-  }, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [keyTracker, requestPath]);
 
   const nextPage = () => {
     if (query.data?.data.pagination) {
       const pagination: IPagination = query.data.data.pagination;
       if (pagination.next_page !== pagination.current_page && pagination.next_page > pagination.current_page) {
-        updatePath(constructPaginationLink(requestPath, pagination.next_page));
+        setRequestPath(constructPaginationLink(requestPath, pagination.next_page));
       }
     }
   };
@@ -104,7 +113,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     if (query.data?.data.pagination) {
       const pagination: IPagination = query.data.data.pagination;
       if (pagination.previous_page !== pagination.current_page && pagination.previous_page < pagination.current_page) {
-        updatePath(constructPaginationLink(requestPath, pagination.previous_page));
+        setRequestPath(constructPaginationLink(requestPath, pagination.previous_page));
       }
     }
   };
@@ -127,12 +136,12 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   };
 
   const gotoPage = (pageNumber: number) => {
-    updatePath(constructPaginationLink(requestPath, pageNumber));
+    setRequestPath(constructPaginationLink(requestPath, pageNumber));
   };
 
   const updatedPathAsync = async (link: string) => {
     startTransition(() => {
-      updatePath(link);
+      setRequestPath(link);
     });
   };
 
@@ -151,15 +160,30 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
       Array<any>
     >
   ): Promise<IRequestSuccess<TResponse> | undefined> => {
-    await setOptionsAsync(fetchOptions);
-    await updatedPathAsync(link);
+    if (!queryConfigOptions.pauseFutureQueries) {
+      await setOptionsAsync(fetchOptions);
+      await updatedPathAsync(link);
 
-    return query.data;
+      return query.data;
+    } else {
+      setQueryConfig({ link, fetchOptions });
+
+      return undefined;
+    }
   };
 
+  useEffect(() => {
+    if (!queryConfigOptions.pauseFutureQueries && queryConfig) {
+      get(queryConfig.link, queryConfig.fetchOptions);
+      setQueryConfig(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [queryConfigOptions.pauseFutureQueries]);
+
   return {
     ...query,
-    updatePath,
+    isLoading: query.isLoading || queryConfigOptions.pauseFutureQueries,
+    setRequestPath,
     nextPage,
     prevPage,
     get,

package/src/queries/usePatchRequest.ts

@@ -1,6 +1,6 @@
 import type { MutateOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
-import type { RawAxiosRequestHeaders } from 'axios';
+import { useEffect, useState } from 'react';
 import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
 import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
@@ -11,6 +11,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 [mutationConfig, setMutationConfig] = useState<{ data: any; options: any }>();
 
   const { getHeaders } = useQueryHeaders();
 
@@ -18,9 +19,9 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
 
   const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, data: any) => {
     // get request headers
-    const globalHeaders: RawAxiosRequestHeaders = getHeaders();
+    const globalHeaders = getHeaders();
 
-    const patchResponse = await makeRequest<TResponse>({
+    const requestOptions = {
       path: path,
       body: data,
       method: HttpMethod.PATCH,
@@ -28,20 +29,34 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
       baseURL: baseUrl ?? API_URL,
       timeout: TIMEOUT,
       onUploadProgress,
-    });
+    };
 
-    if (patchResponse.status) {
-      // scroll to top after success
-      if (config.options?.context !== 'app') {
-        scrollToTop();
+    let shouldContinue = true;
+
+    if (config.options.mutationMiddleware) {
+      shouldContinue = await config.options.mutationMiddleware({
+        mutationKey: [path, { type: 'mutation' }],
+        ...requestOptions,
+      });
+    }
+
+    if (shouldContinue) {
+      const patchResponse = await makeRequest<TResponse>(requestOptions);
+      if (patchResponse.status) {
+        // scroll to top after success
+        if (config.options.context !== 'app') {
+          scrollToTop();
+        }
+        res(patchResponse as IRequestSuccess<TResponse>);
+      } else {
+        // scroll to top after error
+        if (config.options.context !== 'app') {
+          scrollToTop();
+        }
+        rej(patchResponse);
       }
-      res(patchResponse as IRequestSuccess<TResponse>);
     } else {
-      // scroll to top after error
-      if (config.options?.context !== 'app') {
-        scrollToTop();
-      }
-      rej(patchResponse);
+      rej(null);
     }
   };
 
@@ -50,15 +65,34 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
     (dataData: any) =>
       new Promise<IRequestSuccess<TResponse>>((res, rej) => {
         return sendRequest(res, rej, dataData);
-      })
+      }),
+    { mutationKey: [path, { type: 'mutation' }] }
   );
 
   const patch = async (
     data: any,
     options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined
-  ): Promise<IRequestSuccess<TResponse>> => {
-    return mutation.mutateAsync(data, options);
+  ): Promise<IRequestSuccess<TResponse> | undefined> => {
+    if (!config.options.pauseFutureMutations) {
+      return mutation.mutateAsync(data, options);
+    } else {
+      setMutationConfig({ data, options });
+      return undefined;
+    }
   };
 
-  return { patch, uploadProgressPercent, ...mutation };
+  useEffect(() => {
+    if (!config.options.pauseFutureMutations && mutationConfig) {
+      patch(mutationConfig.data, mutationConfig.options);
+      setMutationConfig(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config.options.pauseFutureMutations]);
+
+  return {
+    patch,
+    uploadProgressPercent,
+    ...mutation,
+    isLoading: mutation.isLoading || config.options.pauseFutureMutations,
+  };
 };

package/src/queries/usePostRequest.ts

@@ -2,7 +2,7 @@ import type { MutateOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
 import { useEnvironmentVariables, useQueryConfig, useQueryHeaders, useReactNativeEnv } from '../config';
 
-import type { RawAxiosRequestHeaders } from 'axios';
+import { useEffect, useState } from 'react';
 import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
 import type { IMakeRequest, IRequestError, IRequestSuccess } from '../request';
@@ -23,6 +23,7 @@ export const usePostRequest = <TResponse>({
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
   const config = useQueryConfig();
+  const [mutationConfig, setMutationConfig] = useState<{ data: any; options: any }>();
 
   const { getHeaders } = useQueryHeaders();
   const { isApp } = useReactNativeEnv();
@@ -34,13 +35,13 @@ export const usePostRequest = <TResponse>({
     postData: { data: any; requestConfig?: Partial<IMakeRequest> }
   ) => {
     // get request headers
-    const globalHeaders: RawAxiosRequestHeaders = getHeaders();
+    const globalHeaders = getHeaders();
 
     const { data, requestConfig } = postData;
 
     delete requestConfig?.body;
 
-    const postResponse = await makeRequest<TResponse>({
+    const requestOptions = {
       path,
       body: data,
       method: HttpMethod.POST,
@@ -54,21 +55,36 @@ export const usePostRequest = <TResponse>({
       },
       onUploadProgress,
       ...requestConfig,
-    });
+    };
 
-    if (postResponse.status) {
-      // scroll to top after success
+    let shouldContinue = true;
 
-      if (config.options?.context !== 'app') {
-        scrollToTop();
+    if (config.options.mutationMiddleware) {
+      shouldContinue = await config.options.mutationMiddleware({
+        mutationKey: [path, { type: 'mutation' }],
+        ...requestOptions,
+      });
+    }
+
+    if (shouldContinue) {
+      const postResponse = await makeRequest<TResponse>(requestOptions);
+
+      if (postResponse.status) {
+        // scroll to top after success
+
+        if (config.options.context !== 'app') {
+          scrollToTop();
+        }
+        res(postResponse as IRequestSuccess<TResponse>);
+      } else {
+        // scroll to top after error
+        if (config.options.context !== 'app') {
+          scrollToTop();
+        }
+        rej(postResponse);
       }
-      res(postResponse as IRequestSuccess<TResponse>);
     } else {
-      // scroll to top after error
-      if (config.options?.context !== 'app') {
-        scrollToTop();
-      }
-      rej(postResponse);
+      rej(null);
     }
   };
 
@@ -93,10 +109,23 @@ export const usePostRequest = <TResponse>({
       | { requestConfig?: Partial<Omit<IMakeRequest, 'body'>> }
       | undefined
     ) & { requestConfig?: Partial<Omit<IMakeRequest, 'body'>> }
-  ): Promise<IRequestSuccess<TResponse>> => {
-    const { requestConfig, ...otherOptions } = options ?? {};
-    return mutation.mutateAsync({ data, requestConfig }, otherOptions);
+  ): Promise<IRequestSuccess<TResponse> | undefined> => {
+    if (!config.options.pauseFutureMutations) {
+      const { requestConfig, ...otherOptions } = options ?? {};
+      return mutation.mutateAsync({ data, requestConfig }, otherOptions);
+    } else {
+      setMutationConfig({ data, options });
+      return undefined;
+    }
   };
 
+  useEffect(() => {
+    if (!config.options.pauseFutureMutations && mutationConfig) {
+      post(mutationConfig.data, mutationConfig.options);
+      setMutationConfig(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config.options.pauseFutureMutations]);
+
   return { post, uploadProgressPercent, ...mutation };
 };

package/src/types/index.ts

@@ -1,4 +1,6 @@
+import type { QueryKey } from '@tanstack/react-query';
 import type { RawAxiosRequestHeaders } from 'axios';
+import type { IMakeRequest } from '../request';
 
 export interface BootstrapConfig {
   environments?: {
@@ -7,8 +9,11 @@ export interface BootstrapConfig {
   };
   context?: ContextType;
   modelConfig?: BootstrapModelConfig;
-  mutationMiddleware?: (mutateRequest?: any, mutateResponse?: any) => Promise<boolean>;
-  queryMiddleware?: (queryRequest?: any, queryResponse?: any) => Promise<boolean>;
+  mutationMiddleware?: (mutateRequestConfig?: IMakeRequest & { mutationKey: QueryKey }) => Promise<boolean>;
+  queryMiddleware?: (queryRequestConfig?: IMakeRequest & { queryKey: QueryKey }) => Promise<boolean>;
+  pauseFutureMutations?: boolean;
+  pauseFutureQueries?: boolean;
+  headers?: RawAxiosRequestHeaders;
 }
 
 export interface BootstrapModelConfig {
@@ -17,11 +22,11 @@ export interface BootstrapModelConfig {
 
 export type ContextType = 'app' | 'web' | 'electronjs';
 export interface TanstackQueryConfig {
-  headers: RawAxiosRequestHeaders;
-  options?: BootstrapConfig;
+  options: BootstrapConfig;
+  setConfig: (options: BootstrapConfig) => void;
 }
 
 export interface IUseQueryHeaders {
-  getHeaders: () => TanstackQueryConfig['headers'];
-  setQueryHeaders: (header: TanstackQueryConfig['headers']) => void;
+  getHeaders: () => BootstrapConfig['headers'];
+  setQueryHeaders: (header: BootstrapConfig['headers']) => void;
 }