@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.
- package/dist/config/index.d.ts +0 -1
- package/dist/contexts/QueryClientRequestProvider.d.ts +12 -0
- package/dist/contexts/QueryClientRequestProvider.js +24 -0
- package/dist/contexts/QueryClientRequestProvider.js.map +1 -0
- package/dist/contexts/index.d.ts +2 -0
- package/dist/contexts/useQueryHeaders.d.ts +2 -0
- package/dist/contexts/useQueryHeaders.js +11 -0
- package/dist/{config → contexts}/useQueryHeaders.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +4 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +24 -16
- package/dist/index.mjs.map +1 -1
- package/dist/model/useKeyTrackerModel.js +3 -3
- package/dist/queries/useDeleteRequest.js +6 -5
- package/dist/queries/useDeleteRequest.js.map +1 -1
- package/dist/queries/useGetRequest.js +12 -11
- package/dist/queries/useGetRequest.js.map +1 -1
- package/dist/queries/usePatchRequest.js +3 -2
- package/dist/queries/usePatchRequest.js.map +1 -1
- package/dist/queries/usePostRequest.js +3 -2
- package/dist/queries/usePostRequest.js.map +1 -1
- package/package.json +5 -2
- package/src/config/index.ts +0 -1
- package/src/contexts/QueryClientRequestProvider.tsx +48 -0
- package/src/contexts/index.ts +2 -0
- package/src/contexts/useQueryHeaders.ts +7 -0
- package/src/index.ts +1 -0
- package/src/queries/useDeleteRequest.ts +3 -2
- package/src/queries/useGetRequest.ts +3 -2
- package/src/queries/usePatchRequest.ts +3 -2
- package/src/queries/usePostRequest.ts +3 -2
- package/dist/config/useQueryHeaders.d.ts +0 -2
- package/dist/config/useQueryHeaders.js +0 -19
- package/src/config/useQueryHeaders.ts +0 -17
package/dist/config/index.d.ts
CHANGED
|
@@ -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,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
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
|
|
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
|
-
|
|
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 } =
|
|
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 } =
|
|
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 } =
|
|
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 } =
|
|
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
|
package/dist/index.mjs.map
CHANGED
|
@@ -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
|
|
4
|
+
var React = require('react');
|
|
5
5
|
|
|
6
6
|
const useKeyTrackerModel = (keyTracker) => {
|
|
7
7
|
const queryClient = reactQuery.useQueryClient();
|
|
8
|
-
const [data, setData] =
|
|
9
|
-
const [queryKey, setQueryKey] =
|
|
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
|
|
4
|
+
var React = require('react');
|
|
5
5
|
var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
|
|
6
|
-
|
|
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] =
|
|
13
|
-
const [options, setOptions] =
|
|
13
|
+
const [requestPath, updateDeletePath] = React.useState('');
|
|
14
|
+
const [options, setOptions] = React.useState();
|
|
14
15
|
const { API_URL, TIMEOUT } = useEnvironmentVariables.useEnvironmentVariables();
|
|
15
|
-
const { headers } =
|
|
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
|
|
4
|
+
var React = require('react');
|
|
5
5
|
var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
|
|
6
|
-
|
|
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] =
|
|
13
|
-
const [options, setOptions] =
|
|
14
|
-
const [page, setPage] =
|
|
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 } =
|
|
17
|
+
const { headers } = useQueryHeaders.useQueryHeaders();
|
|
17
18
|
let queryClient = reactQuery.useQueryClient();
|
|
18
19
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
19
|
-
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
|
-
|
|
41
|
+
React.useEffect(() => {
|
|
41
42
|
if (path) {
|
|
42
43
|
updatePath(path);
|
|
43
44
|
}
|
|
44
45
|
}, [path]);
|
|
45
|
-
|
|
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
|
-
|
|
86
|
+
React.startTransition(() => {
|
|
86
87
|
updatePath(link);
|
|
87
88
|
});
|
|
88
89
|
};
|
|
89
90
|
const setOptionsAsync = async (fetchOptions) => {
|
|
90
|
-
|
|
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
|
-
|
|
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 } =
|
|
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
|
-
|
|
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 } =
|
|
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.
|
|
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
|
|
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",
|
package/src/config/index.ts
CHANGED
|
@@ -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,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,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
|
|
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 } =
|
|
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
|
|
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 } =
|
|
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
|
|
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 } =
|
|
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
|
|
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 } =
|
|
17
|
+
const { headers } = useQueryHeaders();
|
|
17
18
|
|
|
18
19
|
// register post mutation
|
|
19
20
|
const mutation = useMutation<IRequestSuccess<TResponse>, IRequestError>(
|
|
@@ -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
|
-
};
|