@ventlio/tanstack-query 0.2.87 → 0.3.0

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,7 +1,6 @@
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
-import type { RawAxiosRequestHeaders } from 'axios';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
@@ -11,6 +10,7 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
   const { baseUrl, headers } = deleteOptions ?? {};
   const [requestPath, setRequestPath] = useState<string>('');
   const [options, setOptions] = useState<any>();
+  const [destroyConfig, setDestroyConfig] = useState<{ link: string; internalDeleteOptions: any }>();
 
   const { options: queryConfigOptions } = useQueryConfig();
 
@@ -20,7 +20,7 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
 
   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;
     const requestUrl = (url ?? requestPath) as string;
@@ -34,7 +34,7 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
 
     let shouldContinue = true;
 
-    if (queryConfigOptions?.queryMiddleware) {
+    if (queryConfigOptions.queryMiddleware) {
       shouldContinue = await queryConfigOptions.queryMiddleware({ queryKey, ...requestOptions });
     }
 
@@ -75,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,6 +1,5 @@
 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, useQueryConfig, useQueryHeaders } from '../config';
 
@@ -33,9 +32,10 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
   const { getHeaders } = useQueryHeaders();
   const [requestPath, setRequestPath] = useState<string>(path);
+  const [queryConfig, setQueryConfig] = useState<{ link: string; fetchOptions: any }>();
 
   const [options, setOptions] = useState<any>(queryOptions);
-  const { options: queryConfigOptions } = useQueryConfig();
+  const { options: queryConfigOptions, setConfig } = useQueryConfig();
 
   let queryClient = useQueryClient();
 
@@ -55,7 +55,7 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
   ) => {
     if (load) {
       // get request headers
-      const globalHeaders: RawAxiosRequestHeaders = getHeaders();
+      const globalHeaders = getHeaders();
 
       const requestOptions = {
         path: pageParam ?? requestPath,
@@ -66,7 +66,7 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
 
       let shouldContinue = true;
 
-      if (queryConfigOptions?.queryMiddleware) {
+      if (queryConfigOptions.queryMiddleware) {
         shouldContinue = await queryConfigOptions.queryMiddleware({ queryKey, ...requestOptions });
       }
 
@@ -115,7 +115,7 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
         sendRequest(res, rej, queryKey, pageParam)
       ),
     {
-      enabled: load,
+      enabled: load || !queryConfigOptions.pauseFutureQueries,
       getNextPageParam: (lastPage) => constructPaginationLink('next_page', lastPage),
       getPreviousPageParam: (lastPage) => constructPaginationLink('previous_page', lastPage),
       ...options,
@@ -146,10 +146,16 @@ 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) => {
@@ -160,18 +166,22 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
 
   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,
   };
 };

package/src/queries/useGetRequest.ts

@@ -1,7 +1,6 @@
 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, useQueryConfig, useQueryHeaders } from '../config';
 
 import type { IRequestError, IRequestSuccess } from '../request';
@@ -27,7 +26,8 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
   const { getHeaders } = useQueryHeaders();
-  const { options: queryConfigOptions } = useQueryConfig();
+  const { options: queryConfigOptions, setConfig } = useQueryConfig();
+  const [queryConfig, setQueryConfig] = useState<{ link: string; fetchOptions: any }>();
 
   let queryClient = useQueryClient();
 
@@ -43,7 +43,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   ) => {
     if (load) {
       // get request headers
-      const globalHeaders: RawAxiosRequestHeaders = getHeaders();
+      const globalHeaders = getHeaders();
 
       const [url] = queryKey;
       const requestUrl = (url ?? requestPath) as string;
@@ -57,7 +57,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
 
       let shouldContinue = true;
 
-      if (queryConfigOptions?.queryMiddleware) {
+      if (queryConfigOptions.queryMiddleware) {
         shouldContinue = await queryConfigOptions.queryMiddleware({ queryKey, ...requestOptions });
       }
 
@@ -95,15 +95,10 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
 
   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) {
@@ -165,14 +160,29 @@ 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;
+    } else {
+      setQueryConfig({ link, fetchOptions });
 
-    return query.data;
+      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,
+    isLoading: query.isLoading || queryConfigOptions.pauseFutureQueries,
     setRequestPath,
     nextPage,
     prevPage,

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,7 +19,7 @@ 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 requestOptions = {
       path: path,
@@ -32,7 +33,7 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
 
     let shouldContinue = true;
 
-    if (config.options?.mutationMiddleware) {
+    if (config.options.mutationMiddleware) {
       shouldContinue = await config.options.mutationMiddleware({
         mutationKey: [path, { type: 'mutation' }],
         ...requestOptions,
@@ -43,13 +44,13 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
       const patchResponse = await makeRequest<TResponse>(requestOptions);
       if (patchResponse.status) {
         // scroll to top after success
-        if (config.options?.context !== 'app') {
+        if (config.options.context !== 'app') {
           scrollToTop();
         }
         res(patchResponse as IRequestSuccess<TResponse>);
       } else {
         // scroll to top after error
-        if (config.options?.context !== 'app') {
+        if (config.options.context !== 'app') {
           scrollToTop();
         }
         rej(patchResponse);
@@ -71,9 +72,27 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
   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,7 +35,7 @@ export const usePostRequest = <TResponse>({
     postData: { data: any; requestConfig?: Partial<IMakeRequest> }
   ) => {
     // get request headers
-    const globalHeaders: RawAxiosRequestHeaders = getHeaders();
+    const globalHeaders = getHeaders();
 
     const { data, requestConfig } = postData;
 
@@ -58,7 +59,7 @@ export const usePostRequest = <TResponse>({
 
     let shouldContinue = true;
 
-    if (config.options?.mutationMiddleware) {
+    if (config.options.mutationMiddleware) {
       shouldContinue = await config.options.mutationMiddleware({
         mutationKey: [path, { type: 'mutation' }],
         ...requestOptions,
@@ -71,13 +72,13 @@ export const usePostRequest = <TResponse>({
       if (postResponse.status) {
         // scroll to top after success
 
-        if (config.options?.context !== 'app') {
+        if (config.options.context !== 'app') {
           scrollToTop();
         }
         res(postResponse as IRequestSuccess<TResponse>);
       } else {
         // scroll to top after error
-        if (config.options?.context !== 'app') {
+        if (config.options.context !== 'app') {
           scrollToTop();
         }
         rej(postResponse);
@@ -108,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

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