@ventlio/tanstack-query 0.2.23 → 0.2.25

package/dist/config/useQueryHeaders.js

@@ -1,18 +1,24 @@
 'use strict';
 
 var reactQuery = require('@tanstack/react-query');
-var useQueryConfig = require('./useQueryConfig.js');
 
 const useQueryHeaders = () => {
-    const { headers } = useQueryConfig.useQueryConfig();
     const queryClient = reactQuery.useQueryClient();
+    const getHeadersAsync = async () => {
+        return queryClient.ensureQueryData({
+            queryKey: ['config'],
+            queryFn: () => {
+                return queryClient.getQueryData(['config'])?.headers;
+            },
+        });
+    };
     const setQueryHeaders = (newHeaders) => {
         queryClient.setQueryData(['config'], (config) => {
             const newConfig = { ...config, headers: newHeaders };
             return newConfig;
         });
     };
-    return { headers, setQueryHeaders };
+    return { setQueryHeaders, getHeadersAsync };
 };
 
 exports.useQueryHeaders = useQueryHeaders;

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/index.mjs

@@ -18,15 +18,22 @@ const useQueryConfig = () => {
 };
 
 const useQueryHeaders = () => {
-    const { headers } = useQueryConfig();
     const queryClient = useQueryClient();
+    const getHeadersAsync = async () => {
+        return queryClient.ensureQueryData({
+            queryKey: ['config'],
+            queryFn: () => {
+                return queryClient.getQueryData(['config'])?.headers;
+            },
+        });
+    };
     const setQueryHeaders = (newHeaders) => {
         queryClient.setQueryData(['config'], (config) => {
             const newConfig = { ...config, headers: newHeaders };
             return newConfig;
         });
     };
-    return { headers, setQueryHeaders };
+    return { setQueryHeaders, getHeadersAsync };
 };
 
 const scrollToTop = () => {
@@ -171,9 +178,11 @@ const useDeleteRequest = () => {
     const [requestPath, updateDeletePath] = useState('');
     const [options, setOptions] = useState();
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
-    const { headers } = useQueryConfig();
+    const { getHeadersAsync } = useQueryHeaders();
     const query = useQuery([requestPath, {}], () => new Promise((res, rej) => {
         setTimeout(async () => {
+            // get request headers
+            const headers = await getHeadersAsync();
             const postResponse = await makeRequest({
                 path: requestPath,
                 headers,
@@ -214,11 +223,13 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
     const [options, setOptions] = useState(queryOptions);
     const [page, setPage] = useState(1);
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
-    const { headers } = useQueryConfig();
+    const { getHeadersAsync } = useQueryHeaders();
     let queryClient = useQueryClient();
     // eslint-disable-next-line react-hooks/exhaustive-deps
     queryClient = useMemo(() => queryClient, []);
     const sendRequest = async (res, rej) => {
+        // get request headers
+        const headers = await getHeadersAsync();
         const postResponse = await makeRequest({
             path: requestPath,
             headers,
@@ -311,31 +322,35 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
 
 const usePatchRequest = ({ path }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
-    const { headers } = useQueryConfig();
+    const { getHeadersAsync } = useQueryHeaders();
     // register post mutation
     const mutation = useMutation((postData) => new Promise((res, rej) => {
-        makeRequest({
-            path: path,
-            body: postData,
-            method: HttpMethod.PATCH,
-            headers,
-            baseURL: API_URL,
-            timeout: TIMEOUT,
-        }).then((postResponse) => {
-            if (postResponse.status) {
-                // scroll to top after success
-                scrollToTop();
-                res(postResponse);
-            }
-            else {
-                // scroll to top after error
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth',
-                });
-                rej(postResponse);
-            }
-        });
+        return (async () => {
+            // get request headers
+            const headers = await getHeadersAsync();
+            makeRequest({
+                path: path,
+                body: postData,
+                method: HttpMethod.PATCH,
+                headers,
+                baseURL: API_URL,
+                timeout: TIMEOUT,
+            }).then((postResponse) => {
+                if (postResponse.status) {
+                    // scroll to top after success
+                    scrollToTop();
+                    res(postResponse);
+                }
+                else {
+                    // scroll to top after error
+                    window.scrollTo({
+                        top: 0,
+                        behavior: 'smooth',
+                    });
+                    rej(postResponse);
+                }
+            });
+        })();
     }));
     const patch = async (postData, options) => {
         return mutation.mutateAsync(postData, options);
@@ -345,35 +360,39 @@ const usePatchRequest = ({ path }) => {
 
 const usePostRequest = ({ path, isFormData = false, }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
-    const { headers } = useQueryConfig();
+    const { getHeadersAsync } = useQueryHeaders();
     // register post mutation
     const mutation = useMutation(async (postData) => new Promise((res, rej) => {
-        makeRequest({
-            path: path,
-            body: postData,
-            method: HttpMethod.POST,
-            isFormData,
-            headers,
-            baseURL: API_URL,
-            timeout: TIMEOUT,
-        }).then((postResponse) => {
-            if (postResponse.status) {
-                // scroll to top after success
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth',
-                });
-                res(postResponse);
-            }
-            else {
-                // scroll to top after error
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth',
-                });
-                rej(postResponse);
-            }
-        });
+        return (async () => {
+            // get request headers
+            const headers = await getHeadersAsync();
+            makeRequest({
+                path: path,
+                body: postData,
+                method: HttpMethod.POST,
+                isFormData,
+                headers,
+                baseURL: API_URL,
+                timeout: TIMEOUT,
+            }).then((postResponse) => {
+                if (postResponse.status) {
+                    // scroll to top after success
+                    window.scrollTo({
+                        top: 0,
+                        behavior: 'smooth',
+                    });
+                    res(postResponse);
+                }
+                else {
+                    // scroll to top after error
+                    window.scrollTo({
+                        top: 0,
+                        behavior: 'smooth',
+                    });
+                    rej(postResponse);
+                }
+            });
+        })();
     }));
     const post = async (postData, options) => {
         return mutation.mutateAsync(postData, options);

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/queries/useDeleteRequest.js

@@ -3,7 +3,7 @@
 var reactQuery = require('@tanstack/react-query');
 var react = require('react');
 var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
-var useQueryConfig = require('../config/useQueryConfig.js');
+var useQueryHeaders = require('../config/useQueryHeaders.js');
 require('axios');
 var makeRequest = require('../request/make-request.js');
 var request_enum = require('../request/request.enum.js');
@@ -12,9 +12,11 @@ const useDeleteRequest = () => {
     const [requestPath, updateDeletePath] = react.useState('');
     const [options, setOptions] = react.useState();
     const { API_URL, TIMEOUT } = useEnvironmentVariables.useEnvironmentVariables();
-    const { headers } = useQueryConfig.useQueryConfig();
+    const { getHeadersAsync } = useQueryHeaders.useQueryHeaders();
     const query = reactQuery.useQuery([requestPath, {}], () => new Promise((res, rej) => {
         setTimeout(async () => {
+            // get request headers
+            const headers = await getHeadersAsync();
             const postResponse = await makeRequest.makeRequest({
                 path: requestPath,
                 headers,

package/dist/queries/useDeleteRequest.js.map

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

package/dist/queries/useGetRequest.js

@@ -3,7 +3,7 @@
 var reactQuery = require('@tanstack/react-query');
 var react = require('react');
 var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
-var useQueryConfig = require('../config/useQueryConfig.js');
+var useQueryHeaders = require('../config/useQueryHeaders.js');
 require('axios');
 var makeRequest = require('../request/make-request.js');
 require('../request/request.enum.js');
@@ -13,11 +13,13 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
     const [options, setOptions] = react.useState(queryOptions);
     const [page, setPage] = react.useState(1);
     const { API_URL, TIMEOUT } = useEnvironmentVariables.useEnvironmentVariables();
-    const { headers } = useQueryConfig.useQueryConfig();
+    const { getHeadersAsync } = useQueryHeaders.useQueryHeaders();
     let queryClient = reactQuery.useQueryClient();
     // eslint-disable-next-line react-hooks/exhaustive-deps
     queryClient = react.useMemo(() => queryClient, []);
     const sendRequest = async (res, rej) => {
+        // get request headers
+        const headers = await getHeadersAsync();
         const postResponse = await makeRequest.makeRequest({
             path: requestPath,
             headers,

package/dist/queries/useGetRequest.js.map

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

package/dist/queries/usePatchRequest.js

@@ -1,40 +1,44 @@
 'use strict';
 
 var reactQuery = require('@tanstack/react-query');
+var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
+var useQueryHeaders = require('../config/useQueryHeaders.js');
 var scrollToTop = require('../helpers/scrollToTop.js');
 require('axios');
 var makeRequest = require('../request/make-request.js');
 var request_enum = require('../request/request.enum.js');
-var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
-var useQueryConfig = require('../config/useQueryConfig.js');
 
 const usePatchRequest = ({ path }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables.useEnvironmentVariables();
-    const { headers } = useQueryConfig.useQueryConfig();
+    const { getHeadersAsync } = useQueryHeaders.useQueryHeaders();
     // register post mutation
     const mutation = reactQuery.useMutation((postData) => new Promise((res, rej) => {
-        makeRequest.makeRequest({
-            path: path,
-            body: postData,
-            method: request_enum.HttpMethod.PATCH,
-            headers,
-            baseURL: API_URL,
-            timeout: TIMEOUT,
-        }).then((postResponse) => {
-            if (postResponse.status) {
-                // scroll to top after success
-                scrollToTop.scrollToTop();
-                res(postResponse);
-            }
-            else {
-                // scroll to top after error
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth',
-                });
-                rej(postResponse);
-            }
-        });
+        return (async () => {
+            // get request headers
+            const headers = await getHeadersAsync();
+            makeRequest.makeRequest({
+                path: path,
+                body: postData,
+                method: request_enum.HttpMethod.PATCH,
+                headers,
+                baseURL: API_URL,
+                timeout: TIMEOUT,
+            }).then((postResponse) => {
+                if (postResponse.status) {
+                    // scroll to top after success
+                    scrollToTop.scrollToTop();
+                    res(postResponse);
+                }
+                else {
+                    // scroll to top after error
+                    window.scrollTo({
+                        top: 0,
+                        behavior: 'smooth',
+                    });
+                    rej(postResponse);
+                }
+            });
+        })();
     }));
     const patch = async (postData, options) => {
         return mutation.mutateAsync(postData, options);

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.js

@@ -2,42 +2,46 @@
 
 var reactQuery = require('@tanstack/react-query');
 var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
-var useQueryConfig = require('../config/useQueryConfig.js');
+var useQueryHeaders = require('../config/useQueryHeaders.js');
 require('axios');
 var makeRequest = require('../request/make-request.js');
 var request_enum = require('../request/request.enum.js');
 
 const usePostRequest = ({ path, isFormData = false, }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables.useEnvironmentVariables();
-    const { headers } = useQueryConfig.useQueryConfig();
+    const { getHeadersAsync } = useQueryHeaders.useQueryHeaders();
     // register post mutation
     const mutation = reactQuery.useMutation(async (postData) => new Promise((res, rej) => {
-        makeRequest.makeRequest({
-            path: path,
-            body: postData,
-            method: request_enum.HttpMethod.POST,
-            isFormData,
-            headers,
-            baseURL: API_URL,
-            timeout: TIMEOUT,
-        }).then((postResponse) => {
-            if (postResponse.status) {
-                // scroll to top after success
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth',
-                });
-                res(postResponse);
-            }
-            else {
-                // scroll to top after error
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth',
-                });
-                rej(postResponse);
-            }
-        });
+        return (async () => {
+            // get request headers
+            const headers = await getHeadersAsync();
+            makeRequest.makeRequest({
+                path: path,
+                body: postData,
+                method: request_enum.HttpMethod.POST,
+                isFormData,
+                headers,
+                baseURL: API_URL,
+                timeout: TIMEOUT,
+            }).then((postResponse) => {
+                if (postResponse.status) {
+                    // scroll to top after success
+                    window.scrollTo({
+                        top: 0,
+                        behavior: 'smooth',
+                    });
+                    res(postResponse);
+                }
+                else {
+                    // scroll to top after error
+                    window.scrollTo({
+                        top: 0,
+                        behavior: 'smooth',
+                    });
+                    rej(postResponse);
+                }
+            });
+        })();
     }));
     const post = async (postData, options) => {
         return mutation.mutateAsync(postData, options);

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

@@ -3,6 +3,6 @@ export interface TanstackQueryConfig {
     headers: RawAxiosRequestHeaders;
 }
 export interface IUseQueryHeaders {
-    headers: TanstackQueryConfig['headers'];
+    getHeadersAsync: () => Promise<RawAxiosRequestHeaders>;
     setQueryHeaders: (header: TanstackQueryConfig['headers']) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ventlio/tanstack-query",
-  "version": "0.2.23",
+  "version": "0.2.25",
   "license": "MIT",
   "main": "dist/index.js",
   "contributors": [
@@ -28,6 +28,7 @@
     "@tanstack/react-query": "^4.26.1",
     "axios": "^1.3.4",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-native": "*"
   },
   "peerDependenciesMeta": {
@@ -48,7 +49,8 @@
     "@tanstack/react-query": "^4.26.1",
     "@types/axios": "^0.14.0",
     "@types/node": "*",
-    "@types/react": "^18.0.28",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
     "axios": "^1.3.4",
@@ -62,6 +64,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^2.8.4",
     "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^4.4.0",
     "rollup": "^3.19.1",
     "rollup-plugin-typescript2": "^0.34.1",

package/src/config/useQueryHeaders.ts

@@ -1,11 +1,19 @@
 import { useQueryClient } from '@tanstack/react-query';
+import type { RawAxiosRequestHeaders } from 'axios';
 import type { IUseQueryHeaders, TanstackQueryConfig } from '../types';
-import { useQueryConfig } from './useQueryConfig';
 
 export const useQueryHeaders = (): IUseQueryHeaders => {
-  const { headers } = useQueryConfig();
   const queryClient = useQueryClient();
 
+  const getHeadersAsync = async (): Promise<RawAxiosRequestHeaders> => {
+    return queryClient.ensureQueryData({
+      queryKey: ['config'],
+      queryFn: () => {
+        return (queryClient.getQueryData(['config']) as any)?.headers;
+      },
+    });
+  };
+
   const setQueryHeaders = (newHeaders: TanstackQueryConfig['headers']) => {
     queryClient.setQueryData<TanstackQueryConfig>(['config'], (config): any => {
       const newConfig = { ...config, headers: newHeaders };
@@ -13,5 +21,5 @@ export const useQueryHeaders = (): IUseQueryHeaders => {
     });
   };
 
-  return { headers, setQueryHeaders };
+  return { setQueryHeaders, getHeadersAsync };
 };

package/src/queries/useDeleteRequest.ts

@@ -1,7 +1,8 @@
 import type { UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
+import type { RawAxiosRequestHeaders } from 'axios';
 import { useState } from 'react';
-import { useEnvironmentVariables, useQueryConfig } from '../config';
+import { useEnvironmentVariables, useQueryHeaders } from '../config';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
 
@@ -11,13 +12,16 @@ export const useDeleteRequest = <TResponse>() => {
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
-  const { headers } = useQueryConfig();
+  const { getHeadersAsync } = useQueryHeaders();
 
   const query = useQuery<any, any, IRequestSuccess<TResponse>>(
     [requestPath, {}],
     () =>
       new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => {
         setTimeout(async () => {
+          // get request headers
+          const headers: RawAxiosRequestHeaders = await getHeadersAsync();
+
           const postResponse = await makeRequest<TResponse>({
             path: requestPath,
             headers,

package/src/queries/useGetRequest.ts

@@ -1,7 +1,9 @@
 import type { UseQueryOptions } from '@tanstack/react-query';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
+import type { RawAxiosRequestHeaders } from 'axios';
 import { startTransition, useEffect, useMemo, useState } from 'react';
-import { useEnvironmentVariables, useQueryConfig } from '../config';
+import { useEnvironmentVariables, useQueryHeaders } from '../config';
+
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
 import type { IPagination, TanstackQueryOption } from './queries.interface';
@@ -22,7 +24,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   const [page, setPage] = useState<number>(1);
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
-  const { headers } = useQueryConfig();
+  const { getHeadersAsync } = useQueryHeaders();
 
   let queryClient = useQueryClient();
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -37,6 +39,9 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     ) => void,
     rej: (reason?: any) => void
   ) => {
+    // get request headers
+    const headers: RawAxiosRequestHeaders = await getHeadersAsync();
+
     const postResponse = await makeRequest<TResponse>({
       path: requestPath,
       headers,

package/src/queries/usePatchRequest.ts

@@ -1,9 +1,10 @@
 import type { MutateOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
+import { useEnvironmentVariables, useQueryHeaders } from '../config';
 import { scrollToTop } from '../helpers';
 import { HttpMethod, makeRequest } from '../request';
 
-import { useEnvironmentVariables, useQueryConfig } from '../config';
+import type { RawAxiosRequestHeaders } from 'axios';
 import type {
   IRequestError,
   IRequestSuccess,
@@ -11,33 +12,38 @@ import type {
 
 export const usePatchRequest = <TResponse>({ path }: { path: string }) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
-  const { headers } = useQueryConfig();
+
+  const { getHeadersAsync } = useQueryHeaders();
 
   // register post mutation
   const mutation = useMutation<IRequestSuccess<TResponse>, IRequestError>(
     (postData: any) =>
       new Promise<IRequestSuccess<TResponse>>((res, rej) => {
-        makeRequest<TResponse>({
-          path: path,
-          body: postData,
-          method: HttpMethod.PATCH,
-          headers,
-          baseURL: API_URL,
-          timeout: TIMEOUT,
-        }).then((postResponse) => {
-          if (postResponse.status) {
-            // scroll to top after success
-            scrollToTop();
-            res(postResponse as IRequestSuccess<TResponse>);
-          } else {
-            // scroll to top after error
-            window.scrollTo({
-              top: 0,
-              behavior: 'smooth',
-            });
-            rej(postResponse);
-          }
-        });
+        return (async () => {
+          // get request headers
+          const headers: RawAxiosRequestHeaders = await getHeadersAsync();
+          makeRequest<TResponse>({
+            path: path,
+            body: postData,
+            method: HttpMethod.PATCH,
+            headers,
+            baseURL: API_URL,
+            timeout: TIMEOUT,
+          }).then((postResponse) => {
+            if (postResponse.status) {
+              // scroll to top after success
+              scrollToTop();
+              res(postResponse as IRequestSuccess<TResponse>);
+            } else {
+              // scroll to top after error
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth',
+              });
+              rej(postResponse);
+            }
+          });
+        })();
       })
   );
 

package/src/queries/usePostRequest.ts

@@ -1,6 +1,8 @@
 import type { MutateOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
-import { useEnvironmentVariables, useQueryConfig } from '../config';
+import { useEnvironmentVariables, useQueryHeaders } from '../config';
+
+import type { RawAxiosRequestHeaders } from 'axios';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
 
@@ -13,37 +15,41 @@ export const usePostRequest = <TResponse>({
 }) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
-  const { headers } = useQueryConfig();
+  const { getHeadersAsync } = useQueryHeaders();
 
   // register post mutation
   const mutation = useMutation<IRequestSuccess<TResponse>, IRequestError>(
     async (postData: any) =>
       new Promise<IRequestSuccess<TResponse>>((res, rej) => {
-        makeRequest<TResponse>({
-          path: path,
-          body: postData,
-          method: HttpMethod.POST,
-          isFormData,
-          headers,
-          baseURL: API_URL,
-          timeout: TIMEOUT,
-        }).then((postResponse) => {
-          if (postResponse.status) {
-            // scroll to top after success
-            window.scrollTo({
-              top: 0,
-              behavior: 'smooth',
-            });
-            res(postResponse as IRequestSuccess<TResponse>);
-          } else {
-            // scroll to top after error
-            window.scrollTo({
-              top: 0,
-              behavior: 'smooth',
-            });
-            rej(postResponse);
-          }
-        });
+        return (async () => {
+          // get request headers
+          const headers: RawAxiosRequestHeaders = await getHeadersAsync();
+          makeRequest<TResponse>({
+            path: path,
+            body: postData,
+            method: HttpMethod.POST,
+            isFormData,
+            headers,
+            baseURL: API_URL,
+            timeout: TIMEOUT,
+          }).then((postResponse) => {
+            if (postResponse.status) {
+              // scroll to top after success
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth',
+              });
+              res(postResponse as IRequestSuccess<TResponse>);
+            } else {
+              // scroll to top after error
+              window.scrollTo({
+                top: 0,
+                behavior: 'smooth',
+              });
+              rej(postResponse);
+            }
+          });
+        })();
       })
   );
   const post = async (

package/src/types/index.ts

@@ -5,6 +5,6 @@ export interface TanstackQueryConfig {
 }
 
 export interface IUseQueryHeaders {
-  headers: TanstackQueryConfig['headers'];
+  getHeadersAsync: () => Promise<RawAxiosRequestHeaders>;
   setQueryHeaders: (header: TanstackQueryConfig['headers']) => void;
 }