@ventlio/tanstack-query 0.2.89 → 0.3.1

package/src/model/useKeyTrackerModel.ts

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

package/src/queries/useDeleteRequest.ts

@@ -1,6 +1,7 @@
 import type { QueryKey, UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import type { RawAxiosRequestHeaders } from 'axios';
+import { useState } from 'react';
 import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
@@ -10,7 +11,6 @@ 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 = getHeaders();
+    const globalHeaders: RawAxiosRequestHeaders = 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,29 +75,15 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
       Array<any>
     > & { cached?: boolean }
   ): Promise<IRequestSuccess<TResponse> | undefined> => {
-    if (!queryConfigOptions.pauseFutureQueries) {
-      // set enabled to be true for every delete
-      internalDeleteOptions = internalDeleteOptions ?? {};
-      internalDeleteOptions.enabled = true;
+    // 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;
-    } else {
-      // save delete config
-      setDestroyConfig({ link, internalDeleteOptions });
-      return undefined;
-    }
+    return query.data;
   };
 
-  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 };
+  return { destroy, ...query };
 };

package/src/queries/useGetInfiniteRequest.ts

@@ -1,5 +1,6 @@
 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';
 
@@ -32,10 +33,9 @@ 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, setConfig } = useQueryConfig();
+  const { options: queryConfigOptions } = useQueryConfig();
 
   let queryClient = useQueryClient();
 
@@ -55,7 +55,7 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
   ) => {
     if (load) {
       // get request headers
-      const globalHeaders = getHeaders();
+      const globalHeaders: RawAxiosRequestHeaders = 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 || !queryConfigOptions.pauseFutureQueries,
+      enabled: load,
       getNextPageParam: (lastPage) => constructPaginationLink('next_page', lastPage),
       getPreviousPageParam: (lastPage) => constructPaginationLink('previous_page', lastPage),
       ...options,
@@ -146,16 +146,10 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
       >
     | undefined
   > => {
-    if (!queryConfigOptions.pauseFutureQueries) {
-      await setOptionsAsync(fetchOptions);
-      await updatedPathAsync(link);
+    await setOptionsAsync(fetchOptions);
+    await updatedPathAsync(link);
 
-      return query.data;
-    } else {
-      setQueryConfig({ link, fetchOptions });
-
-      return undefined;
-    }
+    return query.data;
   };
 
   const updatedPathAsync = async (link: string) => {
@@ -166,22 +160,18 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
 
   useEffect(() => {
     if (keyTracker) {
-      setConfig({ [keyTracker]: [requestPath, {}] });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [keyTracker, requestPath]);
+      // set expiration time for the tracker
+      queryClient.setQueryDefaults([keyTracker], {
+        cacheTime: Infinity,
+        staleTime: Infinity,
+      });
 
-  useEffect(() => {
-    if (!queryConfigOptions.pauseFutureQueries && queryConfig) {
-      get(queryConfig.link, queryConfig.fetchOptions);
-      setQueryConfig(undefined);
+      queryClient.setQueryData([keyTracker], [requestPath, {}]);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [queryConfigOptions.pauseFutureQueries]);
+  }, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
 
   return {
     get,
     ...query,
-    isLoading: query.isLoading || queryConfigOptions.pauseFutureQueries,
   };
 };

package/src/queries/useGetRequest.ts

@@ -1,6 +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, useQueryConfig, useQueryHeaders } from '../config';
 
 import type { IRequestError, IRequestSuccess } from '../request';
@@ -26,8 +27,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
   const { getHeaders } = useQueryHeaders();
-  const { options: queryConfigOptions, setConfig } = useQueryConfig();
-  const [queryConfig, setQueryConfig] = useState<{ link: string; fetchOptions: any }>();
+  const { options: queryConfigOptions } = useQueryConfig();
 
   let queryClient = useQueryClient();
 
@@ -43,7 +43,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   ) => {
     if (load) {
       // get request headers
-      const globalHeaders = getHeaders();
+      const globalHeaders: RawAxiosRequestHeaders = 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,10 +95,15 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
 
   useEffect(() => {
     if (keyTracker) {
-      setConfig({ [keyTracker]: [requestPath, {}] });
+      // set expiration time for the tracker
+      queryClient.setQueryDefaults([keyTracker], {
+        cacheTime: Infinity,
+        staleTime: Infinity,
+      });
+
+      queryClient.setQueryData([keyTracker], [requestPath, {}]);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [keyTracker, requestPath]);
+  }, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
 
   const nextPage = () => {
     if (query.data?.data.pagination) {
@@ -160,29 +165,14 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
       Array<any>
     >
   ): Promise<IRequestSuccess<TResponse> | undefined> => {
-    if (!queryConfigOptions.pauseFutureQueries) {
-      await setOptionsAsync(fetchOptions);
-      await updatedPathAsync(link);
-
-      return query.data;
-    } else {
-      setQueryConfig({ link, fetchOptions });
+    await setOptionsAsync(fetchOptions);
+    await updatedPathAsync(link);
 
-      return undefined;
-    }
+    return query.data;
   };
 
-  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 { useEffect, useState } from 'react';
+import type { RawAxiosRequestHeaders } from 'axios';
 import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
 import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
@@ -11,7 +11,6 @@ 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();
 
@@ -19,7 +18,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 = getHeaders();
+    const globalHeaders: RawAxiosRequestHeaders = getHeaders();
 
     const requestOptions = {
       path: path,
@@ -33,7 +32,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,
@@ -44,13 +43,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);
@@ -72,27 +71,9 @@ 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> | undefined> => {
-    if (!config.options.pauseFutureMutations) {
-      return mutation.mutateAsync(data, options);
-    } else {
-      setMutationConfig({ data, options });
-      return undefined;
-    }
+  ): Promise<IRequestSuccess<TResponse>> => {
+    return mutation.mutateAsync(data, options);
   };
 
-  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,
-  };
+  return { patch, uploadProgressPercent, ...mutation };
 };

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 { useEffect, useState } from 'react';
+import type { RawAxiosRequestHeaders } from 'axios';
 import { scrollToTop } from '../helpers';
 import { useUploadProgress } from '../hooks';
 import type { IMakeRequest, IRequestError, IRequestSuccess } from '../request';
@@ -23,7 +23,6 @@ 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();
@@ -35,7 +34,7 @@ export const usePostRequest = <TResponse>({
     postData: { data: any; requestConfig?: Partial<IMakeRequest> }
   ) => {
     // get request headers
-    const globalHeaders = getHeaders();
+    const globalHeaders: RawAxiosRequestHeaders = getHeaders();
 
     const { data, requestConfig } = postData;
 
@@ -59,7 +58,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,
@@ -72,13 +71,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);
@@ -109,23 +108,10 @@ export const usePostRequest = <TResponse>({
       | { requestConfig?: Partial<Omit<IMakeRequest, 'body'>> }
       | undefined
     ) & { requestConfig?: Partial<Omit<IMakeRequest, 'body'>> }
-  ): Promise<IRequestSuccess<TResponse> | undefined> => {
-    if (!config.options.pauseFutureMutations) {
-      const { requestConfig, ...otherOptions } = options ?? {};
-      return mutation.mutateAsync({ data, requestConfig }, otherOptions);
-    } else {
-      setMutationConfig({ data, options });
-      return undefined;
-    }
+  ): Promise<IRequestSuccess<TResponse>> => {
+    const { requestConfig, ...otherOptions } = options ?? {};
+    return mutation.mutateAsync({ data, requestConfig }, otherOptions);
   };
 
-  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,9 +11,6 @@ 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 {
@@ -22,11 +19,11 @@ export interface BootstrapModelConfig {
 
 export type ContextType = 'app' | 'web' | 'electronjs';
 export interface TanstackQueryConfig {
-  options: BootstrapConfig;
-  setConfig: (options: BootstrapConfig) => void;
+  headers: RawAxiosRequestHeaders;
+  options?: BootstrapConfig;
 }
 
 export interface IUseQueryHeaders {
-  getHeaders: () => BootstrapConfig['headers'];
-  setQueryHeaders: (header: BootstrapConfig['headers']) => void;
+  getHeaders: () => TanstackQueryConfig['headers'];
+  setQueryHeaders: (header: TanstackQueryConfig['headers']) => void;
 }