@ventlio/tanstack-query 0.2.41 → 0.2.43
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/index.mjs +24 -19
- package/dist/index.mjs.map +1 -1
- package/dist/model/useKeyTrackerModel.d.ts +1 -3
- package/dist/model/useKeyTrackerModel.js +9 -12
- package/dist/model/useKeyTrackerModel.js.map +1 -1
- package/dist/model/useRefetchQuery.js +0 -1
- package/dist/model/useRefetchQuery.js.map +1 -1
- package/dist/queries/useDeleteRequest.js +0 -3
- package/dist/queries/useDeleteRequest.js.map +1 -1
- package/dist/queries/useGetRequest.js +15 -4
- package/dist/queries/useGetRequest.js.map +1 -1
- package/package.json +1 -1
- package/src/model/useKeyTrackerModel.ts +10 -14
- package/src/model/useRefetchQuery.ts +0 -1
- package/src/queries/useDeleteRequest.ts +0 -4
- package/src/queries/useGetRequest.ts +22 -4
package/dist/index.mjs
CHANGED
|
@@ -72,22 +72,20 @@ const useQueryHeaders = () => {
|
|
|
72
72
|
|
|
73
73
|
const useKeyTrackerModel = (keyTracker) => {
|
|
74
74
|
const queryClient = useQueryClient();
|
|
75
|
-
const [data, setData] = useState();
|
|
76
|
-
const [queryKey, setQueryKey] = useState();
|
|
77
75
|
const getQueryKey = (innerKeyTracker) => {
|
|
78
|
-
const
|
|
76
|
+
const queryKey = queryClient.getQueryData([
|
|
79
77
|
innerKeyTracker ?? keyTracker,
|
|
80
78
|
]);
|
|
81
|
-
|
|
82
|
-
return key;
|
|
79
|
+
return queryKey;
|
|
83
80
|
};
|
|
84
|
-
const refetchQuery = (innerKeyTracker) => {
|
|
85
|
-
const
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
81
|
+
const refetchQuery = async (innerKeyTracker) => {
|
|
82
|
+
const queryKey = getQueryKey(innerKeyTracker ?? keyTracker);
|
|
83
|
+
await queryClient.refetchQueries({
|
|
84
|
+
queryKey,
|
|
85
|
+
exact: true,
|
|
86
|
+
});
|
|
89
87
|
};
|
|
90
|
-
return { refetchQuery, getQueryKey
|
|
88
|
+
return { refetchQuery, getQueryKey };
|
|
91
89
|
};
|
|
92
90
|
|
|
93
91
|
const useQueryModel = (queryKey, filters) => {
|
|
@@ -101,7 +99,6 @@ const useRefetchQuery = async (queryKey) => {
|
|
|
101
99
|
await queryClient.refetchQueries({
|
|
102
100
|
queryKey,
|
|
103
101
|
exact: true,
|
|
104
|
-
type: 'active',
|
|
105
102
|
}, { throwOnError: true, cancelRefetch: true });
|
|
106
103
|
return queryClient.getQueriesData(innerQueryKey ?? queryKey);
|
|
107
104
|
};
|
|
@@ -239,9 +236,6 @@ const useDeleteRequest = () => {
|
|
|
239
236
|
deleteOptions.enabled = true;
|
|
240
237
|
await updatedPathAsync(link);
|
|
241
238
|
await setOptionsAsync(deleteOptions);
|
|
242
|
-
// return query.refetch<TResponse>({
|
|
243
|
-
// queryKey: [link, {}],
|
|
244
|
-
// });
|
|
245
239
|
return query.data;
|
|
246
240
|
};
|
|
247
241
|
return { destroy, ...query };
|
|
@@ -259,17 +253,17 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
|
|
|
259
253
|
const sendRequest = async (res, rej) => {
|
|
260
254
|
// get request headers
|
|
261
255
|
const headers = getHeaders();
|
|
262
|
-
const
|
|
256
|
+
const getResponse = await makeRequest({
|
|
263
257
|
path: requestPath,
|
|
264
258
|
headers,
|
|
265
259
|
baseURL: API_URL,
|
|
266
260
|
timeout: TIMEOUT,
|
|
267
261
|
});
|
|
268
|
-
if (
|
|
269
|
-
res(
|
|
262
|
+
if (getResponse.status) {
|
|
263
|
+
res(getResponse);
|
|
270
264
|
}
|
|
271
265
|
else {
|
|
272
|
-
rej(
|
|
266
|
+
rej(getResponse);
|
|
273
267
|
}
|
|
274
268
|
};
|
|
275
269
|
const query = useQuery([requestPath, {}], () => new Promise((res, rej) => {
|
|
@@ -285,9 +279,20 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
|
|
|
285
279
|
}, [path]);
|
|
286
280
|
useEffect(() => {
|
|
287
281
|
if (keyTracker) {
|
|
282
|
+
queryClient.setQueryDefaults([keyTracker], {
|
|
283
|
+
staleTime: Infinity,
|
|
284
|
+
cacheTime: Infinity,
|
|
285
|
+
});
|
|
288
286
|
queryClient.setQueryData([keyTracker], [requestPath, {}]);
|
|
289
287
|
}
|
|
290
288
|
}, [keyTracker, requestPath, queryClient]);
|
|
289
|
+
useEffect(() => {
|
|
290
|
+
console.log({
|
|
291
|
+
isStale: query.isStale,
|
|
292
|
+
query: [requestPath, {}],
|
|
293
|
+
});
|
|
294
|
+
if (query.isStale && keyTracker) ;
|
|
295
|
+
}, [query.isStale, keyTracker, queryClient, requestPath]);
|
|
291
296
|
const nextPage = () => {
|
|
292
297
|
if (query.data?.data.pagination) {
|
|
293
298
|
const pagination = query.data.data.pagination;
|
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,6 +1,4 @@
|
|
|
1
1
|
export declare const useKeyTrackerModel: <T>(keyTracker: string) => {
|
|
2
|
-
refetchQuery: (innerKeyTracker?: string) =>
|
|
2
|
+
refetchQuery: (innerKeyTracker?: string) => Promise<void>;
|
|
3
3
|
getQueryKey: (innerKeyTracker?: string) => any[] | undefined;
|
|
4
|
-
queryKey: any[] | undefined;
|
|
5
|
-
data: T | undefined;
|
|
6
4
|
};
|
|
@@ -1,26 +1,23 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var reactQuery = require('@tanstack/react-query');
|
|
4
|
-
var react = require('react');
|
|
5
4
|
|
|
6
5
|
const useKeyTrackerModel = (keyTracker) => {
|
|
7
6
|
const queryClient = reactQuery.useQueryClient();
|
|
8
|
-
const [data, setData] = react.useState();
|
|
9
|
-
const [queryKey, setQueryKey] = react.useState();
|
|
10
7
|
const getQueryKey = (innerKeyTracker) => {
|
|
11
|
-
const
|
|
8
|
+
const queryKey = queryClient.getQueryData([
|
|
12
9
|
innerKeyTracker ?? keyTracker,
|
|
13
10
|
]);
|
|
14
|
-
|
|
15
|
-
return key;
|
|
11
|
+
return queryKey;
|
|
16
12
|
};
|
|
17
|
-
const refetchQuery = (innerKeyTracker) => {
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
const refetchQuery = async (innerKeyTracker) => {
|
|
14
|
+
const queryKey = getQueryKey(innerKeyTracker ?? keyTracker);
|
|
15
|
+
await queryClient.refetchQueries({
|
|
16
|
+
queryKey,
|
|
17
|
+
exact: true,
|
|
18
|
+
});
|
|
22
19
|
};
|
|
23
|
-
return { refetchQuery, getQueryKey
|
|
20
|
+
return { refetchQuery, getQueryKey };
|
|
24
21
|
};
|
|
25
22
|
|
|
26
23
|
exports.useKeyTrackerModel = useKeyTrackerModel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyTrackerModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useKeyTrackerModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useRefetchQuery.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useRefetchQuery.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
|
|
@@ -44,9 +44,6 @@ const useDeleteRequest = () => {
|
|
|
44
44
|
deleteOptions.enabled = true;
|
|
45
45
|
await updatedPathAsync(link);
|
|
46
46
|
await setOptionsAsync(deleteOptions);
|
|
47
|
-
// return query.refetch<TResponse>({
|
|
48
|
-
// queryKey: [link, {}],
|
|
49
|
-
// });
|
|
50
47
|
return query.data;
|
|
51
48
|
};
|
|
52
49
|
return { destroy, ...query };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDeleteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useDeleteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -20,17 +20,17 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
|
|
|
20
20
|
const sendRequest = async (res, rej) => {
|
|
21
21
|
// get request headers
|
|
22
22
|
const headers = getHeaders();
|
|
23
|
-
const
|
|
23
|
+
const getResponse = await makeRequest.makeRequest({
|
|
24
24
|
path: requestPath,
|
|
25
25
|
headers,
|
|
26
26
|
baseURL: API_URL,
|
|
27
27
|
timeout: TIMEOUT,
|
|
28
28
|
});
|
|
29
|
-
if (
|
|
30
|
-
res(
|
|
29
|
+
if (getResponse.status) {
|
|
30
|
+
res(getResponse);
|
|
31
31
|
}
|
|
32
32
|
else {
|
|
33
|
-
rej(
|
|
33
|
+
rej(getResponse);
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
36
|
const query = reactQuery.useQuery([requestPath, {}], () => new Promise((res, rej) => {
|
|
@@ -46,9 +46,20 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, }) => {
|
|
|
46
46
|
}, [path]);
|
|
47
47
|
react.useEffect(() => {
|
|
48
48
|
if (keyTracker) {
|
|
49
|
+
queryClient.setQueryDefaults([keyTracker], {
|
|
50
|
+
staleTime: Infinity,
|
|
51
|
+
cacheTime: Infinity,
|
|
52
|
+
});
|
|
49
53
|
queryClient.setQueryData([keyTracker], [requestPath, {}]);
|
|
50
54
|
}
|
|
51
55
|
}, [keyTracker, requestPath, queryClient]);
|
|
56
|
+
react.useEffect(() => {
|
|
57
|
+
console.log({
|
|
58
|
+
isStale: query.isStale,
|
|
59
|
+
query: [requestPath, {}],
|
|
60
|
+
});
|
|
61
|
+
if (query.isStale && keyTracker) ;
|
|
62
|
+
}, [query.isStale, keyTracker, queryClient, requestPath]);
|
|
52
63
|
const nextPage = () => {
|
|
53
64
|
if (query.data?.data.pagination) {
|
|
54
65
|
const pagination = query.data.data.pagination;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,28 +1,24 @@
|
|
|
1
1
|
import { useQueryClient } from '@tanstack/react-query';
|
|
2
|
-
import { useState } from 'react';
|
|
3
2
|
|
|
4
3
|
export const useKeyTrackerModel = <T>(keyTracker: string) => {
|
|
5
4
|
const queryClient = useQueryClient();
|
|
6
|
-
const [data, setData] = useState<T>();
|
|
7
|
-
const [queryKey, setQueryKey] = useState<any[] | undefined>();
|
|
8
5
|
|
|
9
6
|
const getQueryKey = (innerKeyTracker?: string) => {
|
|
10
|
-
const
|
|
7
|
+
const queryKey: any[] | undefined = queryClient.getQueryData([
|
|
11
8
|
innerKeyTracker ?? keyTracker,
|
|
12
9
|
]);
|
|
13
|
-
setQueryKey(key);
|
|
14
|
-
return key;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
const refetchQuery = (innerKeyTracker?: string) => {
|
|
18
|
-
const key: any = getQueryKey(innerKeyTracker ?? keyTracker);
|
|
19
10
|
|
|
20
|
-
|
|
11
|
+
return queryKey;
|
|
12
|
+
};
|
|
21
13
|
|
|
22
|
-
|
|
14
|
+
const refetchQuery = async (innerKeyTracker?: string) => {
|
|
15
|
+
const queryKey: any = getQueryKey(innerKeyTracker ?? keyTracker);
|
|
23
16
|
|
|
24
|
-
|
|
17
|
+
await queryClient.refetchQueries<T>({
|
|
18
|
+
queryKey,
|
|
19
|
+
exact: true,
|
|
20
|
+
});
|
|
25
21
|
};
|
|
26
22
|
|
|
27
|
-
return { refetchQuery, getQueryKey
|
|
23
|
+
return { refetchQuery, getQueryKey };
|
|
28
24
|
};
|
|
@@ -27,6 +27,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
|
|
|
27
27
|
const { getHeaders } = useQueryHeaders();
|
|
28
28
|
|
|
29
29
|
let queryClient = useQueryClient();
|
|
30
|
+
|
|
30
31
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
31
32
|
queryClient = useMemo(() => queryClient, []);
|
|
32
33
|
|
|
@@ -42,16 +43,16 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
|
|
|
42
43
|
// get request headers
|
|
43
44
|
const headers: RawAxiosRequestHeaders = getHeaders();
|
|
44
45
|
|
|
45
|
-
const
|
|
46
|
+
const getResponse = await makeRequest<TResponse>({
|
|
46
47
|
path: requestPath,
|
|
47
48
|
headers,
|
|
48
49
|
baseURL: API_URL,
|
|
49
50
|
timeout: TIMEOUT,
|
|
50
51
|
});
|
|
51
|
-
if (
|
|
52
|
-
res(
|
|
52
|
+
if (getResponse.status) {
|
|
53
|
+
res(getResponse as IRequestSuccess<TResponse>);
|
|
53
54
|
} else {
|
|
54
|
-
rej(
|
|
55
|
+
rej(getResponse);
|
|
55
56
|
}
|
|
56
57
|
};
|
|
57
58
|
|
|
@@ -75,10 +76,27 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
|
|
|
75
76
|
|
|
76
77
|
useEffect(() => {
|
|
77
78
|
if (keyTracker) {
|
|
79
|
+
queryClient.setQueryDefaults([keyTracker], {
|
|
80
|
+
staleTime: Infinity,
|
|
81
|
+
cacheTime: Infinity,
|
|
82
|
+
});
|
|
78
83
|
queryClient.setQueryData([keyTracker], [requestPath, {}]);
|
|
79
84
|
}
|
|
80
85
|
}, [keyTracker, requestPath, queryClient]);
|
|
81
86
|
|
|
87
|
+
useEffect(() => {
|
|
88
|
+
console.log({
|
|
89
|
+
isStale: query.isStale,
|
|
90
|
+
query: [requestPath, {}],
|
|
91
|
+
});
|
|
92
|
+
if (query.isStale && keyTracker) {
|
|
93
|
+
// queryClient.removeQueries({
|
|
94
|
+
// queryKey: [keyTracker],
|
|
95
|
+
// exact: true,
|
|
96
|
+
// });
|
|
97
|
+
}
|
|
98
|
+
}, [query.isStale, keyTracker, queryClient, requestPath]);
|
|
99
|
+
|
|
82
100
|
const nextPage = () => {
|
|
83
101
|
if (query.data?.data.pagination) {
|
|
84
102
|
const pagination: IPagination = query.data.data.pagination;
|