@ventlio/tanstack-query 0.2.85 → 0.2.86

package/dist/config/bootstrapQueryRequest.js

@@ -2,16 +2,18 @@ import 'url-search-params-polyfill';
 
 const bootstrapQueryRequest = (queryClient, options) => {
     // make query config doesn't expire
-    queryClient.setQueryDefaults(['config'], {
-        staleTime: Infinity,
-        cacheTime: Infinity,
-    });
     // set default query config
-    queryClient.setQueryData(['config'], {
+    const defaultMeta = {
         headers: {
             Authorization: ``,
         },
         options,
+    };
+    queryClient.setDefaultOptions({
+        queries: {
+            meta: defaultMeta,
+        },
+        mutations: { meta: defaultMeta },
     });
 };
 

package/dist/config/bootstrapQueryRequest.js.map

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

package/dist/config/useQueryConfig.js

@@ -2,8 +2,9 @@ import { useQueryClient } from '@tanstack/react-query';
 
 const useQueryConfig = () => {
     const queryClient = useQueryClient();
-    const { headers = {}, options = {} } = queryClient.getQueryData(['config']) ?? {};
-    return { headers, options };
+    const mutationMeta = (queryClient.getDefaultOptions().mutations?.meta ?? {});
+    const queryMeta = (queryClient.getDefaultOptions().queries?.meta ?? {});
+    return { ...queryMeta, ...mutationMeta };
 };
 
 export { useQueryConfig };

package/dist/config/useQueryConfig.js.map

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

package/dist/config/useQueryHeaders.js

@@ -1,24 +1,22 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { getDateInFuture } from '../helpers/timeFuncs.js';
+import { useQueryConfig } from './useQueryConfig.js';
 
 const useQueryHeaders = () => {
     const queryClient = useQueryClient();
+    const { headers, options } = useQueryConfig();
     const getHeaders = () => {
-        const config = queryClient.getQueryData(['config']);
-        return config.headers;
+        return headers;
     };
     const setQueryHeaders = (newHeaders) => {
-        // make sure the config does not expire
-        queryClient.setQueryDefaults(['config'], {
-            staleTime: Infinity,
-            cacheTime: Infinity,
-        });
-        // set the config
-        queryClient.setQueryData(['config'], (config) => {
-            const newConfig = { ...config, headers: newHeaders };
-            return newConfig;
-        }, {
-            updatedAt: getDateInFuture(2),
+        const defaultMeta = {
+            headers: { ...headers, ...newHeaders },
+            options,
+        };
+        queryClient.setDefaultOptions({
+            queries: {
+                meta: defaultMeta,
+            },
+            mutations: { meta: defaultMeta },
         });
     };
     return { setQueryHeaders, getHeaders };

package/dist/config/useQueryHeaders.js.map

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

package/dist/config/useReactNativeEnv.js

@@ -1,11 +1,10 @@
-import { useQueryClient } from '@tanstack/react-query';
+import { useQueryConfig } from './useQueryConfig.js';
 
 const useReactNativeEnv = () => {
-    const queryClient = useQueryClient();
-    const config = queryClient.getQueryData(['config']);
-    const appUrl = config?.options?.environments?.appBaseUrl;
-    const appTimeout = config?.options?.environments?.appTimeout;
-    const isApp = config?.options?.context === 'app';
+    const config = useQueryConfig();
+    const appUrl = config.options?.environments?.appBaseUrl;
+    const appTimeout = config.options?.environments?.appTimeout;
+    const isApp = config.options?.context === 'app';
     return { appUrl, appTimeout, isApp };
 };
 

package/dist/config/useReactNativeEnv.js.map

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

package/dist/index.mjs

@@ -7,25 +7,33 @@ import axios from 'axios';
 
 const bootstrapQueryRequest = (queryClient, options) => {
     // make query config doesn't expire
-    queryClient.setQueryDefaults(['config'], {
-        staleTime: Infinity,
-        cacheTime: Infinity,
-    });
     // set default query config
-    queryClient.setQueryData(['config'], {
+    const defaultMeta = {
         headers: {
             Authorization: ``,
         },
         options,
+    };
+    queryClient.setDefaultOptions({
+        queries: {
+            meta: defaultMeta,
+        },
+        mutations: { meta: defaultMeta },
     });
 };
 
-const useReactNativeEnv = () => {
+const useQueryConfig = () => {
     const queryClient = useQueryClient();
-    const config = queryClient.getQueryData(['config']);
-    const appUrl = config?.options?.environments?.appBaseUrl;
-    const appTimeout = config?.options?.environments?.appTimeout;
-    const isApp = config?.options?.context === 'app';
+    const mutationMeta = (queryClient.getDefaultOptions().mutations?.meta ?? {});
+    const queryMeta = (queryClient.getDefaultOptions().queries?.meta ?? {});
+    return { ...queryMeta, ...mutationMeta };
+};
+
+const useReactNativeEnv = () => {
+    const config = useQueryConfig();
+    const appUrl = config.options?.environments?.appBaseUrl;
+    const appTimeout = config.options?.environments?.appTimeout;
+    const isApp = config.options?.context === 'app';
     return { appUrl, appTimeout, isApp };
 };
 
@@ -39,10 +47,25 @@ const useEnvironmentVariables = () => {
     };
 };
 
-const useQueryConfig = () => {
+const useQueryHeaders = () => {
     const queryClient = useQueryClient();
-    const { headers = {}, options = {} } = queryClient.getQueryData(['config']) ?? {};
-    return { headers, options };
+    const { headers, options } = useQueryConfig();
+    const getHeaders = () => {
+        return headers;
+    };
+    const setQueryHeaders = (newHeaders) => {
+        const defaultMeta = {
+            headers: { ...headers, ...newHeaders },
+            options,
+        };
+        queryClient.setDefaultOptions({
+            queries: {
+                meta: defaultMeta,
+            },
+            mutations: { meta: defaultMeta },
+        });
+    };
+    return { setQueryHeaders, getHeaders };
 };
 
 const scrollToTop = () => {
@@ -61,29 +84,6 @@ function getDateInFuture(days) {
     return date.getTime();
 }
 
-const useQueryHeaders = () => {
-    const queryClient = useQueryClient();
-    const getHeaders = () => {
-        const config = queryClient.getQueryData(['config']);
-        return config.headers;
-    };
-    const setQueryHeaders = (newHeaders) => {
-        // make sure the config does not expire
-        queryClient.setQueryDefaults(['config'], {
-            staleTime: Infinity,
-            cacheTime: Infinity,
-        });
-        // set the config
-        queryClient.setQueryData(['config'], (config) => {
-            const newConfig = { ...config, headers: newHeaders };
-            return newConfig;
-        }, {
-            updatedAt: getDateInFuture(2),
-        });
-    };
-    return { setQueryHeaders, getHeaders };
-};
-
 const useKeyTrackerModel = (keyTracker) => {
     const queryClient = useQueryClient();
     const getQueryKey = (innerKeyTracker) => {
@@ -104,6 +104,7 @@ const useQueryModel = (keyTracker, exact = true) => {
     const queryClient = useQueryClient();
     const { getQueryKey } = useKeyTrackerModel(keyTracker);
     const queryKey = getQueryKey();
+    const config = useQueryConfig();
     const add = (data, position, path) => {
         let records = (findAll(path) ?? []);
         if (!position || position === 'end') {
@@ -159,7 +160,7 @@ const useQueryModel = (keyTracker, exact = true) => {
         return queryClient.setQueryData(queryKey, newData);
     };
     const getModelConfig = () => {
-        const { options } = queryClient.getQueryData(['config']) ?? {};
+        const { options } = config;
         const { modelConfig } = options ?? {};
         return modelConfig;
     };
@@ -631,8 +632,7 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
     const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
     const { getHeaders } = useQueryHeaders();
-    const queryClient = useQueryClient();
-    const config = queryClient.getQueryData(['config']);
+    const config = useQueryConfig();
     const sendRequest = async (res, rej, data) => {
         // get request headers
         const globalHeaders = getHeaders();
@@ -647,14 +647,14 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
         });
         if (patchResponse.status) {
             // scroll to top after success
-            if (config?.options?.context !== 'app') {
+            if (config.options?.context !== 'app') {
                 scrollToTop();
             }
             res(patchResponse);
         }
         else {
             // scroll to top after error
-            if (config?.options?.context !== 'app') {
+            if (config.options?.context !== 'app') {
                 scrollToTop();
             }
             rej(patchResponse);
@@ -672,14 +672,13 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
 
 const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelectors, }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
-    const queryClient = useQueryClient();
+    const config = useQueryConfig();
     const { getHeaders } = useQueryHeaders();
     const { isApp } = useReactNativeEnv();
     const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
     const sendRequest = async (res, rej, postData) => {
         // get request headers
         const globalHeaders = getHeaders();
-        const config = queryClient.getQueryData(['config']);
         const { data, requestConfig } = postData;
         delete requestConfig?.body;
         const postResponse = await makeRequest({
@@ -699,21 +698,23 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
         });
         if (postResponse.status) {
             // scroll to top after success
-            if (config?.options?.context !== 'app') {
+            if (config.options?.context !== 'app') {
                 scrollToTop();
             }
             res(postResponse);
         }
         else {
             // scroll to top after error
-            if (config?.options?.context !== 'app') {
+            if (config.options?.context !== 'app') {
                 scrollToTop();
             }
             rej(postResponse);
         }
     };
     // register post mutation
-    const mutation = useMutation(async (postData) => new Promise((res, rej) => sendRequest(res, rej, postData)));
+    const mutation = useMutation(async (postData) => new Promise((res, rej) => sendRequest(res, rej, postData)), {
+        mutationKey: [path, { type: 'mutation' }],
+    });
     const post = async (data, options) => {
         const { requestConfig, ...otherOptions } = options ?? {};
         return mutation.mutateAsync({ data, requestConfig }, otherOptions);

package/dist/index.mjs.map

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

package/dist/model/useQueryModel.js

@@ -1,12 +1,15 @@
 import { useQueryClient } from '@tanstack/react-query';
 import result from 'lodash.result';
 import lodashSet from 'lodash.set';
+import 'url-search-params-polyfill';
+import { useQueryConfig } from '../config/useQueryConfig.js';
 import { useKeyTrackerModel } from './useKeyTrackerModel.js';
 
 const useQueryModel = (keyTracker, exact = true) => {
     const queryClient = useQueryClient();
     const { getQueryKey } = useKeyTrackerModel(keyTracker);
     const queryKey = getQueryKey();
+    const config = useQueryConfig();
     const add = (data, position, path) => {
         let records = (findAll(path) ?? []);
         if (!position || position === 'end') {
@@ -62,7 +65,7 @@ const useQueryModel = (keyTracker, exact = true) => {
         return queryClient.setQueryData(queryKey, newData);
     };
     const getModelConfig = () => {
-        const { options } = queryClient.getQueryData(['config']) ?? {};
+        const { options } = config;
         const { modelConfig } = options ?? {};
         return modelConfig;
     };

package/dist/model/useQueryModel.js.map

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

package/dist/queries/usePatchRequest.js

@@ -1,6 +1,7 @@
-import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import 'url-search-params-polyfill';
 import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
+import { useQueryConfig } from '../config/useQueryConfig.js';
 import { useQueryHeaders } from '../config/useQueryHeaders.js';
 import { scrollToTop } from '../helpers/scrollToTop.js';
 import { useUploadProgress } from '../hooks/useUploadProgress.js';
@@ -12,8 +13,7 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
     const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
     const { getHeaders } = useQueryHeaders();
-    const queryClient = useQueryClient();
-    const config = queryClient.getQueryData(['config']);
+    const config = useQueryConfig();
     const sendRequest = async (res, rej, data) => {
         // get request headers
         const globalHeaders = getHeaders();
@@ -28,14 +28,14 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
         });
         if (patchResponse.status) {
             // scroll to top after success
-            if (config?.options?.context !== 'app') {
+            if (config.options?.context !== 'app') {
                 scrollToTop();
             }
             res(patchResponse);
         }
         else {
             // scroll to top after error
-            if (config?.options?.context !== 'app') {
+            if (config.options?.context !== 'app') {
                 scrollToTop();
             }
             rej(patchResponse);

package/dist/queries/usePostRequest.js

@@ -1,6 +1,7 @@
-import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import 'url-search-params-polyfill';
 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 { scrollToTop } from '../helpers/scrollToTop.js';
@@ -11,14 +12,13 @@ import { HttpMethod } from '../request/request.enum.js';
 
 const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelectors, }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
-    const queryClient = useQueryClient();
+    const config = useQueryConfig();
     const { getHeaders } = useQueryHeaders();
     const { isApp } = useReactNativeEnv();
     const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
     const sendRequest = async (res, rej, postData) => {
         // get request headers
         const globalHeaders = getHeaders();
-        const config = queryClient.getQueryData(['config']);
         const { data, requestConfig } = postData;
         delete requestConfig?.body;
         const postResponse = await makeRequest({
@@ -38,21 +38,23 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
         });
         if (postResponse.status) {
             // scroll to top after success
-            if (config?.options?.context !== 'app') {
+            if (config.options?.context !== 'app') {
                 scrollToTop();
             }
             res(postResponse);
         }
         else {
             // scroll to top after error
-            if (config?.options?.context !== 'app') {
+            if (config.options?.context !== 'app') {
                 scrollToTop();
             }
             rej(postResponse);
         }
     };
     // register post mutation
-    const mutation = useMutation(async (postData) => new Promise((res, rej) => sendRequest(res, rej, postData)));
+    const mutation = useMutation(async (postData) => new Promise((res, rej) => sendRequest(res, rej, postData)), {
+        mutationKey: [path, { type: 'mutation' }],
+    });
     const post = async (data, options) => {
         const { requestConfig, ...otherOptions } = options ?? {};
         return mutation.mutateAsync({ data, requestConfig }, otherOptions);

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

@@ -6,6 +6,8 @@ export interface BootstrapConfig {
     };
     context?: ContextType;
     modelConfig?: BootstrapModelConfig;
+    mutationMiddleware?: (mutateRequest?: any, mutateResponse?: any) => Promise<boolean>;
+    queryMiddleware?: (queryRequest?: any, queryResponse?: any) => Promise<boolean>;
 }
 export interface BootstrapModelConfig {
     idColumn: string;

package/package.json

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

package/src/config/bootstrapQueryRequest.ts

@@ -1,19 +1,22 @@
 import type { QueryClient } from '@tanstack/react-query';
 import 'url-search-params-polyfill';
-import type { BootstrapConfig, TanstackQueryConfig } from '../types';
+import type { BootstrapConfig } from '../types';
 
 export const bootstrapQueryRequest = (queryClient: QueryClient, options?: BootstrapConfig): void => {
   // make query config doesn't expire
-  queryClient.setQueryDefaults(['config'], {
-    staleTime: Infinity,
-    cacheTime: Infinity,
-  });
 
   // set default query config
-  queryClient.setQueryData<TanstackQueryConfig>(['config'], {
+  const defaultMeta = {
     headers: {
       Authorization: ``,
     },
     options,
+  };
+
+  queryClient.setDefaultOptions({
+    queries: {
+      meta: defaultMeta,
+    },
+    mutations: { meta: defaultMeta },
   });
 };

package/src/config/useQueryConfig.ts

@@ -4,7 +4,8 @@ import type { TanstackQueryConfig } from '../types';
 export const useQueryConfig = (): TanstackQueryConfig => {
   const queryClient = useQueryClient();
 
-  const { headers = {}, options = {} } = queryClient.getQueryData<TanstackQueryConfig>(['config']) ?? {};
+  const mutationMeta = (queryClient.getDefaultOptions().mutations?.meta ?? {}) as unknown as TanstackQueryConfig;
+  const queryMeta = (queryClient.getDefaultOptions().queries?.meta ?? {}) as unknown as TanstackQueryConfig;
 
-  return { headers, options };
+  return { ...queryMeta, ...mutationMeta };
 };

package/src/config/useQueryHeaders.ts

@@ -1,33 +1,27 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { getDateInFuture } from '../helpers';
 import type { IUseQueryHeaders, TanstackQueryConfig } from '../types';
+import { useQueryConfig } from './useQueryConfig';
 
 export const useQueryHeaders = (): IUseQueryHeaders => {
   const queryClient = useQueryClient();
+  const { headers, options } = useQueryConfig();
 
   const getHeaders = (): TanstackQueryConfig['headers'] => {
-    const config = queryClient.getQueryData(['config']) as TanstackQueryConfig;
-    return config.headers;
+    return headers;
   };
 
   const setQueryHeaders = (newHeaders: TanstackQueryConfig['headers']) => {
-    // make sure the config does not expire
-    queryClient.setQueryDefaults(['config'], {
-      staleTime: Infinity,
-      cacheTime: Infinity,
-    });
+    const defaultMeta = {
+      headers: { ...headers, ...newHeaders },
+      options,
+    };
 
-    // set the config
-    queryClient.setQueryData<TanstackQueryConfig>(
-      ['config'],
-      (config): TanstackQueryConfig => {
-        const newConfig = { ...config, headers: newHeaders };
-        return newConfig;
+    queryClient.setDefaultOptions({
+      queries: {
+        meta: defaultMeta,
       },
-      {
-        updatedAt: getDateInFuture(2),
-      }
-    );
+      mutations: { meta: defaultMeta },
+    });
   };
 
   return { setQueryHeaders, getHeaders };

package/src/config/useReactNativeEnv.ts

@@ -1,13 +1,11 @@
-import { useQueryClient } from '@tanstack/react-query';
-import type { TanstackQueryConfig } from '../types';
+import { useQueryConfig } from './useQueryConfig';
 
 export const useReactNativeEnv = () => {
-  const queryClient = useQueryClient();
-  const config = queryClient.getQueryData<TanstackQueryConfig>(['config']);
+  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/useQueryModel.ts

@@ -1,7 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query';
 import result from 'lodash.result';
 import { default as lodashSet } from 'lodash.set';
-import type { TanstackQueryConfig } from '../types';
+import { useQueryConfig } from '../config';
 import type { QueryModelAddPosition, QueryModelBuilder } from './model.interface';
 import { useKeyTrackerModel } from './useKeyTrackerModel';
 
@@ -9,6 +9,7 @@ export const useQueryModel = <T>(keyTracker: string, exact: boolean = true): Que
   const queryClient = useQueryClient();
   const { getQueryKey } = useKeyTrackerModel(keyTracker);
   const queryKey = getQueryKey() as any[];
+  const config = useQueryConfig();
 
   const add = (data: T, position?: QueryModelAddPosition, path?: string): T | undefined => {
     let records = (findAll(path) ?? []) as T[];
@@ -78,7 +79,7 @@ export const useQueryModel = <T>(keyTracker: string, exact: boolean = true): Que
   };
 
   const getModelConfig = () => {
-    const { options } = queryClient.getQueryData<TanstackQueryConfig>(['config']) ?? {};
+    const { options } = config;
     const { modelConfig } = options ?? {};
 
     return modelConfig;

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,9 +13,8 @@ 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
@@ -34,13 +32,13 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
 
     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);

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,7 +35,7 @@ export const usePostRequest = <TResponse>({
   ) => {
     // get request headers
     const globalHeaders: RawAxiosRequestHeaders = getHeaders();
-    const config = queryClient.getQueryData<TanstackQueryConfig>(['config']);
+
     const { data, requestConfig } = postData;
 
     delete requestConfig?.body;
@@ -58,13 +59,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);
@@ -76,7 +77,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

@@ -7,6 +7,8 @@ export interface BootstrapConfig {
   };
   context?: ContextType;
   modelConfig?: BootstrapModelConfig;
+  mutationMiddleware?: (mutateRequest?: any, mutateResponse?: any) => Promise<boolean>;
+  queryMiddleware?: (queryRequest?: any, queryResponse?: any) => Promise<boolean>;
 }
 
 export interface BootstrapModelConfig {