@ventlio/tanstack-query 0.2.85 → 0.2.87

package/src/queries/useDeleteRequest.ts

@@ -2,38 +2,52 @@ import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
 import type { RawAxiosRequestHeaders } from 'axios';
 import { useState } from 'react';
-import { useEnvironmentVariables, useQueryHeaders } from '../config';
+import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
 import type { IRequestError, IRequestSuccess } from '../request';
-import { HttpMethod, makeRequest } from '../request';
+import { makeRequest } from '../request';
 import type { DefaultRequestOptions } from './queries.interface';
 
 export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOptions) => {
   const { baseUrl, headers } = deleteOptions ?? {};
-  const [requestPath, updateDeletePath] = useState<string>('');
+  const [requestPath, setRequestPath] = useState<string>('');
   const [options, setOptions] = useState<any>();
 
+  const { options: queryConfigOptions } = useQueryConfig();
+
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
   const { getHeaders } = useQueryHeaders();
 
-  const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, queryKey?: QueryKey) => {
+  const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, queryKey: QueryKey) => {
     // get request headers
     const globalHeaders: RawAxiosRequestHeaders = getHeaders();
 
-    const [url] = (queryKey ?? []) as string[];
+    const [url] = queryKey;
+    const requestUrl = (url ?? requestPath) as string;
 
-    const postResponse = await makeRequest<TResponse>({
-      path: url ?? requestPath,
+    const requestOptions = {
+      path: requestUrl,
       headers: { ...globalHeaders, ...headers },
-      method: HttpMethod.DELETE,
       baseURL: baseUrl ?? API_URL,
       timeout: TIMEOUT,
-    });
+    };
+
+    let shouldContinue = true;
+
+    if (queryConfigOptions?.queryMiddleware) {
+      shouldContinue = await queryConfigOptions.queryMiddleware({ queryKey, ...requestOptions });
+    }
+
+    if (shouldContinue) {
+      const postResponse = await makeRequest<TResponse>(requestOptions);
 
-    if (postResponse.status) {
-      res(postResponse as IRequestSuccess<TResponse>);
+      if (postResponse.status) {
+        res(postResponse as IRequestSuccess<TResponse>);
+      } else {
+        rej(postResponse);
+      }
     } else {
-      rej(postResponse);
+      rej(null);
     }
   };
 
@@ -45,7 +59,7 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
   );
 
   const updatedPathAsync = async (link: string) => {
-    return updateDeletePath(link);
+    return setRequestPath(link);
   };
 
   const setOptionsAsync = async (fetchOptions: any) => {

package/src/queries/useGetInfiniteRequest.ts

@@ -1,8 +1,8 @@
-import type { InfiniteData, UseQueryOptions } from '@tanstack/react-query';
+import type { InfiniteData, QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
 import type { RawAxiosRequestHeaders } from 'axios';
 import { startTransition, useEffect, useMemo, useState } from 'react';
-import { useEnvironmentVariables, useQueryHeaders } from '../config';
+import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
 
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
@@ -32,9 +32,10 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
 } & DefaultRequestOptions) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
   const { getHeaders } = useQueryHeaders();
-  const [requestPath, updatePath] = useState<string>(path);
+  const [requestPath, setRequestPath] = useState<string>(path);
 
   const [options, setOptions] = useState<any>(queryOptions);
+  const { options: queryConfigOptions } = useQueryConfig();
 
   let queryClient = useQueryClient();
 
@@ -49,23 +50,36 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
         | PromiseLike<IRequestError | IRequestSuccess<TResponse & { pagination: Pagination }>>
     ) => void,
     rej: (reason?: any) => void,
+    queryKey: QueryKey,
     pageParam?: string
   ) => {
     if (load) {
       // get request headers
       const globalHeaders: RawAxiosRequestHeaders = getHeaders();
 
-      const getResponse = await makeRequest<TResponse>({
+      const requestOptions = {
         path: pageParam ?? requestPath,
         headers: { ...globalHeaders, ...headers },
         baseURL: baseUrl ?? API_URL,
         timeout: TIMEOUT,
-      });
+      };
+
+      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 & { pagination: Pagination }>);
+        if (getResponse.status) {
+          res(getResponse as IRequestSuccess<TResponse & { pagination: Pagination }>);
+        } else {
+          rej(getResponse);
+        }
       } else {
-        rej(getResponse);
+        rej(null);
       }
     } else {
       res(null as any);
@@ -96,9 +110,9 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
 
   const query = useInfiniteQuery<any, any, IRequestSuccess<TResponse & { pagination: Pagination }>>(
     [requestPath, {}],
-    ({ pageParam = requestPath }) =>
+    ({ pageParam = requestPath, queryKey }) =>
       new Promise<IRequestSuccess<TResponse & { pagination: Pagination }> | IRequestError>((res, rej) =>
-        sendRequest(res, rej, pageParam)
+        sendRequest(res, rej, queryKey, pageParam)
       ),
     {
       enabled: load,
@@ -140,7 +154,7 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
 
   const updatedPathAsync = async (link: string) => {
     startTransition(() => {
-      updatePath(link);
+      setRequestPath(link);
     });
   };
 

package/src/queries/useGetRequest.ts

@@ -2,7 +2,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 +21,13 @@ 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 } = useQueryConfig();
 
   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 [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,
-      });
+      };
+
+      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>);
+        if (getResponse.status) {
+          res(getResponse as IRequestSuccess<TResponse>);
+        } else {
+          rej(getResponse);
+        }
       } else {
-        rej(getResponse);
+        rej(null);
       }
     } else {
       res(null as any);
@@ -75,7 +89,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
 
   useEffect(() => {
     if (path) {
-      updatePath(path);
+      setRequestPath(path);
     }
   }, [path]);
 
@@ -95,7 +109,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     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 +118,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 +141,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);
     });
   };
 
@@ -159,7 +173,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
 
   return {
     ...query,
-    updatePath,
+    setRequestPath,
     nextPage,
     prevPage,
     get,

package/src/queries/usePatchRequest.ts

@@ -1,12 +1,11 @@
 import type { MutateOptions } from '@tanstack/react-query';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import type { RawAxiosRequestHeaders } from 'axios';
-import { useEnvironmentVariables, useQueryHeaders } from '../config';
+import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
 import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
 import { HttpMethod, makeRequest } from '../request';
 import type { IRequestError, IRequestSuccess } from '../request/request.interface';
-import type { TanstackQueryConfig } from '../types';
 import type { DefaultRequestOptions } from './queries.interface';
 
 export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: string } & DefaultRequestOptions) => {
@@ -14,15 +13,14 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
   const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
 
   const { getHeaders } = useQueryHeaders();
-  const queryClient = useQueryClient();
 
-  const config = queryClient.getQueryData<TanstackQueryConfig>(['config']);
+  const config = useQueryConfig();
 
   const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, data: any) => {
     // get request headers
     const globalHeaders: RawAxiosRequestHeaders = getHeaders();
 
-    const patchResponse = await makeRequest<TResponse>({
+    const requestOptions = {
       path: path,
       body: data,
       method: HttpMethod.PATCH,
@@ -30,20 +28,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);
     }
   };
 
@@ -52,7 +64,8 @@ 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 (

package/src/queries/usePostRequest.ts

@@ -1,13 +1,12 @@
 import type { MutateOptions } from '@tanstack/react-query';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useEnvironmentVariables, useQueryHeaders, useReactNativeEnv } from '../config';
+import { useMutation } from '@tanstack/react-query';
+import { useEnvironmentVariables, useQueryConfig, useQueryHeaders, useReactNativeEnv } from '../config';
 
 import type { RawAxiosRequestHeaders } from 'axios';
 import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
 import type { IMakeRequest, IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
-import type { TanstackQueryConfig } from '../types';
 import type { DefaultRequestOptions } from './queries.interface';
 
 export const usePostRequest = <TResponse>({
@@ -22,7 +21,9 @@ export const usePostRequest = <TResponse>({
   fileSelectors?: string[];
 } & DefaultRequestOptions) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
-  const queryClient = useQueryClient();
+
+  const config = useQueryConfig();
+
   const { getHeaders } = useQueryHeaders();
   const { isApp } = useReactNativeEnv();
   const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
@@ -34,12 +35,12 @@ export const usePostRequest = <TResponse>({
   ) => {
     // get request headers
     const globalHeaders: RawAxiosRequestHeaders = getHeaders();
-    const config = queryClient.getQueryData<TanstackQueryConfig>(['config']);
+
     const { data, requestConfig } = postData;
 
     delete requestConfig?.body;
 
-    const postResponse = await makeRequest<TResponse>({
+    const requestOptions = {
       path,
       body: data,
       method: HttpMethod.POST,
@@ -53,21 +54,36 @@ export const usePostRequest = <TResponse>({
       },
       onUploadProgress,
       ...requestConfig,
-    });
+    };
+
+    let shouldContinue = true;
 
-    if (postResponse.status) {
-      // scroll to top after success
+    if (config.options?.mutationMiddleware) {
+      shouldContinue = await config.options.mutationMiddleware({
+        mutationKey: [path, { type: 'mutation' }],
+        ...requestOptions,
+      });
+    }
+
+    if (shouldContinue) {
+      const postResponse = await makeRequest<TResponse>(requestOptions);
 
-      if (config?.options?.context !== 'app') {
-        scrollToTop();
+      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);
     }
   };
 
@@ -76,7 +92,9 @@ export const usePostRequest = <TResponse>({
     IRequestSuccess<TResponse>,
     IRequestError,
     { data: any; requestConfig?: Partial<Omit<IMakeRequest, 'body'>> }
-  >(async (postData) => new Promise<IRequestSuccess<TResponse>>((res, rej) => sendRequest(res, rej, postData)));
+  >(async (postData) => new Promise<IRequestSuccess<TResponse>>((res, rej) => sendRequest(res, rej, postData)), {
+    mutationKey: [path, { type: 'mutation' }],
+  });
 
   const post = async <T>(
     data?: T,

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,6 +9,8 @@ export interface BootstrapConfig {
   };
   context?: ContextType;
   modelConfig?: BootstrapModelConfig;
+  mutationMiddleware?: (mutateRequestConfig?: IMakeRequest & { mutationKey: QueryKey }) => Promise<boolean>;
+  queryMiddleware?: (queryRequestConfig?: IMakeRequest & { queryKey: QueryKey }) => Promise<boolean>;
 }
 
 export interface BootstrapModelConfig {