@ventlio/tanstack-query 0.2.23 → 0.2.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/config/index.d.ts +0 -1
  2. package/dist/contexts/QueryClientRequestProvider.d.ts +12 -0
  3. package/dist/contexts/QueryClientRequestProvider.js +24 -0
  4. package/dist/contexts/QueryClientRequestProvider.js.map +1 -0
  5. package/dist/contexts/index.d.ts +2 -0
  6. package/dist/contexts/useQueryHeaders.d.ts +2 -0
  7. package/dist/contexts/useQueryHeaders.js +11 -0
  8. package/dist/{config → contexts}/useQueryHeaders.js.map +1 -1
  9. package/dist/index.d.ts +1 -0
  10. package/dist/index.js +4 -1
  11. package/dist/index.js.map +1 -1
  12. package/dist/index.mjs +24 -16
  13. package/dist/index.mjs.map +1 -1
  14. package/dist/model/useKeyTrackerModel.js +3 -3
  15. package/dist/queries/useDeleteRequest.js +6 -5
  16. package/dist/queries/useDeleteRequest.js.map +1 -1
  17. package/dist/queries/useGetRequest.js +12 -11
  18. package/dist/queries/useGetRequest.js.map +1 -1
  19. package/dist/queries/usePatchRequest.js +3 -2
  20. package/dist/queries/usePatchRequest.js.map +1 -1
  21. package/dist/queries/usePostRequest.js +3 -2
  22. package/dist/queries/usePostRequest.js.map +1 -1
  23. package/package.json +5 -2
  24. package/src/config/index.ts +0 -1
  25. package/src/contexts/QueryClientRequestProvider.tsx +48 -0
  26. package/src/contexts/index.ts +2 -0
  27. package/src/contexts/useQueryHeaders.ts +7 -0
  28. package/src/index.ts +1 -0
  29. package/src/queries/useDeleteRequest.ts +3 -2
  30. package/src/queries/useGetRequest.ts +3 -2
  31. package/src/queries/usePatchRequest.ts +3 -2
  32. package/src/queries/usePostRequest.ts +3 -2
  33. package/dist/config/useQueryHeaders.d.ts +0 -2
  34. package/dist/config/useQueryHeaders.js +0 -19
  35. package/src/config/useQueryHeaders.ts +0 -17
@@ -1,4 +1,3 @@
1
1
  export * from './config.interface';
2
2
  export * from './useEnvironmentVariables';
3
3
  export * from './useQueryConfig';
4
- export * from './useQueryHeaders';
@@ -0,0 +1,12 @@
1
+ import type { QueryClient } from '@tanstack/react-query';
2
+ import type { RawAxiosRequestHeaders } from 'axios';
3
+ import React from 'react';
4
+ export interface IRequestHeaderProvider {
5
+ headers: RawAxiosRequestHeaders;
6
+ setHeaders: (newHeaders: RawAxiosRequestHeaders) => void;
7
+ }
8
+ export declare const RequestHeaderProvider: React.Context<IRequestHeaderProvider>;
9
+ export declare const QueryClientRequestProvider: ({ client, children, }: {
10
+ client: QueryClient;
11
+ children: React.ReactNode;
12
+ }) => JSX.Element;
@@ -0,0 +1,24 @@
1
+ 'use strict';
2
+
3
+ var reactQuery = require('@tanstack/react-query');
4
+ var React = require('react');
5
+
6
+ const RequestHeaderProvider = React.createContext({
7
+ headers: {},
8
+ setHeaders: (_newHeaders) => {
9
+ //
10
+ },
11
+ });
12
+ const QueryClientRequestProvider = ({ client, children, }) => {
13
+ const [headers, updateHeaders] = React.useState({});
14
+ const setHeaders = React.useCallback((newHeaders) => {
15
+ updateHeaders(newHeaders);
16
+ }, []);
17
+ const requestContextValue = React.useMemo(() => ({ headers, setHeaders }), [headers, setHeaders]);
18
+ return (React.createElement(reactQuery.QueryClientProvider, { client: client },
19
+ React.createElement(RequestHeaderProvider.Provider, { value: requestContextValue }, children)));
20
+ };
21
+
22
+ exports.QueryClientRequestProvider = QueryClientRequestProvider;
23
+ exports.RequestHeaderProvider = RequestHeaderProvider;
24
+ //# sourceMappingURL=QueryClientRequestProvider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"QueryClientRequestProvider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -0,0 +1,2 @@
1
+ export * from './QueryClientRequestProvider';
2
+ export * from './useQueryHeaders';
@@ -0,0 +1,2 @@
1
+ import type { IRequestHeaderProvider } from './QueryClientRequestProvider';
2
+ export declare const useQueryHeaders: () => IRequestHeaderProvider;
@@ -0,0 +1,11 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+ var QueryClientRequestProvider = require('./QueryClientRequestProvider.js');
5
+
6
+ const useQueryHeaders = () => {
7
+ return React.useContext(QueryClientRequestProvider.RequestHeaderProvider);
8
+ };
9
+
10
+ exports.useQueryHeaders = useQueryHeaders;
11
+ //# sourceMappingURL=useQueryHeaders.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useQueryHeaders.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"useQueryHeaders.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './config';
2
+ export * from './contexts';
2
3
  export * from './helpers';
3
4
  export * from './model';
4
5
  export * from './queries';
package/dist/index.js CHANGED
@@ -2,7 +2,8 @@
2
2
 
3
3
  var useEnvironmentVariables = require('./config/useEnvironmentVariables.js');
4
4
  var useQueryConfig = require('./config/useQueryConfig.js');
5
- var useQueryHeaders = require('./config/useQueryHeaders.js');
5
+ var QueryClientRequestProvider = require('./contexts/QueryClientRequestProvider.js');
6
+ var useQueryHeaders = require('./contexts/useQueryHeaders.js');
6
7
  var scrollToTop = require('./helpers/scrollToTop.js');
7
8
  var useKeyTrackerModel = require('./model/useKeyTrackerModel.js');
8
9
  var useQueryModel = require('./model/useQueryModel.js');
@@ -21,6 +22,8 @@ var transformer = require('./request/transformer.js');
21
22
 
22
23
  exports.useEnvironmentVariables = useEnvironmentVariables.useEnvironmentVariables;
23
24
  exports.useQueryConfig = useQueryConfig.useQueryConfig;
25
+ exports.QueryClientRequestProvider = QueryClientRequestProvider.QueryClientRequestProvider;
26
+ exports.RequestHeaderProvider = QueryClientRequestProvider.RequestHeaderProvider;
24
27
  exports.useQueryHeaders = useQueryHeaders.useQueryHeaders;
25
28
  exports.scrollToTop = scrollToTop.scrollToTop;
26
29
  exports.useKeyTrackerModel = useKeyTrackerModel.useKeyTrackerModel;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import { useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
2
- import { useState, useMemo, useEffect, startTransition } from 'react';
1
+ import { useQueryClient, QueryClientProvider, useQuery, useMutation } from '@tanstack/react-query';
2
+ import React, { createContext, useState, useCallback, useMemo, useContext, useEffect, startTransition } from 'react';
3
3
  import axios from 'axios';
4
4
 
5
5
  const useEnvironmentVariables = () => {
@@ -17,16 +17,24 @@ const useQueryConfig = () => {
17
17
  return { headers };
18
18
  };
19
19
 
20
+ const RequestHeaderProvider = createContext({
21
+ headers: {},
22
+ setHeaders: (_newHeaders) => {
23
+ //
24
+ },
25
+ });
26
+ const QueryClientRequestProvider = ({ client, children, }) => {
27
+ const [headers, updateHeaders] = useState({});
28
+ const setHeaders = useCallback((newHeaders) => {
29
+ updateHeaders(newHeaders);
30
+ }, []);
31
+ const requestContextValue = useMemo(() => ({ headers, setHeaders }), [headers, setHeaders]);
32
+ return (React.createElement(QueryClientProvider, { client: client },
33
+ React.createElement(RequestHeaderProvider.Provider, { value: requestContextValue }, children)));
34
+ };
35
+
20
36
  const useQueryHeaders = () => {
21
- const { headers } = useQueryConfig();
22
- const queryClient = useQueryClient();
23
- const setQueryHeaders = (newHeaders) => {
24
- queryClient.setQueryData(['config'], (config) => {
25
- const newConfig = { ...config, headers: newHeaders };
26
- return newConfig;
27
- });
28
- };
29
- return { headers, setQueryHeaders };
37
+ return useContext(RequestHeaderProvider);
30
38
  };
31
39
 
32
40
  const scrollToTop = () => {
@@ -171,7 +179,7 @@ const useDeleteRequest = () => {
171
179
  const [requestPath, updateDeletePath] = useState('');
172
180
  const [options, setOptions] = useState();
173
181
  const { API_URL, TIMEOUT } = useEnvironmentVariables();
174
- const { headers } = useQueryConfig();
182
+ const { headers } = useQueryHeaders();
175
183
  const query = useQuery([requestPath, {}], () => new Promise((res, rej) => {
176
184
  setTimeout(async () => {
177
185
  const postResponse = await makeRequest({
@@ -214,7 +222,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
214
222
  const [options, setOptions] = useState(queryOptions);
215
223
  const [page, setPage] = useState(1);
216
224
  const { API_URL, TIMEOUT } = useEnvironmentVariables();
217
- const { headers } = useQueryConfig();
225
+ const { headers } = useQueryHeaders();
218
226
  let queryClient = useQueryClient();
219
227
  // eslint-disable-next-line react-hooks/exhaustive-deps
220
228
  queryClient = useMemo(() => queryClient, []);
@@ -311,7 +319,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
311
319
 
312
320
  const usePatchRequest = ({ path }) => {
313
321
  const { API_URL, TIMEOUT } = useEnvironmentVariables();
314
- const { headers } = useQueryConfig();
322
+ const { headers } = useQueryHeaders();
315
323
  // register post mutation
316
324
  const mutation = useMutation((postData) => new Promise((res, rej) => {
317
325
  makeRequest({
@@ -345,7 +353,7 @@ const usePatchRequest = ({ path }) => {
345
353
 
346
354
  const usePostRequest = ({ path, isFormData = false, }) => {
347
355
  const { API_URL, TIMEOUT } = useEnvironmentVariables();
348
- const { headers } = useQueryConfig();
356
+ const { headers } = useQueryHeaders();
349
357
  // register post mutation
350
358
  const mutation = useMutation(async (postData) => new Promise((res, rej) => {
351
359
  makeRequest({
@@ -381,5 +389,5 @@ const usePostRequest = ({ path, isFormData = false, }) => {
381
389
  return { post, ...mutation };
382
390
  };
383
391
 
384
- export { ContentType, HttpMethod, axiosInstance, buildFormData, errorTransformer, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useRefetchQuery };
392
+ export { ContentType, HttpMethod, QueryClientRequestProvider, RequestHeaderProvider, axiosInstance, buildFormData, errorTransformer, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useRefetchQuery };
385
393
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,12 +1,12 @@
1
1
  'use strict';
2
2
 
3
3
  var reactQuery = require('@tanstack/react-query');
4
- var react = require('react');
4
+ var React = require('react');
5
5
 
6
6
  const useKeyTrackerModel = (keyTracker) => {
7
7
  const queryClient = reactQuery.useQueryClient();
8
- const [data, setData] = react.useState();
9
- const [queryKey, setQueryKey] = react.useState();
8
+ const [data, setData] = React.useState();
9
+ const [queryKey, setQueryKey] = React.useState();
10
10
  const getQueryKey = (innerKeyTracker) => {
11
11
  const key = queryClient.getQueryData([
12
12
  innerKeyTracker ?? keyTracker,
@@ -1,18 +1,19 @@
1
1
  'use strict';
2
2
 
3
3
  var reactQuery = require('@tanstack/react-query');
4
- var react = require('react');
4
+ var React = require('react');
5
5
  var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
6
- var useQueryConfig = require('../config/useQueryConfig.js');
6
+ require('../contexts/QueryClientRequestProvider.js');
7
+ var useQueryHeaders = require('../contexts/useQueryHeaders.js');
7
8
  require('axios');
8
9
  var makeRequest = require('../request/make-request.js');
9
10
  var request_enum = require('../request/request.enum.js');
10
11
 
11
12
  const useDeleteRequest = () => {
12
- const [requestPath, updateDeletePath] = react.useState('');
13
- const [options, setOptions] = react.useState();
13
+ const [requestPath, updateDeletePath] = React.useState('');
14
+ const [options, setOptions] = React.useState();
14
15
  const { API_URL, TIMEOUT } = useEnvironmentVariables.useEnvironmentVariables();
15
- const { headers } = useQueryConfig.useQueryConfig();
16
+ const { headers } = useQueryHeaders.useQueryHeaders();
16
17
  const query = reactQuery.useQuery([requestPath, {}], () => new Promise((res, rej) => {
17
18
  setTimeout(async () => {
18
19
  const postResponse = await makeRequest.makeRequest({
@@ -1 +1 @@
1
- {"version":3,"file":"useDeleteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"useDeleteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,22 +1,23 @@
1
1
  'use strict';
2
2
 
3
3
  var reactQuery = require('@tanstack/react-query');
4
- var react = require('react');
4
+ var React = require('react');
5
5
  var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
6
- var useQueryConfig = require('../config/useQueryConfig.js');
6
+ require('../contexts/QueryClientRequestProvider.js');
7
+ var useQueryHeaders = require('../contexts/useQueryHeaders.js');
7
8
  require('axios');
8
9
  var makeRequest = require('../request/make-request.js');
9
10
  require('../request/request.enum.js');
10
11
 
11
12
  const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
12
- const [requestPath, updatePath] = react.useState(path);
13
- const [options, setOptions] = react.useState(queryOptions);
14
- const [page, setPage] = react.useState(1);
13
+ const [requestPath, updatePath] = React.useState(path);
14
+ const [options, setOptions] = React.useState(queryOptions);
15
+ const [page, setPage] = React.useState(1);
15
16
  const { API_URL, TIMEOUT } = useEnvironmentVariables.useEnvironmentVariables();
16
- const { headers } = useQueryConfig.useQueryConfig();
17
+ const { headers } = useQueryHeaders.useQueryHeaders();
17
18
  let queryClient = reactQuery.useQueryClient();
18
19
  // eslint-disable-next-line react-hooks/exhaustive-deps
19
- queryClient = react.useMemo(() => queryClient, []);
20
+ queryClient = React.useMemo(() => queryClient, []);
20
21
  const sendRequest = async (res, rej) => {
21
22
  const postResponse = await makeRequest.makeRequest({
22
23
  path: requestPath,
@@ -37,12 +38,12 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
37
38
  enabled: load,
38
39
  ...options,
39
40
  });
40
- react.useEffect(() => {
41
+ React.useEffect(() => {
41
42
  if (path) {
42
43
  updatePath(path);
43
44
  }
44
45
  }, [path]);
45
- react.useEffect(() => {
46
+ React.useEffect(() => {
46
47
  if (keyTracker) {
47
48
  queryClient.setQueryData([keyTracker], [requestPath, {}]);
48
49
  }
@@ -82,12 +83,12 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
82
83
  updatePath(constructPaginationLink(requestPath, pageNumber));
83
84
  };
84
85
  const updatedPathAsync = async (link) => {
85
- react.startTransition(() => {
86
+ React.startTransition(() => {
86
87
  updatePath(link);
87
88
  });
88
89
  };
89
90
  const setOptionsAsync = async (fetchOptions) => {
90
- react.startTransition(() => {
91
+ React.startTransition(() => {
91
92
  setOptions(fetchOptions);
92
93
  });
93
94
  };
@@ -1 +1 @@
1
- {"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -6,11 +6,12 @@ require('axios');
6
6
  var makeRequest = require('../request/make-request.js');
7
7
  var request_enum = require('../request/request.enum.js');
8
8
  var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
9
- var useQueryConfig = require('../config/useQueryConfig.js');
9
+ require('../contexts/QueryClientRequestProvider.js');
10
+ var useQueryHeaders = require('../contexts/useQueryHeaders.js');
10
11
 
11
12
  const usePatchRequest = ({ path }) => {
12
13
  const { API_URL, TIMEOUT } = useEnvironmentVariables.useEnvironmentVariables();
13
- const { headers } = useQueryConfig.useQueryConfig();
14
+ const { headers } = useQueryHeaders.useQueryHeaders();
14
15
  // register post mutation
15
16
  const mutation = reactQuery.useMutation((postData) => new Promise((res, rej) => {
16
17
  makeRequest.makeRequest({
@@ -1 +1 @@
1
- {"version":3,"file":"usePatchRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"usePatchRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -2,14 +2,15 @@
2
2
 
3
3
  var reactQuery = require('@tanstack/react-query');
4
4
  var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
5
- var useQueryConfig = require('../config/useQueryConfig.js');
5
+ require('../contexts/QueryClientRequestProvider.js');
6
+ var useQueryHeaders = require('../contexts/useQueryHeaders.js');
6
7
  require('axios');
7
8
  var makeRequest = require('../request/make-request.js');
8
9
  var request_enum = require('../request/request.enum.js');
9
10
 
10
11
  const usePostRequest = ({ path, isFormData = false, }) => {
11
12
  const { API_URL, TIMEOUT } = useEnvironmentVariables.useEnvironmentVariables();
12
- const { headers } = useQueryConfig.useQueryConfig();
13
+ const { headers } = useQueryHeaders.useQueryHeaders();
13
14
  // register post mutation
14
15
  const mutation = reactQuery.useMutation(async (postData) => new Promise((res, rej) => {
15
16
  makeRequest.makeRequest({
@@ -1 +1 @@
1
- {"version":3,"file":"usePostRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"usePostRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ventlio/tanstack-query",
3
- "version": "0.2.23",
3
+ "version": "0.2.24",
4
4
  "license": "MIT",
5
5
  "main": "dist/index.js",
6
6
  "contributors": [
@@ -28,6 +28,7 @@
28
28
  "@tanstack/react-query": "^4.26.1",
29
29
  "axios": "^1.3.4",
30
30
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
31
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
31
32
  "react-native": "*"
32
33
  },
33
34
  "peerDependenciesMeta": {
@@ -48,7 +49,8 @@
48
49
  "@tanstack/react-query": "^4.26.1",
49
50
  "@types/axios": "^0.14.0",
50
51
  "@types/node": "*",
51
- "@types/react": "^18.0.28",
52
+ "@types/react": "^18.2.0",
53
+ "@types/react-dom": "^18.2.0",
52
54
  "@typescript-eslint/eslint-plugin": "^5.54.1",
53
55
  "@typescript-eslint/parser": "^5.54.1",
54
56
  "axios": "^1.3.4",
@@ -62,6 +64,7 @@
62
64
  "eslint-plugin-react-hooks": "^4.6.0",
63
65
  "prettier": "^2.8.4",
64
66
  "react": "^18.2.0",
67
+ "react-dom": "^18.2.0",
65
68
  "rimraf": "^4.4.0",
66
69
  "rollup": "^3.19.1",
67
70
  "rollup-plugin-typescript2": "^0.34.1",
@@ -1,4 +1,3 @@
1
1
  export * from './config.interface';
2
2
  export * from './useEnvironmentVariables';
3
3
  export * from './useQueryConfig';
4
- export * from './useQueryHeaders';
@@ -0,0 +1,48 @@
1
+ import type { QueryClient } from '@tanstack/react-query';
2
+ import { QueryClientProvider } from '@tanstack/react-query';
3
+ import type { RawAxiosRequestHeaders } from 'axios';
4
+ import React, { createContext, useCallback, useMemo, useState } from 'react';
5
+
6
+ export interface IRequestHeaderProvider {
7
+ headers: RawAxiosRequestHeaders;
8
+ setHeaders: (newHeaders: RawAxiosRequestHeaders) => void;
9
+ }
10
+
11
+ export const RequestHeaderProvider = createContext<IRequestHeaderProvider>({
12
+ headers: {},
13
+ setHeaders: (_newHeaders: IRequestHeaderProvider['headers']) => {
14
+ //
15
+ },
16
+ });
17
+
18
+ export const QueryClientRequestProvider = ({
19
+ client,
20
+ children,
21
+ }: {
22
+ client: QueryClient;
23
+ children: React.ReactNode;
24
+ }) => {
25
+ const [headers, updateHeaders] = useState<IRequestHeaderProvider['headers']>(
26
+ {}
27
+ );
28
+
29
+ const setHeaders = useCallback(
30
+ (newHeaders: IRequestHeaderProvider['headers']) => {
31
+ updateHeaders(newHeaders);
32
+ },
33
+ []
34
+ );
35
+
36
+ const requestContextValue = useMemo(
37
+ () => ({ headers, setHeaders }),
38
+ [headers, setHeaders]
39
+ );
40
+
41
+ return (
42
+ <QueryClientProvider client={client}>
43
+ <RequestHeaderProvider.Provider value={requestContextValue}>
44
+ {children}
45
+ </RequestHeaderProvider.Provider>
46
+ </QueryClientProvider>
47
+ );
48
+ };
@@ -0,0 +1,2 @@
1
+ export * from './QueryClientRequestProvider';
2
+ export * from './useQueryHeaders';
@@ -0,0 +1,7 @@
1
+ import { useContext } from 'react';
2
+ import type { IRequestHeaderProvider } from './QueryClientRequestProvider';
3
+ import { RequestHeaderProvider } from './QueryClientRequestProvider';
4
+
5
+ export const useQueryHeaders = (): IRequestHeaderProvider => {
6
+ return useContext(RequestHeaderProvider);
7
+ };
package/src/index.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export * from './config';
2
+ export * from './contexts';
2
3
  export * from './helpers';
3
4
  export * from './model';
4
5
  export * from './queries';
@@ -1,7 +1,8 @@
1
1
  import type { UseQueryOptions } from '@tanstack/react-query';
2
2
  import { useQuery } from '@tanstack/react-query';
3
3
  import { useState } from 'react';
4
- import { useEnvironmentVariables, useQueryConfig } from '../config';
4
+ import { useEnvironmentVariables } from '../config';
5
+ import { useQueryHeaders } from '../contexts';
5
6
  import type { IRequestError, IRequestSuccess } from '../request';
6
7
  import { HttpMethod, makeRequest } from '../request';
7
8
 
@@ -11,7 +12,7 @@ export const useDeleteRequest = <TResponse>() => {
11
12
 
12
13
  const { API_URL, TIMEOUT } = useEnvironmentVariables();
13
14
 
14
- const { headers } = useQueryConfig();
15
+ const { headers } = useQueryHeaders();
15
16
 
16
17
  const query = useQuery<any, any, IRequestSuccess<TResponse>>(
17
18
  [requestPath, {}],
@@ -1,7 +1,8 @@
1
1
  import type { UseQueryOptions } from '@tanstack/react-query';
2
2
  import { useQuery, useQueryClient } from '@tanstack/react-query';
3
3
  import { startTransition, useEffect, useMemo, useState } from 'react';
4
- import { useEnvironmentVariables, useQueryConfig } from '../config';
4
+ import { useEnvironmentVariables } from '../config';
5
+ import { useQueryHeaders } from '../contexts';
5
6
  import type { IRequestError, IRequestSuccess } from '../request';
6
7
  import { makeRequest } from '../request';
7
8
  import type { IPagination, TanstackQueryOption } from './queries.interface';
@@ -22,7 +23,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
22
23
  const [page, setPage] = useState<number>(1);
23
24
 
24
25
  const { API_URL, TIMEOUT } = useEnvironmentVariables();
25
- const { headers } = useQueryConfig();
26
+ const { headers } = useQueryHeaders();
26
27
 
27
28
  let queryClient = useQueryClient();
28
29
  // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -3,7 +3,8 @@ import { useMutation } from '@tanstack/react-query';
3
3
  import { scrollToTop } from '../helpers';
4
4
  import { HttpMethod, makeRequest } from '../request';
5
5
 
6
- import { useEnvironmentVariables, useQueryConfig } from '../config';
6
+ import { useEnvironmentVariables } from '../config';
7
+ import { useQueryHeaders } from '../contexts';
7
8
  import type {
8
9
  IRequestError,
9
10
  IRequestSuccess,
@@ -11,7 +12,7 @@ import type {
11
12
 
12
13
  export const usePatchRequest = <TResponse>({ path }: { path: string }) => {
13
14
  const { API_URL, TIMEOUT } = useEnvironmentVariables();
14
- const { headers } = useQueryConfig();
15
+ const { headers } = useQueryHeaders();
15
16
 
16
17
  // register post mutation
17
18
  const mutation = useMutation<IRequestSuccess<TResponse>, IRequestError>(
@@ -1,6 +1,7 @@
1
1
  import type { MutateOptions } from '@tanstack/react-query';
2
2
  import { useMutation } from '@tanstack/react-query';
3
- import { useEnvironmentVariables, useQueryConfig } from '../config';
3
+ import { useEnvironmentVariables } from '../config';
4
+ import { useQueryHeaders } from '../contexts';
4
5
  import type { IRequestError, IRequestSuccess } from '../request';
5
6
  import { HttpMethod, makeRequest } from '../request';
6
7
 
@@ -13,7 +14,7 @@ export const usePostRequest = <TResponse>({
13
14
  }) => {
14
15
  const { API_URL, TIMEOUT } = useEnvironmentVariables();
15
16
 
16
- const { headers } = useQueryConfig();
17
+ const { headers } = useQueryHeaders();
17
18
 
18
19
  // register post mutation
19
20
  const mutation = useMutation<IRequestSuccess<TResponse>, IRequestError>(
@@ -1,2 +0,0 @@
1
- import type { IUseQueryHeaders } from '../types';
2
- export declare const useQueryHeaders: () => IUseQueryHeaders;
@@ -1,19 +0,0 @@
1
- 'use strict';
2
-
3
- var reactQuery = require('@tanstack/react-query');
4
- var useQueryConfig = require('./useQueryConfig.js');
5
-
6
- const useQueryHeaders = () => {
7
- const { headers } = useQueryConfig.useQueryConfig();
8
- const queryClient = reactQuery.useQueryClient();
9
- const setQueryHeaders = (newHeaders) => {
10
- queryClient.setQueryData(['config'], (config) => {
11
- const newConfig = { ...config, headers: newHeaders };
12
- return newConfig;
13
- });
14
- };
15
- return { headers, setQueryHeaders };
16
- };
17
-
18
- exports.useQueryHeaders = useQueryHeaders;
19
- //# sourceMappingURL=useQueryHeaders.js.map
@@ -1,17 +0,0 @@
1
- import { useQueryClient } from '@tanstack/react-query';
2
- import type { IUseQueryHeaders, TanstackQueryConfig } from '../types';
3
- import { useQueryConfig } from './useQueryConfig';
4
-
5
- export const useQueryHeaders = (): IUseQueryHeaders => {
6
- const { headers } = useQueryConfig();
7
- const queryClient = useQueryClient();
8
-
9
- const setQueryHeaders = (newHeaders: TanstackQueryConfig['headers']) => {
10
- queryClient.setQueryData<TanstackQueryConfig>(['config'], (config): any => {
11
- const newConfig = { ...config, headers: newHeaders };
12
- return newConfig;
13
- });
14
- };
15
-
16
- return { headers, setQueryHeaders };
17
- };