@ventlio/tanstack-query 0.2.5 → 0.2.7-2.1
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/LICENSE +21 -0
- package/README.md +532 -2
- package/dist/config/bootstrapQueryRequest.d.ts +4 -0
- package/dist/config/bootstrapQueryRequest.js +19 -0
- package/dist/config/bootstrapQueryRequest.js.map +1 -0
- package/dist/config/config.interface.d.ts +4 -0
- package/dist/config/index.d.ts +6 -0
- package/dist/config/useEnvironmentVariables.d.ts +2 -0
- package/dist/config/useEnvironmentVariables.js +14 -0
- package/dist/config/useEnvironmentVariables.js.map +1 -0
- package/dist/config/useQueryConfig.js +10 -0
- package/dist/{queries → config}/useQueryConfig.js.map +1 -1
- package/dist/config/useQueryHeaders.d.ts +2 -0
- package/dist/config/useQueryHeaders.js +28 -0
- package/dist/config/useQueryHeaders.js.map +1 -0
- package/dist/config/useReactNativeEnv.d.ts +5 -0
- package/dist/config/useReactNativeEnv.js +13 -0
- package/dist/config/useReactNativeEnv.js.map +1 -0
- package/dist/helpers/index.d.ts +1 -0
- package/dist/helpers/scrollToTop.js +1 -3
- package/dist/helpers/scrollToTop.js.map +1 -1
- package/dist/helpers/timeFuncs.d.ts +1 -0
- package/dist/helpers/timeFuncs.js +11 -0
- package/dist/helpers/timeFuncs.js.map +1 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +19 -35
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +434 -119
- package/dist/index.mjs.map +1 -1
- package/dist/model/index.d.ts +4 -0
- package/dist/model/model.interface.d.ts +11 -0
- package/dist/model/useKeyTrackerModel.d.ts +4 -0
- package/dist/model/useKeyTrackerModel.js +20 -0
- package/dist/model/useKeyTrackerModel.js.map +1 -0
- package/dist/model/useQueryModel.d.ts +2 -0
- package/dist/model/useQueryModel.js +123 -0
- package/dist/model/useQueryModel.js.map +1 -0
- package/dist/model/useRefetchQuery.d.ts +3 -0
- package/dist/model/useRefetchQuery.js +16 -0
- package/dist/model/useRefetchQuery.js.map +1 -0
- package/dist/queries/index.d.ts +0 -1
- package/dist/queries/queries.interface.d.ts +5 -0
- package/dist/queries/useDeleteRequest.d.ts +14 -5
- package/dist/queries/useDeleteRequest.js +37 -37
- package/dist/queries/useGetRequest.d.ts +4 -3
- package/dist/queries/useGetRequest.js +53 -37
- package/dist/queries/useGetRequest.js.map +1 -1
- package/dist/queries/usePatchRequest.d.ts +7 -7
- package/dist/queries/usePatchRequest.js +42 -34
- package/dist/queries/usePatchRequest.js.map +1 -1
- package/dist/queries/usePostRequest.d.ts +8 -6
- package/dist/queries/usePostRequest.js +47 -37
- package/dist/queries/usePostRequest.js.map +1 -1
- package/dist/request/axios-instance.d.ts +1 -1
- package/dist/request/axios-instance.js +3 -5
- package/dist/request/axios-instance.js.map +1 -1
- package/dist/request/buildFormData.d.ts +1 -1
- package/dist/request/buildFormData.js +36 -6
- package/dist/request/buildFormData.js.map +1 -1
- package/dist/request/make-request.d.ts +1 -1
- package/dist/request/make-request.js +55 -17
- package/dist/request/make-request.js.map +1 -1
- package/dist/request/request.enum.js +6 -6
- package/dist/request/request.interface.d.ts +5 -0
- package/dist/request/transformer.js +1 -4
- package/dist/request/transformer.js.map +1 -1
- package/dist/types/index.d.ts +17 -2
- package/package.json +29 -5
- package/src/__tests__/queries/usePostRequest.spec.ts +77 -0
- package/src/config/bootstrapQueryRequest.ts +19 -0
- package/src/config/config.interface.ts +4 -0
- package/src/config/index.ts +4 -2
- package/src/config/useEnvironmentVariables.ts +13 -0
- package/src/config/useQueryConfig.ts +2 -5
- package/src/config/useQueryHeaders.ts +23 -6
- package/src/config/useReactNativeEnv.ts +13 -0
- package/src/env.d.ts +4 -0
- package/src/helpers/index.ts +1 -0
- package/src/helpers/timeFuncs.ts +10 -0
- package/src/model/index.ts +3 -0
- package/src/model/model.interface.ts +12 -0
- package/src/model/useKeyTrackerModel.ts +22 -0
- package/src/model/useQueryModel.ts +139 -6
- package/src/model/useRefetchQuery.ts +19 -0
- package/src/queries/queries.interface.ts +6 -0
- package/src/queries/useDeleteRequest.ts +34 -30
- package/src/queries/useGetRequest.ts +55 -38
- package/src/queries/usePatchRequest.ts +45 -40
- package/src/queries/usePostRequest.ts +54 -37
- package/src/request/axios-instance.ts +1 -5
- package/src/request/buildFormData.ts +34 -4
- package/src/request/make-request.ts +47 -7
- package/src/request/request.interface.ts +5 -0
- package/src/request/transformer.ts +3 -12
- package/src/types/index.ts +16 -13
- package/dist/queries/useQueryConfig.js +0 -14
- package/src/config/useQueryBaseURL.ts +0 -17
- package/src/config/useQueryTimeout.ts +0 -17
- /package/dist/{queries → config}/useQueryConfig.d.ts +0 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface QueryModelBuilder<T> {
|
|
2
|
+
add: (data: T, position?: QueryModelAddPosition, path?: string) => T | undefined;
|
|
3
|
+
findAll: (path?: string) => T[] | T | undefined;
|
|
4
|
+
findMany: (selector: (record: T) => boolean, path?: string) => T[];
|
|
5
|
+
find: (id: number | string, path?: string) => T | undefined;
|
|
6
|
+
update: (id: number | string, data: Partial<T>, path?: string) => T | undefined;
|
|
7
|
+
remove: (id: number, path?: string) => boolean;
|
|
8
|
+
get: (path?: string) => T | undefined;
|
|
9
|
+
set: <DataType>(data: Partial<DataType>, path?: string) => DataType | undefined;
|
|
10
|
+
}
|
|
11
|
+
export type QueryModelAddPosition = 'start' | 'end';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useQueryClient } from '@tanstack/react-query';
|
|
2
|
+
|
|
3
|
+
const useKeyTrackerModel = (keyTracker) => {
|
|
4
|
+
const queryClient = useQueryClient();
|
|
5
|
+
const getQueryKey = (innerKeyTracker) => {
|
|
6
|
+
const queryKey = queryClient.getQueryData([innerKeyTracker ?? keyTracker]);
|
|
7
|
+
return queryKey;
|
|
8
|
+
};
|
|
9
|
+
const refetchQuery = async (innerKeyTracker) => {
|
|
10
|
+
const queryKey = getQueryKey(innerKeyTracker ?? keyTracker);
|
|
11
|
+
await queryClient.refetchQueries({
|
|
12
|
+
queryKey,
|
|
13
|
+
exact: true,
|
|
14
|
+
});
|
|
15
|
+
};
|
|
16
|
+
return { refetchQuery, getQueryKey };
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
export { useKeyTrackerModel };
|
|
20
|
+
//# sourceMappingURL=useKeyTrackerModel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useKeyTrackerModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { useQueryClient } from '@tanstack/react-query';
|
|
2
|
+
import result from 'lodash.result';
|
|
3
|
+
import lodashSet from 'lodash.set';
|
|
4
|
+
import { useKeyTrackerModel } from './useKeyTrackerModel.js';
|
|
5
|
+
|
|
6
|
+
const useQueryModel = (keyTracker, exact = true) => {
|
|
7
|
+
const queryClient = useQueryClient();
|
|
8
|
+
const { getQueryKey } = useKeyTrackerModel(keyTracker);
|
|
9
|
+
const queryKey = getQueryKey();
|
|
10
|
+
const add = (data, position, path) => {
|
|
11
|
+
let records = (findAll(path) ?? []);
|
|
12
|
+
if (!position || position === 'end') {
|
|
13
|
+
records = [...records, data];
|
|
14
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
15
|
+
}
|
|
16
|
+
else if (position === 'start') {
|
|
17
|
+
records = [data, ...records];
|
|
18
|
+
}
|
|
19
|
+
if (!path) {
|
|
20
|
+
queryClient.setQueryData(queryKey, records);
|
|
21
|
+
}
|
|
22
|
+
else {
|
|
23
|
+
const queryData = queryClient.getQueryData(queryKey, { exact }) ?? {};
|
|
24
|
+
queryClient.setQueryData(queryKey, lodashSet(queryData, path, records));
|
|
25
|
+
}
|
|
26
|
+
return data;
|
|
27
|
+
};
|
|
28
|
+
const findAll = (path) => {
|
|
29
|
+
const data = queryClient.getQueryData(queryKey, { exact });
|
|
30
|
+
if (!data) {
|
|
31
|
+
return [];
|
|
32
|
+
}
|
|
33
|
+
if (!path) {
|
|
34
|
+
return Array.isArray(data) ? data : [data];
|
|
35
|
+
}
|
|
36
|
+
return result(data, path, []);
|
|
37
|
+
};
|
|
38
|
+
const findMany = (selector, path) => {
|
|
39
|
+
const data = (findAll(path) ?? []);
|
|
40
|
+
return data.filter(selector);
|
|
41
|
+
};
|
|
42
|
+
const find = (id, path) => {
|
|
43
|
+
const modelConfig = getModelConfig();
|
|
44
|
+
if (!modelConfig?.idColumn) {
|
|
45
|
+
return undefined;
|
|
46
|
+
}
|
|
47
|
+
const data = (findAll(path) ?? []);
|
|
48
|
+
return data.find((record) => record[modelConfig.idColumn] === id);
|
|
49
|
+
};
|
|
50
|
+
const get = (path) => {
|
|
51
|
+
let data = queryClient.getQueryData(queryKey, { exact });
|
|
52
|
+
if (path) {
|
|
53
|
+
data = result(data, path);
|
|
54
|
+
}
|
|
55
|
+
return data;
|
|
56
|
+
};
|
|
57
|
+
const set = (newData, path) => {
|
|
58
|
+
if (path) {
|
|
59
|
+
const data = get();
|
|
60
|
+
newData = lodashSet(data, path, newData);
|
|
61
|
+
}
|
|
62
|
+
return queryClient.setQueryData(queryKey, newData);
|
|
63
|
+
};
|
|
64
|
+
const getModelConfig = () => {
|
|
65
|
+
const { options } = queryClient.getQueryData(['config']) ?? {};
|
|
66
|
+
const { modelConfig } = options ?? {};
|
|
67
|
+
return modelConfig;
|
|
68
|
+
};
|
|
69
|
+
const update = (id, data, path) => {
|
|
70
|
+
const oldData = (findAll(path) ?? []);
|
|
71
|
+
const modelConfig = getModelConfig();
|
|
72
|
+
if (!modelConfig?.idColumn) {
|
|
73
|
+
return undefined;
|
|
74
|
+
}
|
|
75
|
+
const idColumn = modelConfig.idColumn;
|
|
76
|
+
let updatedRecord = undefined;
|
|
77
|
+
const newData = oldData.map((record) => {
|
|
78
|
+
let dataRecord = record;
|
|
79
|
+
if (dataRecord[idColumn] === id) {
|
|
80
|
+
dataRecord = { ...dataRecord, ...data };
|
|
81
|
+
updatedRecord = dataRecord;
|
|
82
|
+
}
|
|
83
|
+
return dataRecord;
|
|
84
|
+
});
|
|
85
|
+
if (!path) {
|
|
86
|
+
queryClient.setQueryData(queryKey, newData);
|
|
87
|
+
}
|
|
88
|
+
else {
|
|
89
|
+
const queryData = queryClient.getQueryData(queryKey, { exact }) ?? {};
|
|
90
|
+
queryClient.setQueryData(queryKey, lodashSet(queryData, path, newData));
|
|
91
|
+
}
|
|
92
|
+
return updatedRecord;
|
|
93
|
+
};
|
|
94
|
+
const remove = (id, path) => {
|
|
95
|
+
const oldData = (findAll(path) ?? []);
|
|
96
|
+
const modelConfig = getModelConfig();
|
|
97
|
+
if (!modelConfig?.idColumn) {
|
|
98
|
+
return false;
|
|
99
|
+
}
|
|
100
|
+
const idColumn = modelConfig.idColumn;
|
|
101
|
+
let updated = false;
|
|
102
|
+
const newData = oldData.filter((record) => {
|
|
103
|
+
const dataRecord = record;
|
|
104
|
+
if (dataRecord[idColumn] === id) {
|
|
105
|
+
updated = true;
|
|
106
|
+
return false;
|
|
107
|
+
}
|
|
108
|
+
return true;
|
|
109
|
+
});
|
|
110
|
+
if (!path) {
|
|
111
|
+
queryClient.setQueryData(queryKey, newData);
|
|
112
|
+
}
|
|
113
|
+
else {
|
|
114
|
+
const queryData = queryClient.getQueryData(queryKey, { exact }) ?? {};
|
|
115
|
+
queryClient.setQueryData(queryKey, lodashSet(queryData, path, newData));
|
|
116
|
+
}
|
|
117
|
+
return updated;
|
|
118
|
+
};
|
|
119
|
+
return { find, findAll, findMany, remove, update, add, get, set };
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
export { useQueryModel };
|
|
123
|
+
//# sourceMappingURL=useQueryModel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useQueryModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { useQueryClient } from '@tanstack/react-query';
|
|
2
|
+
|
|
3
|
+
const useRefetchQuery = async (queryKey) => {
|
|
4
|
+
const queryClient = useQueryClient();
|
|
5
|
+
const refetchQuery = async (innerQueryKey) => {
|
|
6
|
+
await queryClient.invalidateQueries({
|
|
7
|
+
queryKey: innerQueryKey ?? queryKey,
|
|
8
|
+
exact: true,
|
|
9
|
+
}, { throwOnError: true, cancelRefetch: true });
|
|
10
|
+
return queryClient.getQueriesData(innerQueryKey ?? queryKey);
|
|
11
|
+
};
|
|
12
|
+
return { refetchQuery };
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export { useRefetchQuery };
|
|
16
|
+
//# sourceMappingURL=useRefetchQuery.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRefetchQuery.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
|
package/dist/queries/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type { UseQueryOptions } from '@tanstack/react-query';
|
|
2
|
+
import type { RawAxiosRequestHeaders } from 'axios';
|
|
2
3
|
import type { IRequestError, IRequestSuccess } from '../request';
|
|
3
4
|
export interface IPagination {
|
|
4
5
|
current_page: number;
|
|
@@ -9,3 +10,7 @@ export interface IPagination {
|
|
|
9
10
|
total: number;
|
|
10
11
|
}
|
|
11
12
|
export type TanstackQueryOption<TResponse> = UseQueryOptions<IRequestSuccess<TResponse | undefined>, IRequestError, IRequestSuccess<TResponse | undefined>, Array<any>>;
|
|
13
|
+
export interface DefaultRequestOptions {
|
|
14
|
+
baseUrl?: string;
|
|
15
|
+
headers?: RawAxiosRequestHeaders;
|
|
16
|
+
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { UseQueryOptions } from '@tanstack/react-query';
|
|
2
2
|
import type { IRequestError, IRequestSuccess } from '../request';
|
|
3
|
-
|
|
3
|
+
import type { DefaultRequestOptions } from './queries.interface';
|
|
4
|
+
export declare const useDeleteRequest: <TResponse>(deleteOptions?: DefaultRequestOptions) => {
|
|
4
5
|
data: IRequestSuccess<TResponse>;
|
|
5
6
|
error: any;
|
|
6
7
|
isError: true;
|
|
@@ -26,7 +27,9 @@ export declare const useDeleteRequest: <TResponse>() => {
|
|
|
26
27
|
refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<IRequestSuccess<TResponse>, any>>;
|
|
27
28
|
remove: () => void;
|
|
28
29
|
fetchStatus: import("@tanstack/react-query").FetchStatus;
|
|
29
|
-
destroy: (link: string,
|
|
30
|
+
destroy: (link: string, internalDeleteOptions?: (UseQueryOptions<IRequestSuccess<TResponse | undefined>, IRequestError, IRequestSuccess<TResponse | undefined>, any[]> & {
|
|
31
|
+
cached?: boolean | undefined;
|
|
32
|
+
}) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
|
|
30
33
|
} | {
|
|
31
34
|
data: IRequestSuccess<TResponse>;
|
|
32
35
|
error: null;
|
|
@@ -53,7 +56,9 @@ export declare const useDeleteRequest: <TResponse>() => {
|
|
|
53
56
|
refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<IRequestSuccess<TResponse>, any>>;
|
|
54
57
|
remove: () => void;
|
|
55
58
|
fetchStatus: import("@tanstack/react-query").FetchStatus;
|
|
56
|
-
destroy: (link: string,
|
|
59
|
+
destroy: (link: string, internalDeleteOptions?: (UseQueryOptions<IRequestSuccess<TResponse | undefined>, IRequestError, IRequestSuccess<TResponse | undefined>, any[]> & {
|
|
60
|
+
cached?: boolean | undefined;
|
|
61
|
+
}) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
|
|
57
62
|
} | {
|
|
58
63
|
data: undefined;
|
|
59
64
|
error: any;
|
|
@@ -80,7 +85,9 @@ export declare const useDeleteRequest: <TResponse>() => {
|
|
|
80
85
|
refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<IRequestSuccess<TResponse>, any>>;
|
|
81
86
|
remove: () => void;
|
|
82
87
|
fetchStatus: import("@tanstack/react-query").FetchStatus;
|
|
83
|
-
destroy: (link: string,
|
|
88
|
+
destroy: (link: string, internalDeleteOptions?: (UseQueryOptions<IRequestSuccess<TResponse | undefined>, IRequestError, IRequestSuccess<TResponse | undefined>, any[]> & {
|
|
89
|
+
cached?: boolean | undefined;
|
|
90
|
+
}) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
|
|
84
91
|
} | {
|
|
85
92
|
data: undefined;
|
|
86
93
|
error: null;
|
|
@@ -107,5 +114,7 @@ export declare const useDeleteRequest: <TResponse>() => {
|
|
|
107
114
|
refetch: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<IRequestSuccess<TResponse>, any>>;
|
|
108
115
|
remove: () => void;
|
|
109
116
|
fetchStatus: import("@tanstack/react-query").FetchStatus;
|
|
110
|
-
destroy: (link: string,
|
|
117
|
+
destroy: (link: string, internalDeleteOptions?: (UseQueryOptions<IRequestSuccess<TResponse | undefined>, IRequestError, IRequestSuccess<TResponse | undefined>, any[]> & {
|
|
118
|
+
cached?: boolean | undefined;
|
|
119
|
+
}) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
|
|
111
120
|
};
|
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
|
|
1
|
+
import { useQuery } from '@tanstack/react-query';
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import 'url-search-params-polyfill';
|
|
4
|
+
import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
|
|
5
|
+
import { useQueryHeaders } from '../config/useQueryHeaders.js';
|
|
6
|
+
import 'axios';
|
|
7
|
+
import { makeRequest } from '../request/make-request.js';
|
|
8
|
+
import { HttpMethod } from '../request/request.enum.js';
|
|
2
9
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
rej(postResponse);
|
|
28
|
-
}
|
|
29
|
-
}, 200);
|
|
30
|
-
}), { ...options });
|
|
10
|
+
const useDeleteRequest = (deleteOptions) => {
|
|
11
|
+
const { baseUrl, headers } = deleteOptions ?? {};
|
|
12
|
+
const [requestPath, updateDeletePath] = useState('');
|
|
13
|
+
const [options, setOptions] = useState();
|
|
14
|
+
const { API_URL, TIMEOUT } = useEnvironmentVariables();
|
|
15
|
+
const { getHeaders } = useQueryHeaders();
|
|
16
|
+
const sendRequest = async (res, rej) => {
|
|
17
|
+
// get request headers
|
|
18
|
+
const globalHeaders = getHeaders();
|
|
19
|
+
const postResponse = await makeRequest({
|
|
20
|
+
path: requestPath,
|
|
21
|
+
headers: { ...globalHeaders, ...headers },
|
|
22
|
+
method: HttpMethod.DELETE,
|
|
23
|
+
baseURL: baseUrl ?? API_URL,
|
|
24
|
+
timeout: TIMEOUT,
|
|
25
|
+
});
|
|
26
|
+
if (postResponse.status) {
|
|
27
|
+
res(postResponse);
|
|
28
|
+
}
|
|
29
|
+
else {
|
|
30
|
+
rej(postResponse);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const query = useQuery([requestPath, {}], () => new Promise((res, rej) => sendRequest(res, rej)), { enabled: false, ...options });
|
|
31
34
|
const updatedPathAsync = async (link) => {
|
|
32
35
|
return updateDeletePath(link);
|
|
33
36
|
};
|
|
34
37
|
const setOptionsAsync = async (fetchOptions) => {
|
|
35
38
|
return setOptions(fetchOptions);
|
|
36
39
|
};
|
|
37
|
-
const destroy = async (link,
|
|
40
|
+
const destroy = async (link, internalDeleteOptions) => {
|
|
38
41
|
// set enabled to be true for every delete
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
internalDeleteOptions = internalDeleteOptions ?? {};
|
|
43
|
+
internalDeleteOptions.enabled = true;
|
|
44
|
+
await setOptionsAsync(internalDeleteOptions);
|
|
41
45
|
await updatedPathAsync(link);
|
|
42
|
-
await setOptionsAsync(deleteOptions);
|
|
43
|
-
// return query.refetch<TResponse>({
|
|
44
|
-
// queryKey: [link, {}],
|
|
45
|
-
// });
|
|
46
46
|
return query.data;
|
|
47
47
|
};
|
|
48
48
|
return { destroy, ...query };
|
|
49
49
|
};
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
export { useDeleteRequest };
|
|
52
52
|
//# sourceMappingURL=useDeleteRequest.js.map
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { UseQueryOptions } from '@tanstack/react-query';
|
|
3
3
|
import type { IRequestError, IRequestSuccess } from '../request';
|
|
4
|
-
import type { TanstackQueryOption } from './queries.interface';
|
|
5
|
-
export declare const useGetRequest: <TResponse extends Record<string, any>>({ path, load, queryOptions, }: {
|
|
4
|
+
import type { DefaultRequestOptions, TanstackQueryOption } from './queries.interface';
|
|
5
|
+
export declare const useGetRequest: <TResponse extends Record<string, any>>({ path, load, queryOptions, keyTracker, baseUrl, headers, }: {
|
|
6
6
|
path: string;
|
|
7
7
|
load?: boolean | undefined;
|
|
8
8
|
queryOptions?: TanstackQueryOption<TResponse> | undefined;
|
|
9
|
-
|
|
9
|
+
keyTracker?: string | undefined;
|
|
10
|
+
} & DefaultRequestOptions) => {
|
|
10
11
|
updatePath: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
11
12
|
nextPage: () => void;
|
|
12
13
|
prevPage: () => void;
|
|
@@ -1,47 +1,65 @@
|
|
|
1
|
-
|
|
1
|
+
import { useQueryClient, useQuery } from '@tanstack/react-query';
|
|
2
|
+
import { useState, useMemo, useEffect, startTransition } from 'react';
|
|
3
|
+
import 'url-search-params-polyfill';
|
|
4
|
+
import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
|
|
5
|
+
import { useQueryHeaders } from '../config/useQueryHeaders.js';
|
|
6
|
+
import 'axios';
|
|
7
|
+
import { makeRequest } from '../request/make-request.js';
|
|
8
|
+
import '../request/request.enum.js';
|
|
2
9
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
const [options, setOptions] = react.useState(queryOptions);
|
|
13
|
-
const [page, setPage] = react.useState(1);
|
|
14
|
-
const { headers, baseURL, timeout } = useQueryConfig.useQueryConfig();
|
|
10
|
+
const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
|
|
11
|
+
const [requestPath, updatePath] = useState(path);
|
|
12
|
+
const [options, setOptions] = useState(queryOptions);
|
|
13
|
+
const [page, setPage] = useState(1);
|
|
14
|
+
const { API_URL, TIMEOUT } = useEnvironmentVariables();
|
|
15
|
+
const { getHeaders } = useQueryHeaders();
|
|
16
|
+
let queryClient = useQueryClient();
|
|
17
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
18
|
+
queryClient = useMemo(() => queryClient, []);
|
|
15
19
|
const sendRequest = async (res, rej) => {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
if (load) {
|
|
21
|
+
// get request headers
|
|
22
|
+
const globalHeaders = getHeaders();
|
|
23
|
+
const getResponse = await makeRequest({
|
|
24
|
+
path: requestPath,
|
|
25
|
+
headers: { ...globalHeaders, ...headers },
|
|
26
|
+
baseURL: baseUrl ?? API_URL,
|
|
27
|
+
timeout: TIMEOUT,
|
|
28
|
+
});
|
|
29
|
+
if (getResponse.status) {
|
|
30
|
+
res(getResponse);
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
rej(getResponse);
|
|
34
|
+
}
|
|
24
35
|
}
|
|
25
36
|
else {
|
|
26
|
-
|
|
37
|
+
res(null);
|
|
27
38
|
}
|
|
28
39
|
};
|
|
29
|
-
const query =
|
|
30
|
-
return sendRequest(res, rej);
|
|
31
|
-
}), {
|
|
40
|
+
const query = useQuery([requestPath, {}], () => new Promise((res, rej) => sendRequest(res, rej)), {
|
|
32
41
|
enabled: load,
|
|
33
42
|
...options,
|
|
34
43
|
});
|
|
35
|
-
|
|
44
|
+
useEffect(() => {
|
|
36
45
|
if (path) {
|
|
37
46
|
updatePath(path);
|
|
38
47
|
}
|
|
39
48
|
}, [path]);
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
if (keyTracker) {
|
|
51
|
+
// set expiration time for the tracker
|
|
52
|
+
queryClient.setQueryDefaults([keyTracker], {
|
|
53
|
+
cacheTime: Infinity,
|
|
54
|
+
staleTime: Infinity,
|
|
55
|
+
});
|
|
56
|
+
queryClient.setQueryData([keyTracker], [requestPath, {}]);
|
|
57
|
+
}
|
|
58
|
+
}, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
|
|
40
59
|
const nextPage = () => {
|
|
41
60
|
if (query.data?.data.pagination) {
|
|
42
61
|
const pagination = query.data.data.pagination;
|
|
43
|
-
if (pagination.next_page !== pagination.current_page &&
|
|
44
|
-
pagination.next_page > pagination.current_page) {
|
|
62
|
+
if (pagination.next_page !== pagination.current_page && pagination.next_page > pagination.current_page) {
|
|
45
63
|
updatePath(constructPaginationLink(requestPath, pagination.next_page));
|
|
46
64
|
}
|
|
47
65
|
}
|
|
@@ -49,17 +67,15 @@ const useGetRequest = ({ path, load = false, queryOptions, }) => {
|
|
|
49
67
|
const prevPage = () => {
|
|
50
68
|
if (query.data?.data.pagination) {
|
|
51
69
|
const pagination = query.data.data.pagination;
|
|
52
|
-
if (pagination.previous_page !== pagination.current_page &&
|
|
53
|
-
pagination.previous_page < pagination.current_page) {
|
|
70
|
+
if (pagination.previous_page !== pagination.current_page && pagination.previous_page < pagination.current_page) {
|
|
54
71
|
updatePath(constructPaginationLink(requestPath, pagination.previous_page));
|
|
55
72
|
}
|
|
56
73
|
}
|
|
57
74
|
};
|
|
58
75
|
const constructPaginationLink = (link, pageNumber) => {
|
|
59
|
-
const
|
|
60
|
-
const
|
|
61
|
-
const
|
|
62
|
-
const queryParams = new URLSearchParams(queryStrings ?? '');
|
|
76
|
+
const [pathname, queryString] = link.split('?');
|
|
77
|
+
const queryParams = new URLSearchParams(queryString);
|
|
78
|
+
const oldPage = Number(queryParams.get('page'));
|
|
63
79
|
queryParams.set('page', pageNumber);
|
|
64
80
|
link = pathname + '?' + queryParams.toString();
|
|
65
81
|
// only update page when pagination number changed
|
|
@@ -72,12 +88,12 @@ const useGetRequest = ({ path, load = false, queryOptions, }) => {
|
|
|
72
88
|
updatePath(constructPaginationLink(requestPath, pageNumber));
|
|
73
89
|
};
|
|
74
90
|
const updatedPathAsync = async (link) => {
|
|
75
|
-
|
|
91
|
+
startTransition(() => {
|
|
76
92
|
updatePath(link);
|
|
77
93
|
});
|
|
78
94
|
};
|
|
79
95
|
const setOptionsAsync = async (fetchOptions) => {
|
|
80
|
-
|
|
96
|
+
startTransition(() => {
|
|
81
97
|
setOptions(fetchOptions);
|
|
82
98
|
});
|
|
83
99
|
};
|
|
@@ -98,5 +114,5 @@ const useGetRequest = ({ path, load = false, queryOptions, }) => {
|
|
|
98
114
|
};
|
|
99
115
|
};
|
|
100
116
|
|
|
101
|
-
|
|
117
|
+
export { useGetRequest };
|
|
102
118
|
//# sourceMappingURL=useGetRequest.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { MutateOptions } from '@tanstack/react-query';
|
|
2
2
|
import type { IRequestError, IRequestSuccess } from '../request/request.interface';
|
|
3
|
-
|
|
3
|
+
import type { DefaultRequestOptions } from './queries.interface';
|
|
4
|
+
export declare const usePatchRequest: <TResponse>({ path, baseUrl, headers }: {
|
|
4
5
|
path: string;
|
|
5
|
-
|
|
6
|
-
}) => {
|
|
6
|
+
} & DefaultRequestOptions) => {
|
|
7
7
|
data: undefined;
|
|
8
8
|
error: null;
|
|
9
9
|
isError: false;
|
|
@@ -19,7 +19,7 @@ export declare const usePatchRequest: <TResponse>({ path, }: {
|
|
|
19
19
|
isPaused: boolean;
|
|
20
20
|
variables: void | undefined;
|
|
21
21
|
mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
|
|
22
|
-
patch: (
|
|
22
|
+
patch: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
|
|
23
23
|
} | {
|
|
24
24
|
data: undefined;
|
|
25
25
|
error: null;
|
|
@@ -36,7 +36,7 @@ export declare const usePatchRequest: <TResponse>({ path, }: {
|
|
|
36
36
|
isPaused: boolean;
|
|
37
37
|
variables: void | undefined;
|
|
38
38
|
mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
|
|
39
|
-
patch: (
|
|
39
|
+
patch: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
|
|
40
40
|
} | {
|
|
41
41
|
data: undefined;
|
|
42
42
|
error: IRequestError;
|
|
@@ -53,7 +53,7 @@ export declare const usePatchRequest: <TResponse>({ path, }: {
|
|
|
53
53
|
isPaused: boolean;
|
|
54
54
|
variables: void | undefined;
|
|
55
55
|
mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
|
|
56
|
-
patch: (
|
|
56
|
+
patch: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
|
|
57
57
|
} | {
|
|
58
58
|
data: IRequestSuccess<TResponse>;
|
|
59
59
|
error: null;
|
|
@@ -70,5 +70,5 @@ export declare const usePatchRequest: <TResponse>({ path, }: {
|
|
|
70
70
|
isPaused: boolean;
|
|
71
71
|
variables: void | undefined;
|
|
72
72
|
mutateAsync: import("@tanstack/react-query").UseMutateAsyncFunction<IRequestSuccess<TResponse>, IRequestError, void, unknown>;
|
|
73
|
-
patch: (
|
|
73
|
+
patch: (data: any, options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined) => Promise<IRequestSuccess<TResponse>>;
|
|
74
74
|
};
|