@ventlio/tanstack-query 0.2.86 → 0.2.89

package/dist/queries/usePatchRequest.js.map

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

package/dist/queries/usePostRequest.d.ts

@@ -39,7 +39,7 @@ export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, he
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
     } & {
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
-    }) | undefined) => Promise<IRequestSuccess<TResponse>>;
+    }) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
     uploadProgressPercent: number;
 } | {
     data: undefined;
@@ -75,7 +75,7 @@ export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, he
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
     } & {
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
-    }) | undefined) => Promise<IRequestSuccess<TResponse>>;
+    }) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
     uploadProgressPercent: number;
 } | {
     data: undefined;
@@ -111,7 +111,7 @@ export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, he
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
     } & {
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
-    }) | undefined) => Promise<IRequestSuccess<TResponse>>;
+    }) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
     uploadProgressPercent: number;
 } | {
     data: IRequestSuccess<TResponse>;
@@ -147,6 +147,6 @@ export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, he
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
     } & {
         requestConfig?: Partial<Omit<IMakeRequest, "body">> | undefined;
-    }) | undefined) => Promise<IRequestSuccess<TResponse>>;
+    }) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
     uploadProgressPercent: number;
 };

package/dist/queries/usePostRequest.js

@@ -4,6 +4,7 @@ import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
 import { useQueryConfig } from '../config/useQueryConfig.js';
 import { useQueryHeaders } from '../config/useQueryHeaders.js';
 import { useReactNativeEnv } from '../config/useReactNativeEnv.js';
+import { useState, useEffect } from 'react';
 import { scrollToTop } from '../helpers/scrollToTop.js';
 import { useUploadProgress } from '../hooks/useUploadProgress.js';
 import 'axios';
@@ -13,6 +14,7 @@ import { HttpMethod } from '../request/request.enum.js';
 const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelectors, }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
     const config = useQueryConfig();
+    const [mutationConfig, setMutationConfig] = useState();
     const { getHeaders } = useQueryHeaders();
     const { isApp } = useReactNativeEnv();
     const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
@@ -21,7 +23,7 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
         const globalHeaders = getHeaders();
         const { data, requestConfig } = postData;
         delete requestConfig?.body;
-        const postResponse = await makeRequest({
+        const requestOptions = {
             path,
             body: data,
             method: HttpMethod.POST,
@@ -35,20 +37,33 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
             },
             onUploadProgress,
             ...requestConfig,
-        });
-        if (postResponse.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 postResponse = await makeRequest(requestOptions);
+            if (postResponse.status) {
+                // scroll to top after success
+                if (config.options.context !== 'app') {
+                    scrollToTop();
+                }
+                res(postResponse);
+            }
+            else {
+                // scroll to top after error
+                if (config.options.context !== 'app') {
+                    scrollToTop();
+                }
+                rej(postResponse);
             }
-            res(postResponse);
         }
         else {
-            // scroll to top after error
-            if (config.options?.context !== 'app') {
-                scrollToTop();
-            }
-            rej(postResponse);
+            rej(null);
         }
     };
     // register post mutation
@@ -56,9 +71,22 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
         mutationKey: [path, { type: 'mutation' }],
     });
     const post = async (data, options) => {
-        const { requestConfig, ...otherOptions } = options ?? {};
-        return mutation.mutateAsync({ data, requestConfig }, otherOptions);
+        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/dist/queries/usePostRequest.js.map

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

package/dist/types/index.d.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?: {
         appBaseUrl: string;
@@ -6,18 +8,25 @@ 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 {
     idColumn: string;
 }
 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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ventlio/tanstack-query",
-  "version": "0.2.86",
+  "version": "0.2.89",
   "license": "MIT",
   "main": "dist/index.js",
   "contributors": [

package/src/config/useQueryConfig.ts

@@ -1,11 +1,48 @@
+import type { MutationMeta, QueryMeta } from '@tanstack/react-query';
 import { useQueryClient } from '@tanstack/react-query';
-import type { TanstackQueryConfig } from '../types';
+import type { BootstrapConfig, TanstackQueryConfig } from '../types';
 
 export const useQueryConfig = (): TanstackQueryConfig => {
   const queryClient = useQueryClient();
 
-  const mutationMeta = (queryClient.getDefaultOptions().mutations?.meta ?? {}) as unknown as TanstackQueryConfig;
-  const queryMeta = (queryClient.getDefaultOptions().queries?.meta ?? {}) as unknown as TanstackQueryConfig;
+  const setConfig = (options: BootstrapConfig) => {
+    let mutationMeta: MutationMeta | undefined = queryClient.getMutationDefaults()?.meta ?? {};
+    let queryMeta: QueryMeta | undefined = queryClient.getQueryDefaults()?.meta ?? {};
 
-  return { ...queryMeta, ...mutationMeta };
+    const { pauseFutureMutations, pauseFutureQueries, mutationMiddleware, queryMiddleware, ...otherOptions } = options;
+
+    if (pauseFutureMutations) {
+      mutationMeta.pauseFutureMutations = pauseFutureMutations;
+    }
+
+    if (mutationMiddleware) {
+      mutationMeta.mutationMiddleware = mutationMiddleware;
+    }
+
+    mutationMeta = { meta: { ...mutationMeta, ...otherOptions } };
+
+    if (pauseFutureQueries) {
+      queryMeta.pauseFutureQueries = pauseFutureQueries;
+    }
+
+    if (queryMiddleware) {
+      queryMeta.mutationMiddleware = queryMiddleware;
+    }
+
+    queryMeta = { meta: { ...queryMeta, ...otherOptions } };
+
+    const defaultMutationOptions = queryClient.defaultMutationOptions();
+    const defaultQueryOptions = queryClient.defaultQueryOptions();
+
+    queryClient.setDefaultOptions({
+      queries: { ...defaultQueryOptions, meta: queryMeta },
+      mutations: { ...defaultMutationOptions, meta: mutationMeta },
+    });
+  };
+
+  const mutationMeta = (queryClient.getDefaultOptions().mutations?.meta ?? {}) as unknown as BootstrapConfig;
+  const queryMeta = (queryClient.getDefaultOptions().queries?.meta ?? {}) as unknown as BootstrapConfig;
+
+  const options: BootstrapConfig = { ...queryMeta, ...mutationMeta };
+  return { options, setConfig };
 };

package/src/config/useQueryHeaders.ts

@@ -1,27 +1,15 @@
-import { useQueryClient } from '@tanstack/react-query';
-import type { IUseQueryHeaders, TanstackQueryConfig } from '../types';
+import type { BootstrapConfig, IUseQueryHeaders } from '../types';
 import { useQueryConfig } from './useQueryConfig';
 
 export const useQueryHeaders = (): IUseQueryHeaders => {
-  const queryClient = useQueryClient();
-  const { headers, options } = useQueryConfig();
+  const { setConfig, ...config } = useQueryConfig();
 
-  const getHeaders = (): TanstackQueryConfig['headers'] => {
-    return headers;
+  const getHeaders = (): BootstrapConfig['headers'] => {
+    return config.options?.headers;
   };
 
-  const setQueryHeaders = (newHeaders: TanstackQueryConfig['headers']) => {
-    const defaultMeta = {
-      headers: { ...headers, ...newHeaders },
-      options,
-    };
-
-    queryClient.setDefaultOptions({
-      queries: {
-        meta: defaultMeta,
-      },
-      mutations: { meta: defaultMeta },
-    });
+  const setQueryHeaders = (headers: BootstrapConfig['headers']) => {
+    setConfig({ headers });
   };
 
   return { setQueryHeaders, getHeaders };

package/src/config/useReactNativeEnv.ts

@@ -3,9 +3,9 @@ import { useQueryConfig } from './useQueryConfig';
 export const useReactNativeEnv = () => {
   const config = useQueryConfig();
 
-  const appUrl: string | undefined = config.options?.environments?.appBaseUrl;
-  const appTimeout: number | undefined = config.options?.environments?.appTimeout;
-  const isApp = config.options?.context === 'app';
+  const appUrl: string | undefined = config.options.environments?.appBaseUrl;
+  const appTimeout: number | undefined = config.options.environments?.appTimeout;
+  const isApp = config.options.context === 'app';
 
   return { appUrl, appTimeout, isApp };
 };

package/src/model/useKeyTrackerModel.ts

@@ -4,7 +4,11 @@ export const useKeyTrackerModel = <T>(keyTracker: string) => {
   const queryClient = useQueryClient();
 
   const getQueryKey = (innerKeyTracker?: string) => {
-    const queryKey: any[] | undefined = queryClient.getQueryData([innerKeyTracker ?? keyTracker]);
+    const meta = {
+      ...queryClient.getDefaultOptions().mutations?.meta,
+      ...queryClient.getDefaultOptions().queries?.meta,
+    };
+    const queryKey: any[] | undefined = meta[innerKeyTracker ?? keyTracker] as any[];
 
     return queryKey;
   };

package/src/queries/useDeleteRequest.ts

@@ -1,39 +1,53 @@
 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 { useEffect, useState } from 'react';
+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 [destroyConfig, setDestroyConfig] = useState<{ link: string; internalDeleteOptions: 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 globalHeaders = 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) => {
@@ -61,15 +75,29 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
       Array<any>
     > & { cached?: boolean }
   ): Promise<IRequestSuccess<TResponse> | undefined> => {
-    // set enabled to be true for every delete
-    internalDeleteOptions = internalDeleteOptions ?? {};
-    internalDeleteOptions.enabled = true;
+    if (!queryConfigOptions.pauseFutureQueries) {
+      // set enabled to be true for every delete
+      internalDeleteOptions = internalDeleteOptions ?? {};
+      internalDeleteOptions.enabled = true;
 
-    await setOptionsAsync(internalDeleteOptions);
-    await updatedPathAsync(link);
+      await setOptionsAsync(internalDeleteOptions);
+      await updatedPathAsync(link);
 
-    return query.data;
+      return query.data;
+    } else {
+      // save delete config
+      setDestroyConfig({ link, internalDeleteOptions });
+      return undefined;
+    }
   };
 
-  return { destroy, ...query };
+  useEffect(() => {
+    if (!queryConfigOptions.pauseFutureQueries && destroyConfig) {
+      destroy(destroyConfig.link, destroyConfig.internalDeleteOptions);
+      setDestroyConfig(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [queryConfigOptions.pauseFutureQueries]);
+
+  return { destroy, ...query, isLoading: query.isLoading || queryConfigOptions.pauseFutureQueries };
 };

package/src/queries/useGetInfiniteRequest.ts

@@ -1,8 +1,7 @@
-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 +31,11 @@ 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 [queryConfig, setQueryConfig] = useState<{ link: string; fetchOptions: any }>();
 
   const [options, setOptions] = useState<any>(queryOptions);
+  const { options: queryConfigOptions, setConfig } = 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 globalHeaders = getHeaders();
 
-      const getResponse = await makeRequest<TResponse>({
+      const requestOptions = {
         path: pageParam ?? requestPath,
         headers: { ...globalHeaders, ...headers },
         baseURL: baseUrl ?? API_URL,
         timeout: TIMEOUT,
-      });
+      };
 
-      if (getResponse.status) {
-        res(getResponse as IRequestSuccess<TResponse & { pagination: Pagination }>);
+      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 }>);
+        } else {
+          rej(getResponse);
+        }
       } else {
-        rej(getResponse);
+        rej(null);
       }
     } else {
       res(null as any);
@@ -96,12 +110,12 @@ 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,
+      enabled: load || !queryConfigOptions.pauseFutureQueries,
       getNextPageParam: (lastPage) => constructPaginationLink('next_page', lastPage),
       getPreviousPageParam: (lastPage) => constructPaginationLink('previous_page', lastPage),
       ...options,
@@ -132,32 +146,42 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
       >
     | 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;
+    }
   };
 
   const updatedPathAsync = async (link: string) => {
     startTransition(() => {
-      updatePath(link);
+      setRequestPath(link);
     });
   };
 
   useEffect(() => {
     if (keyTracker) {
-      // set expiration time for the tracker
-      queryClient.setQueryDefaults([keyTracker], {
-        cacheTime: Infinity,
-        staleTime: Infinity,
-      });
+      setConfig({ [keyTracker]: [requestPath, {}] });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [keyTracker, requestPath]);
 
-      queryClient.setQueryData([keyTracker], [requestPath, {}]);
+  useEffect(() => {
+    if (!queryConfigOptions.pauseFutureQueries && queryConfig) {
+      get(queryConfig.link, queryConfig.fetchOptions);
+      setQueryConfig(undefined);
     }
-  }, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [queryConfigOptions.pauseFutureQueries]);
 
   return {
     get,
     ...query,
+    isLoading: query.isLoading || queryConfigOptions.pauseFutureQueries,
   };
 };