@ventlio/tanstack-query 0.2.24 → 0.2.26

package/dist/config/index.d.ts

@@ -1,3 +1,4 @@
 export * from './config.interface';
 export * from './useEnvironmentVariables';
 export * from './useQueryConfig';
+export * from './useQueryHeaders';

package/dist/config/useQueryHeaders.d.ts

@@ -0,0 +1,2 @@
+import type { IUseQueryHeaders } from '../types';
+export declare const useQueryHeaders: () => IUseQueryHeaders;

package/dist/config/useQueryHeaders.js

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

package/dist/{contexts → 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.d.ts

@@ -1,5 +1,4 @@
 export * from './config';
-export * from './contexts';
 export * from './helpers';
 export * from './model';
 export * from './queries';

package/dist/index.js

@@ -2,8 +2,7 @@
 
 var useEnvironmentVariables = require('./config/useEnvironmentVariables.js');
 var useQueryConfig = require('./config/useQueryConfig.js');
-var QueryClientRequestProvider = require('./contexts/QueryClientRequestProvider.js');
-var useQueryHeaders = require('./contexts/useQueryHeaders.js');
+var useQueryHeaders = require('./config/useQueryHeaders.js');
 var scrollToTop = require('./helpers/scrollToTop.js');
 var useKeyTrackerModel = require('./model/useKeyTrackerModel.js');
 var useQueryModel = require('./model/useQueryModel.js');
@@ -22,8 +21,6 @@ var transformer = require('./request/transformer.js');
 
 exports.useEnvironmentVariables = useEnvironmentVariables.useEnvironmentVariables;
 exports.useQueryConfig = useQueryConfig.useQueryConfig;
-exports.QueryClientRequestProvider = QueryClientRequestProvider.QueryClientRequestProvider;
-exports.RequestHeaderProvider = QueryClientRequestProvider.RequestHeaderProvider;
 exports.useQueryHeaders = useQueryHeaders.useQueryHeaders;
 exports.scrollToTop = scrollToTop.scrollToTop;
 exports.useKeyTrackerModel = useKeyTrackerModel.useKeyTrackerModel;

package/dist/index.js.map

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

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { useQueryClient, QueryClientProvider, useQuery, useMutation } from '@tanstack/react-query';
-import React, { createContext, useState, useCallback, useMemo, useContext, useEffect, startTransition } from 'react';
+import { useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
+import { useState, useMemo, useEffect, startTransition } from 'react';
 import axios from 'axios';
 
 const useEnvironmentVariables = () => {
@@ -17,24 +17,23 @@ const useQueryConfig = () => {
     return { headers };
 };
 
-const RequestHeaderProvider = createContext({
-    headers: {},
-    setHeaders: (_newHeaders) => {
-        //
-    },
-});
-const QueryClientRequestProvider = ({ client, children, }) => {
-    const [headers, updateHeaders] = useState({});
-    const setHeaders = useCallback((newHeaders) => {
-        updateHeaders(newHeaders);
-    }, []);
-    const requestContextValue = useMemo(() => ({ headers, setHeaders }), [headers, setHeaders]);
-    return (React.createElement(QueryClientProvider, { client: client },
-        React.createElement(RequestHeaderProvider.Provider, { value: requestContextValue }, children)));
-};
-
 const useQueryHeaders = () => {
-    return useContext(RequestHeaderProvider);
+    const queryClient = useQueryClient();
+    const getHeadersAsync = async () => {
+        return queryClient.ensureQueryData({
+            queryKey: ['config'],
+            queryFn: () => {
+                return queryClient.getQueryData(['config']);
+            },
+        });
+    };
+    const setQueryHeaders = (newHeaders) => {
+        queryClient.setQueryData(['config'], (config) => {
+            const newConfig = { ...config, headers: newHeaders };
+            return newConfig;
+        });
+    };
+    return { setQueryHeaders, getHeadersAsync };
 };
 
 const scrollToTop = () => {
@@ -179,9 +178,12 @@ const useDeleteRequest = () => {
     const [requestPath, updateDeletePath] = useState('');
     const [options, setOptions] = useState();
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
-    const { headers } = useQueryHeaders();
+    const { getHeadersAsync } = useQueryHeaders();
     const query = useQuery([requestPath, {}], () => new Promise((res, rej) => {
         setTimeout(async () => {
+            // get request headers
+            const headers = (await getHeadersAsync())
+                .headers;
             const postResponse = await makeRequest({
                 path: requestPath,
                 headers,
@@ -222,11 +224,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 } = useQueryHeaders();
+    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()).headers;
         const postResponse = await makeRequest({
             path: requestPath,
             headers,
@@ -319,31 +323,36 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
 
 const usePatchRequest = ({ path }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
-    const { headers } = useQueryHeaders();
+    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())
+                .headers;
+            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);
@@ -353,35 +362,40 @@ const usePatchRequest = ({ path }) => {
 
 const usePostRequest = ({ path, isFormData = false, }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables();
-    const { headers } = useQueryHeaders();
+    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())
+                .headers;
+            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);
@@ -389,5 +403,5 @@ const usePostRequest = ({ path, isFormData = false, }) => {
     return { post, ...mutation };
 };
 
-export { ContentType, HttpMethod, QueryClientRequestProvider, RequestHeaderProvider, axiosInstance, buildFormData, errorTransformer, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useRefetchQuery };
+export { ContentType, HttpMethod, axiosInstance, buildFormData, errorTransformer, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useRefetchQuery };
 //# sourceMappingURL=index.mjs.map

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

@@ -1,12 +1,12 @@
 'use strict';
 
 var reactQuery = require('@tanstack/react-query');
-var React = require('react');
+var react = require('react');
 
 const useKeyTrackerModel = (keyTracker) => {
     const queryClient = reactQuery.useQueryClient();
-    const [data, setData] = React.useState();
-    const [queryKey, setQueryKey] = React.useState();
+    const [data, setData] = react.useState();
+    const [queryKey, setQueryKey] = react.useState();
     const getQueryKey = (innerKeyTracker) => {
         const key = queryClient.getQueryData([
             innerKeyTracker ?? keyTracker,

package/dist/queries/useDeleteRequest.js

@@ -1,21 +1,23 @@
 'use strict';
 
 var reactQuery = require('@tanstack/react-query');
-var React = require('react');
+var react = require('react');
 var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
-require('../contexts/QueryClientRequestProvider.js');
-var useQueryHeaders = require('../contexts/useQueryHeaders.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 useDeleteRequest = () => {
-    const [requestPath, updateDeletePath] = React.useState('');
-    const [options, setOptions] = React.useState();
+    const [requestPath, updateDeletePath] = react.useState('');
+    const [options, setOptions] = react.useState();
     const { API_URL, TIMEOUT } = useEnvironmentVariables.useEnvironmentVariables();
-    const { headers } = useQueryHeaders.useQueryHeaders();
+    const { getHeadersAsync } = useQueryHeaders.useQueryHeaders();
     const query = reactQuery.useQuery([requestPath, {}], () => new Promise((res, rej) => {
         setTimeout(async () => {
+            // get request headers
+            const headers = (await getHeadersAsync())
+                .headers;
             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

@@ -1,24 +1,25 @@
 'use strict';
 
 var reactQuery = require('@tanstack/react-query');
-var React = require('react');
+var react = require('react');
 var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
-require('../contexts/QueryClientRequestProvider.js');
-var useQueryHeaders = require('../contexts/useQueryHeaders.js');
+var useQueryHeaders = require('../config/useQueryHeaders.js');
 require('axios');
 var makeRequest = require('../request/make-request.js');
 require('../request/request.enum.js');
 
 const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
-    const [requestPath, updatePath] = React.useState(path);
-    const [options, setOptions] = React.useState(queryOptions);
-    const [page, setPage] = React.useState(1);
+    const [requestPath, updatePath] = react.useState(path);
+    const [options, setOptions] = react.useState(queryOptions);
+    const [page, setPage] = react.useState(1);
     const { API_URL, TIMEOUT } = useEnvironmentVariables.useEnvironmentVariables();
-    const { headers } = useQueryHeaders.useQueryHeaders();
+    const { getHeadersAsync } = useQueryHeaders.useQueryHeaders();
     let queryClient = reactQuery.useQueryClient();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    queryClient = React.useMemo(() => queryClient, []);
+    queryClient = react.useMemo(() => queryClient, []);
     const sendRequest = async (res, rej) => {
+        // get request headers
+        const headers = (await getHeadersAsync()).headers;
         const postResponse = await makeRequest.makeRequest({
             path: requestPath,
             headers,
@@ -38,12 +39,12 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
         enabled: load,
         ...options,
     });
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (path) {
             updatePath(path);
         }
     }, [path]);
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (keyTracker) {
             queryClient.setQueryData([keyTracker], [requestPath, {}]);
         }
@@ -83,12 +84,12 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
         updatePath(constructPaginationLink(requestPath, pageNumber));
     };
     const updatedPathAsync = async (link) => {
-        React.startTransition(() => {
+        react.startTransition(() => {
             updatePath(link);
         });
     };
     const setOptionsAsync = async (fetchOptions) => {
-        React.startTransition(() => {
+        react.startTransition(() => {
             setOptions(fetchOptions);
         });
     };

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,41 +1,45 @@
 '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');
-require('../contexts/QueryClientRequestProvider.js');
-var useQueryHeaders = require('../contexts/useQueryHeaders.js');
 
 const usePatchRequest = ({ path }) => {
     const { API_URL, TIMEOUT } = useEnvironmentVariables.useEnvironmentVariables();
-    const { headers } = useQueryHeaders.useQueryHeaders();
+    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())
+                .headers;
+            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,43 +2,47 @@
 
 var reactQuery = require('@tanstack/react-query');
 var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
-require('../contexts/QueryClientRequestProvider.js');
-var useQueryHeaders = require('../contexts/useQueryHeaders.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 } = useQueryHeaders.useQueryHeaders();
+    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())
+                .headers;
+            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<TanstackQueryConfig>;
     setQueryHeaders: (header: TanstackQueryConfig['headers']) => void;
 }

package/package.json

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

package/src/config/index.ts

@@ -1,3 +1,4 @@
 export * from './config.interface';
 export * from './useEnvironmentVariables';
 export * from './useQueryConfig';
+export * from './useQueryHeaders';

package/src/config/useQueryHeaders.ts

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

package/src/index.ts

@@ -1,5 +1,4 @@
 export * from './config';
-export * from './contexts';
 export * from './helpers';
 export * from './model';
 export * from './queries';

package/src/queries/useDeleteRequest.ts

@@ -1,8 +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 } from '../config';
-import { useQueryHeaders } from '../contexts';
+import { useEnvironmentVariables, useQueryHeaders } from '../config';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
 
@@ -12,13 +12,17 @@ export const useDeleteRequest = <TResponse>() => {
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
-  const { headers } = useQueryHeaders();
+  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())
+            .headers;
+
           const postResponse = await makeRequest<TResponse>({
             path: requestPath,
             headers,

package/src/queries/useGetRequest.ts

@@ -1,8 +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 } from '../config';
-import { useQueryHeaders } from '../contexts';
+import { useEnvironmentVariables, useQueryHeaders } from '../config';
+
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
 import type { IPagination, TanstackQueryOption } from './queries.interface';
@@ -23,7 +24,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   const [page, setPage] = useState<number>(1);
 
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
-  const { headers } = useQueryHeaders();
+  const { getHeadersAsync } = useQueryHeaders();
 
   let queryClient = useQueryClient();
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -38,6 +39,9 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     ) => void,
     rej: (reason?: any) => void
   ) => {
+    // get request headers
+    const headers: RawAxiosRequestHeaders = (await getHeadersAsync()).headers;
+
     const postResponse = await makeRequest<TResponse>({
       path: requestPath,
       headers,

package/src/queries/usePatchRequest.ts

@@ -1,10 +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 } from '../config';
-import { useQueryHeaders } from '../contexts';
+import type { RawAxiosRequestHeaders } from 'axios';
 import type {
   IRequestError,
   IRequestSuccess,
@@ -12,33 +12,40 @@ import type {
 
 export const usePatchRequest = <TResponse>({ path }: { path: string }) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
-  const { headers } = useQueryHeaders();
+
+  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())
+            .headers;
+
+          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,7 +1,8 @@
 import type { MutateOptions } from '@tanstack/react-query';
 import { useMutation } from '@tanstack/react-query';
-import { useEnvironmentVariables } from '../config';
-import { useQueryHeaders } from '../contexts';
+import { useEnvironmentVariables, useQueryHeaders } from '../config';
+
+import type { RawAxiosRequestHeaders } from 'axios';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
 
@@ -14,37 +15,43 @@ export const usePostRequest = <TResponse>({
 }) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
-  const { headers } = useQueryHeaders();
+  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())
+            .headers;
+
+          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<TanstackQueryConfig>;
   setQueryHeaders: (header: TanstackQueryConfig['headers']) => void;
 }

package/dist/contexts/QueryClientRequestProvider.d.ts

@@ -1,12 +0,0 @@
-import type { QueryClient } from '@tanstack/react-query';
-import type { RawAxiosRequestHeaders } from 'axios';
-import React from 'react';
-export interface IRequestHeaderProvider {
-    headers: RawAxiosRequestHeaders;
-    setHeaders: (newHeaders: RawAxiosRequestHeaders) => void;
-}
-export declare const RequestHeaderProvider: React.Context<IRequestHeaderProvider>;
-export declare const QueryClientRequestProvider: ({ client, children, }: {
-    client: QueryClient;
-    children: React.ReactNode;
-}) => JSX.Element;

package/dist/contexts/QueryClientRequestProvider.js

@@ -1,24 +0,0 @@
-'use strict';
-
-var reactQuery = require('@tanstack/react-query');
-var React = require('react');
-
-const RequestHeaderProvider = React.createContext({
-    headers: {},
-    setHeaders: (_newHeaders) => {
-        //
-    },
-});
-const QueryClientRequestProvider = ({ client, children, }) => {
-    const [headers, updateHeaders] = React.useState({});
-    const setHeaders = React.useCallback((newHeaders) => {
-        updateHeaders(newHeaders);
-    }, []);
-    const requestContextValue = React.useMemo(() => ({ headers, setHeaders }), [headers, setHeaders]);
-    return (React.createElement(reactQuery.QueryClientProvider, { client: client },
-        React.createElement(RequestHeaderProvider.Provider, { value: requestContextValue }, children)));
-};
-
-exports.QueryClientRequestProvider = QueryClientRequestProvider;
-exports.RequestHeaderProvider = RequestHeaderProvider;
-//# sourceMappingURL=QueryClientRequestProvider.js.map

package/dist/contexts/QueryClientRequestProvider.js.map

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

package/dist/contexts/index.d.ts

@@ -1,2 +0,0 @@
-export * from './QueryClientRequestProvider';
-export * from './useQueryHeaders';

package/dist/contexts/useQueryHeaders.d.ts

@@ -1,2 +0,0 @@
-import type { IRequestHeaderProvider } from './QueryClientRequestProvider';
-export declare const useQueryHeaders: () => IRequestHeaderProvider;

package/dist/contexts/useQueryHeaders.js

@@ -1,11 +0,0 @@
-'use strict';
-
-var React = require('react');
-var QueryClientRequestProvider = require('./QueryClientRequestProvider.js');
-
-const useQueryHeaders = () => {
-    return React.useContext(QueryClientRequestProvider.RequestHeaderProvider);
-};
-
-exports.useQueryHeaders = useQueryHeaders;
-//# sourceMappingURL=useQueryHeaders.js.map

package/src/contexts/QueryClientRequestProvider.tsx

@@ -1,48 +0,0 @@
-import type { QueryClient } from '@tanstack/react-query';
-import { QueryClientProvider } from '@tanstack/react-query';
-import type { RawAxiosRequestHeaders } from 'axios';
-import React, { createContext, useCallback, useMemo, useState } from 'react';
-
-export interface IRequestHeaderProvider {
-  headers: RawAxiosRequestHeaders;
-  setHeaders: (newHeaders: RawAxiosRequestHeaders) => void;
-}
-
-export const RequestHeaderProvider = createContext<IRequestHeaderProvider>({
-  headers: {},
-  setHeaders: (_newHeaders: IRequestHeaderProvider['headers']) => {
-    //
-  },
-});
-
-export const QueryClientRequestProvider = ({
-  client,
-  children,
-}: {
-  client: QueryClient;
-  children: React.ReactNode;
-}) => {
-  const [headers, updateHeaders] = useState<IRequestHeaderProvider['headers']>(
-    {}
-  );
-
-  const setHeaders = useCallback(
-    (newHeaders: IRequestHeaderProvider['headers']) => {
-      updateHeaders(newHeaders);
-    },
-    []
-  );
-
-  const requestContextValue = useMemo(
-    () => ({ headers, setHeaders }),
-    [headers, setHeaders]
-  );
-
-  return (
-    <QueryClientProvider client={client}>
-      <RequestHeaderProvider.Provider value={requestContextValue}>
-        {children}
-      </RequestHeaderProvider.Provider>
-    </QueryClientProvider>
-  );
-};

package/src/contexts/index.ts

@@ -1,2 +0,0 @@
-export * from './QueryClientRequestProvider';
-export * from './useQueryHeaders';

package/src/contexts/useQueryHeaders.ts

@@ -1,7 +0,0 @@
-import { useContext } from 'react';
-import type { IRequestHeaderProvider } from './QueryClientRequestProvider';
-import { RequestHeaderProvider } from './QueryClientRequestProvider';
-
-export const useQueryHeaders = (): IRequestHeaderProvider => {
-  return useContext(RequestHeaderProvider);
-};