@ventlio/tanstack-query 0.2.40 → 0.2.42
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 -18
- package/dist/index.mjs.map +1 -1
- package/dist/model/useKeyTrackerModel.d.ts +1 -3
- package/dist/model/useKeyTrackerModel.js +7 -10
- 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 +1 -4
- package/dist/queries/useDeleteRequest.js.map +1 -1
- package/dist/queries/useGetRequest.js +16 -4
- package/dist/queries/useGetRequest.js.map +1 -1
- package/package.json +1 -1
- package/src/model/useKeyTrackerModel.ts +8 -12
- package/src/model/useRefetchQuery.ts +0 -1
- package/src/queries/useDeleteRequest.ts +1 -5
- package/src/queries/useGetRequest.ts +18 -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
76
|
const key = queryClient.getQueryData([
|
|
79
77
|
innerKeyTracker ?? keyTracker,
|
|
80
78
|
]);
|
|
81
|
-
setQueryKey(key);
|
|
82
79
|
return key;
|
|
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
|
};
|
|
@@ -226,7 +223,7 @@ const useDeleteRequest = () => {
|
|
|
226
223
|
rej(postResponse);
|
|
227
224
|
}
|
|
228
225
|
}, 200);
|
|
229
|
-
}), { ...options });
|
|
226
|
+
}), { enabled: false, ...options });
|
|
230
227
|
const updatedPathAsync = async (link) => {
|
|
231
228
|
return updateDeletePath(link);
|
|
232
229
|
};
|
|
@@ -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,21 @@ 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
|
+
if (query.isStale) {
|
|
291
|
+
queryClient.removeQueries({
|
|
292
|
+
queryKey: [keyTracker],
|
|
293
|
+
exact: true,
|
|
294
|
+
});
|
|
295
|
+
}
|
|
296
|
+
}, [query.isStale, keyTracker, queryClient]);
|
|
291
297
|
const nextPage = () => {
|
|
292
298
|
if (query.data?.data.pagination) {
|
|
293
299
|
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
8
|
const key = queryClient.getQueryData([
|
|
12
9
|
innerKeyTracker ?? keyTracker,
|
|
13
10
|
]);
|
|
14
|
-
setQueryKey(key);
|
|
15
11
|
return key;
|
|
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":";;;;;;;;;;;;;;;;;;"}
|
|
@@ -31,7 +31,7 @@ const useDeleteRequest = () => {
|
|
|
31
31
|
rej(postResponse);
|
|
32
32
|
}
|
|
33
33
|
}, 200);
|
|
34
|
-
}), { ...options });
|
|
34
|
+
}), { enabled: false, ...options });
|
|
35
35
|
const updatedPathAsync = async (link) => {
|
|
36
36
|
return updateDeletePath(link);
|
|
37
37
|
};
|
|
@@ -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,21 @@ 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
|
+
if (query.isStale) {
|
|
58
|
+
queryClient.removeQueries({
|
|
59
|
+
queryKey: [keyTracker],
|
|
60
|
+
exact: true,
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
}, [query.isStale, keyTracker, queryClient]);
|
|
52
64
|
const nextPage = () => {
|
|
53
65
|
if (query.data?.data.pagination) {
|
|
54
66
|
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
7
|
const key: any[] | undefined = queryClient.getQueryData([
|
|
11
8
|
innerKeyTracker ?? keyTracker,
|
|
12
9
|
]);
|
|
13
|
-
|
|
10
|
+
|
|
14
11
|
return key;
|
|
15
12
|
};
|
|
16
13
|
|
|
17
|
-
const refetchQuery = (innerKeyTracker?: string) => {
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
const queryData = queryClient.getQueryData<T>(key);
|
|
21
|
-
|
|
22
|
-
setData(queryData);
|
|
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
|
};
|
|
@@ -36,7 +36,7 @@ export const useDeleteRequest = <TResponse>() => {
|
|
|
36
36
|
}
|
|
37
37
|
}, 200);
|
|
38
38
|
}),
|
|
39
|
-
{ ...options }
|
|
39
|
+
{ enabled: false, ...options }
|
|
40
40
|
);
|
|
41
41
|
|
|
42
42
|
const updatedPathAsync = async (link: string) => {
|
|
@@ -63,10 +63,6 @@ export const useDeleteRequest = <TResponse>() => {
|
|
|
63
63
|
await updatedPathAsync(link);
|
|
64
64
|
await setOptionsAsync(deleteOptions);
|
|
65
65
|
|
|
66
|
-
// return query.refetch<TResponse>({
|
|
67
|
-
// queryKey: [link, {}],
|
|
68
|
-
// });
|
|
69
|
-
|
|
70
66
|
return query.data;
|
|
71
67
|
};
|
|
72
68
|
|
|
@@ -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,23 @@ 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
|
+
if (query.isStale) {
|
|
89
|
+
queryClient.removeQueries({
|
|
90
|
+
queryKey: [keyTracker],
|
|
91
|
+
exact: true,
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
}, [query.isStale, keyTracker, queryClient]);
|
|
95
|
+
|
|
82
96
|
const nextPage = () => {
|
|
83
97
|
if (query.data?.data.pagination) {
|
|
84
98
|
const pagination: IPagination = query.data.data.pagination;
|