@ventlio/tanstack-query 0.3.1 → 0.3.3
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.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +127 -33
- package/dist/index.mjs.map +1 -1
- package/dist/queries/useDeleteRequest.d.ts +4 -4
- package/dist/queries/useDeleteRequest.js +26 -9
- package/dist/queries/useDeleteRequest.js.map +1 -1
- package/dist/queries/useGetInfiniteRequest.d.ts +4 -4
- package/dist/queries/useGetInfiniteRequest.js +21 -4
- package/dist/queries/useGetInfiniteRequest.js.map +1 -1
- package/dist/queries/useGetRequest.d.ts +4 -4
- package/dist/queries/useGetRequest.js +21 -4
- package/dist/queries/useGetRequest.js.map +1 -1
- package/dist/queries/usePatchRequest.d.ts +8 -8
- package/dist/queries/usePatchRequest.js +19 -2
- package/dist/queries/usePatchRequest.js.map +1 -1
- package/dist/queries/usePostRequest.d.ts +8 -8
- package/dist/queries/usePostRequest.js +20 -3
- package/dist/queries/usePostRequest.js.map +1 -1
- package/dist/stores/index.d.ts +1 -0
- package/dist/stores/usePauseFutureRequests.d.ts +7 -0
- package/dist/stores/usePauseFutureRequests.js +19 -0
- package/dist/stores/usePauseFutureRequests.js.map +1 -0
- package/package.json +4 -2
- package/src/__tests__/queries/usePostRequest.spec.tsx +84 -0
- package/src/index.ts +2 -0
- package/src/queries/useDeleteRequest.ts +27 -9
- package/src/queries/useGetInfiniteRequest.ts +22 -4
- package/src/queries/useGetRequest.ts +22 -4
- package/src/queries/usePatchRequest.ts +22 -3
- package/src/queries/usePostRequest.ts +22 -4
- package/src/stores/index.ts +1 -0
- package/src/stores/usePauseFutureRequests.ts +25 -0
- package/src/__tests__/queries/usePostRequest.spec.ts +0 -77
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -5,6 +5,7 @@ export { useQueryHeaders } from './config/useQueryHeaders.js';
|
|
|
5
5
|
export { useReactNativeEnv } from './config/useReactNativeEnv.js';
|
|
6
6
|
export { scrollToTop } from './helpers/scrollToTop.js';
|
|
7
7
|
export { getDateInFuture } from './helpers/timeFuncs.js';
|
|
8
|
+
export { useUploadProgress } from './hooks/useUploadProgress.js';
|
|
8
9
|
export { useKeyTrackerModel } from './model/useKeyTrackerModel.js';
|
|
9
10
|
export { useQueryModel } from './model/useQueryModel.js';
|
|
10
11
|
export { useRefetchQuery } from './model/useRefetchQuery.js';
|
|
@@ -18,4 +19,5 @@ export { buildFormData } from './request/buildFormData.js';
|
|
|
18
19
|
export { makeRequest } from './request/make-request.js';
|
|
19
20
|
export { ContentType, HttpMethod } from './request/request.enum.js';
|
|
20
21
|
export { errorTransformer, successTransformer } from './request/transformer.js';
|
|
22
|
+
export { usePauseFutureRequests } from './stores/usePauseFutureRequests.js';
|
|
21
23
|
//# sourceMappingURL=index.js.map
|
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,9 +1,10 @@
|
|
|
1
1
|
import 'url-search-params-polyfill';
|
|
2
2
|
import { useQueryClient, useQuery, useInfiniteQuery, useMutation } from '@tanstack/react-query';
|
|
3
|
+
import { useState, useEffect, useMemo, startTransition } from 'react';
|
|
3
4
|
import result from 'lodash.result';
|
|
4
5
|
import lodashSet from 'lodash.set';
|
|
5
|
-
import { useState, useMemo, useEffect, startTransition } from 'react';
|
|
6
6
|
import axios from 'axios';
|
|
7
|
+
import { create } from 'zustand';
|
|
7
8
|
|
|
8
9
|
const bootstrapQueryRequest = (queryClient, options) => {
|
|
9
10
|
// make query config doesn't expire
|
|
@@ -84,6 +85,16 @@ function getDateInFuture(days) {
|
|
|
84
85
|
return date.getTime();
|
|
85
86
|
}
|
|
86
87
|
|
|
88
|
+
const useUploadProgress = () => {
|
|
89
|
+
const [uploadProgressPercent, setUploadProgressPercent] = useState(0);
|
|
90
|
+
const onUploadProgress = (progressEvent) => {
|
|
91
|
+
const { loaded, total } = progressEvent;
|
|
92
|
+
const percentage = Math.round((loaded / total) * 100);
|
|
93
|
+
setUploadProgressPercent(percentage);
|
|
94
|
+
};
|
|
95
|
+
return { onUploadProgress, uploadProgressPercent };
|
|
96
|
+
};
|
|
97
|
+
|
|
87
98
|
const useKeyTrackerModel = (keyTracker) => {
|
|
88
99
|
const queryClient = useQueryClient();
|
|
89
100
|
const getQueryKey = (innerKeyTracker) => {
|
|
@@ -391,11 +402,28 @@ function getAppFiles(body, fileSelectors = []) {
|
|
|
391
402
|
return files;
|
|
392
403
|
}
|
|
393
404
|
|
|
405
|
+
const usePauseFutureRequests = create((set) => {
|
|
406
|
+
const pauseFutureQueries = (status) => {
|
|
407
|
+
return set({ isFutureQueriesPaused: status });
|
|
408
|
+
};
|
|
409
|
+
const pauseFutureMutation = (status) => {
|
|
410
|
+
return set({ isFutureQueriesPaused: status });
|
|
411
|
+
};
|
|
412
|
+
return {
|
|
413
|
+
isFutureMutationsPaused: false,
|
|
414
|
+
isFutureQueriesPaused: false,
|
|
415
|
+
pauseFutureQueries,
|
|
416
|
+
pauseFutureMutation,
|
|
417
|
+
};
|
|
418
|
+
});
|
|
419
|
+
|
|
394
420
|
const useDeleteRequest = (deleteOptions) => {
|
|
395
421
|
const { baseUrl, headers } = deleteOptions ?? {};
|
|
396
422
|
const [requestPath, setRequestPath] = useState('');
|
|
397
423
|
const [options, setOptions] = useState();
|
|
398
424
|
const { options: queryConfigOptions } = useQueryConfig();
|
|
425
|
+
const [requestPayload, setRequestPayload] = useState();
|
|
426
|
+
const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
|
|
399
427
|
const { API_URL, TIMEOUT } = useEnvironmentVariables();
|
|
400
428
|
const { getHeaders } = useQueryHeaders();
|
|
401
429
|
const sendRequest = async (res, rej, queryKey) => {
|
|
@@ -407,6 +435,7 @@ const useDeleteRequest = (deleteOptions) => {
|
|
|
407
435
|
path: requestUrl,
|
|
408
436
|
headers: { ...globalHeaders, ...headers },
|
|
409
437
|
baseURL: baseUrl ?? API_URL,
|
|
438
|
+
method: HttpMethod.DELETE,
|
|
410
439
|
timeout: TIMEOUT,
|
|
411
440
|
};
|
|
412
441
|
let shouldContinue = true;
|
|
@@ -434,14 +463,27 @@ const useDeleteRequest = (deleteOptions) => {
|
|
|
434
463
|
return setOptions(fetchOptions);
|
|
435
464
|
};
|
|
436
465
|
const destroy = async (link, internalDeleteOptions) => {
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
466
|
+
if (!isFutureQueriesPaused) {
|
|
467
|
+
// set enabled to be true for every delete
|
|
468
|
+
internalDeleteOptions = internalDeleteOptions ?? {};
|
|
469
|
+
internalDeleteOptions.enabled = true;
|
|
470
|
+
await setOptionsAsync(internalDeleteOptions);
|
|
471
|
+
await updatedPathAsync(link);
|
|
472
|
+
return query.data;
|
|
473
|
+
}
|
|
474
|
+
else {
|
|
475
|
+
setRequestPayload({ link, internalDeleteOptions });
|
|
476
|
+
return undefined;
|
|
477
|
+
}
|
|
478
|
+
};
|
|
479
|
+
useEffect(() => {
|
|
480
|
+
if (!isFutureQueriesPaused && requestPayload) {
|
|
481
|
+
destroy(requestPayload.link, requestPayload.internalDeleteOptions);
|
|
482
|
+
setRequestPayload(undefined);
|
|
483
|
+
}
|
|
484
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
485
|
+
}, [isFutureQueriesPaused]);
|
|
486
|
+
return { destroy, ...query, isLoading: query.isLoading || isFutureQueriesPaused };
|
|
445
487
|
};
|
|
446
488
|
|
|
447
489
|
const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
|
|
@@ -450,6 +492,8 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
|
|
|
450
492
|
const [requestPath, setRequestPath] = useState(path);
|
|
451
493
|
const [options, setOptions] = useState(queryOptions);
|
|
452
494
|
const { options: queryConfigOptions } = useQueryConfig();
|
|
495
|
+
const [requestPayload, setRequestPayload] = useState();
|
|
496
|
+
const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
|
|
453
497
|
let queryClient = useQueryClient();
|
|
454
498
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
455
499
|
queryClient = useMemo(() => queryClient, []);
|
|
@@ -496,7 +540,7 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
|
|
|
496
540
|
return pathname + '?' + queryParams.toString();
|
|
497
541
|
};
|
|
498
542
|
const query = useInfiniteQuery([requestPath, {}], ({ pageParam = requestPath, queryKey }) => new Promise((res, rej) => sendRequest(res, rej, queryKey, pageParam)), {
|
|
499
|
-
enabled: load,
|
|
543
|
+
enabled: load && !isFutureQueriesPaused,
|
|
500
544
|
getNextPageParam: (lastPage) => constructPaginationLink('next_page', lastPage),
|
|
501
545
|
getPreviousPageParam: (lastPage) => constructPaginationLink('previous_page', lastPage),
|
|
502
546
|
...options,
|
|
@@ -507,10 +551,23 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
|
|
|
507
551
|
});
|
|
508
552
|
};
|
|
509
553
|
const get = async (link, fetchOptions) => {
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
554
|
+
if (!isFutureQueriesPaused) {
|
|
555
|
+
await setOptionsAsync(fetchOptions);
|
|
556
|
+
await updatedPathAsync(link);
|
|
557
|
+
return query.data;
|
|
558
|
+
}
|
|
559
|
+
else {
|
|
560
|
+
setRequestPayload({ link, fetchOptions });
|
|
561
|
+
return undefined;
|
|
562
|
+
}
|
|
513
563
|
};
|
|
564
|
+
useEffect(() => {
|
|
565
|
+
if (!isFutureQueriesPaused && requestPayload) {
|
|
566
|
+
get(requestPayload.link, requestPayload.fetchOptions);
|
|
567
|
+
setRequestPayload(undefined);
|
|
568
|
+
}
|
|
569
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
570
|
+
}, [isFutureQueriesPaused]);
|
|
514
571
|
const updatedPathAsync = async (link) => {
|
|
515
572
|
startTransition(() => {
|
|
516
573
|
setRequestPath(link);
|
|
@@ -529,6 +586,7 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
|
|
|
529
586
|
return {
|
|
530
587
|
get,
|
|
531
588
|
...query,
|
|
589
|
+
isLoading: query.isLoading || isFutureQueriesPaused,
|
|
532
590
|
};
|
|
533
591
|
};
|
|
534
592
|
|
|
@@ -539,6 +597,8 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
|
|
|
539
597
|
const { API_URL, TIMEOUT } = useEnvironmentVariables();
|
|
540
598
|
const { getHeaders } = useQueryHeaders();
|
|
541
599
|
const { options: queryConfigOptions } = useQueryConfig();
|
|
600
|
+
const [requestPayload, setRequestPayload] = useState();
|
|
601
|
+
const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
|
|
542
602
|
let queryClient = useQueryClient();
|
|
543
603
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
544
604
|
queryClient = useMemo(() => queryClient, []);
|
|
@@ -576,7 +636,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
|
|
|
576
636
|
}
|
|
577
637
|
};
|
|
578
638
|
const query = useQuery([requestPath, {}], ({ queryKey }) => new Promise((res, rej) => sendRequest(res, rej, queryKey)), {
|
|
579
|
-
enabled: load,
|
|
639
|
+
enabled: load && !isFutureQueriesPaused,
|
|
580
640
|
...options,
|
|
581
641
|
});
|
|
582
642
|
useEffect(() => {
|
|
@@ -636,12 +696,26 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
|
|
|
636
696
|
});
|
|
637
697
|
};
|
|
638
698
|
const get = async (link, fetchOptions) => {
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
699
|
+
if (!isFutureQueriesPaused) {
|
|
700
|
+
await setOptionsAsync(fetchOptions);
|
|
701
|
+
await updatedPathAsync(link);
|
|
702
|
+
return query.data;
|
|
703
|
+
}
|
|
704
|
+
else {
|
|
705
|
+
setRequestPayload({ link, fetchOptions });
|
|
706
|
+
return undefined;
|
|
707
|
+
}
|
|
642
708
|
};
|
|
709
|
+
useEffect(() => {
|
|
710
|
+
if (!isFutureQueriesPaused && requestPayload) {
|
|
711
|
+
get(requestPayload.link, requestPayload.fetchOptions);
|
|
712
|
+
setRequestPayload(undefined);
|
|
713
|
+
}
|
|
714
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
715
|
+
}, [isFutureQueriesPaused]);
|
|
643
716
|
return {
|
|
644
717
|
...query,
|
|
718
|
+
isLoading: query.isLoading || isFutureQueriesPaused,
|
|
645
719
|
setRequestPath,
|
|
646
720
|
nextPage,
|
|
647
721
|
prevPage,
|
|
@@ -652,19 +726,11 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
|
|
|
652
726
|
};
|
|
653
727
|
};
|
|
654
728
|
|
|
655
|
-
const useUploadProgress = () => {
|
|
656
|
-
const [uploadProgressPercent, setUploadProgressPercent] = useState(0);
|
|
657
|
-
const onUploadProgress = (progressEvent) => {
|
|
658
|
-
const { loaded, total } = progressEvent;
|
|
659
|
-
const percentage = Math.round((loaded / total) * 100);
|
|
660
|
-
setUploadProgressPercent(percentage);
|
|
661
|
-
};
|
|
662
|
-
return { onUploadProgress, uploadProgressPercent };
|
|
663
|
-
};
|
|
664
|
-
|
|
665
729
|
const usePatchRequest = ({ path, baseUrl, headers }) => {
|
|
666
730
|
const { API_URL, TIMEOUT } = useEnvironmentVariables();
|
|
667
731
|
const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
|
|
732
|
+
const [requestPayload, setRequestPayload] = useState();
|
|
733
|
+
const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
|
|
668
734
|
const { getHeaders } = useQueryHeaders();
|
|
669
735
|
const config = useQueryConfig();
|
|
670
736
|
const sendRequest = async (res, rej, data) => {
|
|
@@ -712,9 +778,22 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
|
|
|
712
778
|
return sendRequest(res, rej, dataData);
|
|
713
779
|
}), { mutationKey: [path, { type: 'mutation' }] });
|
|
714
780
|
const patch = async (data, options) => {
|
|
715
|
-
|
|
781
|
+
if (!isFutureMutationsPaused) {
|
|
782
|
+
return mutation.mutateAsync(data, options);
|
|
783
|
+
}
|
|
784
|
+
else {
|
|
785
|
+
setRequestPayload({ data, options });
|
|
786
|
+
return undefined;
|
|
787
|
+
}
|
|
716
788
|
};
|
|
717
|
-
|
|
789
|
+
useEffect(() => {
|
|
790
|
+
if (!isFutureMutationsPaused && requestPayload) {
|
|
791
|
+
patch(requestPayload.data, requestPayload.options);
|
|
792
|
+
setRequestPayload(undefined);
|
|
793
|
+
}
|
|
794
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
795
|
+
}, [isFutureMutationsPaused]);
|
|
796
|
+
return { patch, uploadProgressPercent, ...mutation, isLoading: mutation.isLoading || isFutureMutationsPaused };
|
|
718
797
|
};
|
|
719
798
|
|
|
720
799
|
const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelectors, }) => {
|
|
@@ -723,6 +802,8 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
|
|
|
723
802
|
const { getHeaders } = useQueryHeaders();
|
|
724
803
|
const { isApp } = useReactNativeEnv();
|
|
725
804
|
const { uploadProgressPercent, onUploadProgress } = useUploadProgress();
|
|
805
|
+
const [requestPayload, setRequestPayload] = useState();
|
|
806
|
+
const isFutureMutationsPaused = usePauseFutureRequests((state) => state.isFutureMutationsPaused);
|
|
726
807
|
const sendRequest = async (res, rej, postData) => {
|
|
727
808
|
// get request headers
|
|
728
809
|
const globalHeaders = getHeaders();
|
|
@@ -776,11 +857,24 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
|
|
|
776
857
|
mutationKey: [path, { type: 'mutation' }],
|
|
777
858
|
});
|
|
778
859
|
const post = async (data, options) => {
|
|
779
|
-
|
|
780
|
-
|
|
860
|
+
if (!isFutureMutationsPaused) {
|
|
861
|
+
const { requestConfig, ...otherOptions } = options ?? {};
|
|
862
|
+
return mutation.mutateAsync({ data, requestConfig }, otherOptions);
|
|
863
|
+
}
|
|
864
|
+
else {
|
|
865
|
+
setRequestPayload({ data, options });
|
|
866
|
+
return undefined;
|
|
867
|
+
}
|
|
781
868
|
};
|
|
782
|
-
|
|
869
|
+
useEffect(() => {
|
|
870
|
+
if (!isFutureMutationsPaused && requestPayload) {
|
|
871
|
+
post(requestPayload.data, requestPayload.options);
|
|
872
|
+
setRequestPayload(undefined);
|
|
873
|
+
}
|
|
874
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
875
|
+
}, [isFutureMutationsPaused]);
|
|
876
|
+
return { post, uploadProgressPercent, ...mutation, isLoading: mutation.isLoading || isFutureMutationsPaused };
|
|
783
877
|
};
|
|
784
878
|
|
|
785
|
-
export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, getDateInFuture, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetInfiniteRequest, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery };
|
|
879
|
+
export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, getDateInFuture, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetInfiniteRequest, useGetRequest, useKeyTrackerModel, usePatchRequest, usePauseFutureRequests, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery, useUploadProgress };
|
|
786
880
|
//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -2,10 +2,10 @@ import type { UseQueryOptions } from '@tanstack/react-query';
|
|
|
2
2
|
import type { IRequestError, IRequestSuccess } from '../request';
|
|
3
3
|
import type { DefaultRequestOptions } from './queries.interface';
|
|
4
4
|
export declare const useDeleteRequest: <TResponse>(deleteOptions?: DefaultRequestOptions) => {
|
|
5
|
+
isLoading: boolean;
|
|
5
6
|
data: IRequestSuccess<TResponse>;
|
|
6
7
|
error: any;
|
|
7
8
|
isError: true;
|
|
8
|
-
isLoading: false;
|
|
9
9
|
isLoadingError: false;
|
|
10
10
|
isRefetchError: true;
|
|
11
11
|
isSuccess: false;
|
|
@@ -31,10 +31,10 @@ export declare const useDeleteRequest: <TResponse>(deleteOptions?: DefaultReques
|
|
|
31
31
|
cached?: boolean | undefined;
|
|
32
32
|
}) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
|
|
33
33
|
} | {
|
|
34
|
+
isLoading: boolean;
|
|
34
35
|
data: IRequestSuccess<TResponse>;
|
|
35
36
|
error: null;
|
|
36
37
|
isError: false;
|
|
37
|
-
isLoading: false;
|
|
38
38
|
isLoadingError: false;
|
|
39
39
|
isRefetchError: false;
|
|
40
40
|
isSuccess: true;
|
|
@@ -60,10 +60,10 @@ export declare const useDeleteRequest: <TResponse>(deleteOptions?: DefaultReques
|
|
|
60
60
|
cached?: boolean | undefined;
|
|
61
61
|
}) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
|
|
62
62
|
} | {
|
|
63
|
+
isLoading: boolean;
|
|
63
64
|
data: undefined;
|
|
64
65
|
error: any;
|
|
65
66
|
isError: true;
|
|
66
|
-
isLoading: false;
|
|
67
67
|
isLoadingError: true;
|
|
68
68
|
isRefetchError: false;
|
|
69
69
|
isSuccess: false;
|
|
@@ -89,10 +89,10 @@ export declare const useDeleteRequest: <TResponse>(deleteOptions?: DefaultReques
|
|
|
89
89
|
cached?: boolean | undefined;
|
|
90
90
|
}) | undefined) => Promise<IRequestSuccess<TResponse> | undefined>;
|
|
91
91
|
} | {
|
|
92
|
+
isLoading: boolean;
|
|
92
93
|
data: undefined;
|
|
93
94
|
error: null;
|
|
94
95
|
isError: false;
|
|
95
|
-
isLoading: true;
|
|
96
96
|
isLoadingError: false;
|
|
97
97
|
isRefetchError: false;
|
|
98
98
|
isSuccess: false;
|
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
import { useQuery } from '@tanstack/react-query';
|
|
2
|
-
import { useState } from 'react';
|
|
2
|
+
import { useState, useEffect } from 'react';
|
|
3
3
|
import 'url-search-params-polyfill';
|
|
4
4
|
import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
|
|
5
5
|
import { useQueryConfig } from '../config/useQueryConfig.js';
|
|
6
6
|
import { useQueryHeaders } from '../config/useQueryHeaders.js';
|
|
7
7
|
import 'axios';
|
|
8
8
|
import { makeRequest } from '../request/make-request.js';
|
|
9
|
-
import '../request/request.enum.js';
|
|
9
|
+
import { HttpMethod } from '../request/request.enum.js';
|
|
10
|
+
import { usePauseFutureRequests } from '../stores/usePauseFutureRequests.js';
|
|
10
11
|
|
|
11
12
|
const useDeleteRequest = (deleteOptions) => {
|
|
12
13
|
const { baseUrl, headers } = deleteOptions ?? {};
|
|
13
14
|
const [requestPath, setRequestPath] = useState('');
|
|
14
15
|
const [options, setOptions] = useState();
|
|
15
16
|
const { options: queryConfigOptions } = useQueryConfig();
|
|
17
|
+
const [requestPayload, setRequestPayload] = useState();
|
|
18
|
+
const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
|
|
16
19
|
const { API_URL, TIMEOUT } = useEnvironmentVariables();
|
|
17
20
|
const { getHeaders } = useQueryHeaders();
|
|
18
21
|
const sendRequest = async (res, rej, queryKey) => {
|
|
@@ -24,6 +27,7 @@ const useDeleteRequest = (deleteOptions) => {
|
|
|
24
27
|
path: requestUrl,
|
|
25
28
|
headers: { ...globalHeaders, ...headers },
|
|
26
29
|
baseURL: baseUrl ?? API_URL,
|
|
30
|
+
method: HttpMethod.DELETE,
|
|
27
31
|
timeout: TIMEOUT,
|
|
28
32
|
};
|
|
29
33
|
let shouldContinue = true;
|
|
@@ -51,14 +55,27 @@ const useDeleteRequest = (deleteOptions) => {
|
|
|
51
55
|
return setOptions(fetchOptions);
|
|
52
56
|
};
|
|
53
57
|
const destroy = async (link, internalDeleteOptions) => {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
58
|
+
if (!isFutureQueriesPaused) {
|
|
59
|
+
// set enabled to be true for every delete
|
|
60
|
+
internalDeleteOptions = internalDeleteOptions ?? {};
|
|
61
|
+
internalDeleteOptions.enabled = true;
|
|
62
|
+
await setOptionsAsync(internalDeleteOptions);
|
|
63
|
+
await updatedPathAsync(link);
|
|
64
|
+
return query.data;
|
|
65
|
+
}
|
|
66
|
+
else {
|
|
67
|
+
setRequestPayload({ link, internalDeleteOptions });
|
|
68
|
+
return undefined;
|
|
69
|
+
}
|
|
60
70
|
};
|
|
61
|
-
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
if (!isFutureQueriesPaused && requestPayload) {
|
|
73
|
+
destroy(requestPayload.link, requestPayload.internalDeleteOptions);
|
|
74
|
+
setRequestPayload(undefined);
|
|
75
|
+
}
|
|
76
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
77
|
+
}, [isFutureQueriesPaused]);
|
|
78
|
+
return { destroy, ...query, isLoading: query.isLoading || isFutureQueriesPaused };
|
|
62
79
|
};
|
|
63
80
|
|
|
64
81
|
export { useDeleteRequest };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDeleteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useDeleteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -17,10 +17,10 @@ export declare const useGetInfiniteRequest: <TResponse extends Record<string, an
|
|
|
17
17
|
}> | undefined;
|
|
18
18
|
keyTracker?: string | undefined;
|
|
19
19
|
} & DefaultRequestOptions) => {
|
|
20
|
+
isLoading: boolean;
|
|
20
21
|
data: undefined;
|
|
21
22
|
error: any;
|
|
22
23
|
isError: true;
|
|
23
|
-
isLoading: false;
|
|
24
24
|
isLoadingError: true;
|
|
25
25
|
isRefetchError: false;
|
|
26
26
|
isSuccess: false;
|
|
@@ -58,10 +58,10 @@ export declare const useGetInfiniteRequest: <TResponse extends Record<string, an
|
|
|
58
58
|
pagination: Pagination;
|
|
59
59
|
}>> | undefined>;
|
|
60
60
|
} | {
|
|
61
|
+
isLoading: boolean;
|
|
61
62
|
data: undefined;
|
|
62
63
|
error: null;
|
|
63
64
|
isError: false;
|
|
64
|
-
isLoading: true;
|
|
65
65
|
isLoadingError: false;
|
|
66
66
|
isRefetchError: false;
|
|
67
67
|
isSuccess: false;
|
|
@@ -99,12 +99,12 @@ export declare const useGetInfiniteRequest: <TResponse extends Record<string, an
|
|
|
99
99
|
pagination: Pagination;
|
|
100
100
|
}>> | undefined>;
|
|
101
101
|
} | {
|
|
102
|
+
isLoading: boolean;
|
|
102
103
|
data: InfiniteData<IRequestSuccess<TResponse & {
|
|
103
104
|
pagination: Pagination;
|
|
104
105
|
}>>;
|
|
105
106
|
error: any;
|
|
106
107
|
isError: true;
|
|
107
|
-
isLoading: false;
|
|
108
108
|
isLoadingError: false;
|
|
109
109
|
isRefetchError: true;
|
|
110
110
|
isSuccess: false;
|
|
@@ -142,12 +142,12 @@ export declare const useGetInfiniteRequest: <TResponse extends Record<string, an
|
|
|
142
142
|
pagination: Pagination;
|
|
143
143
|
}>> | undefined>;
|
|
144
144
|
} | {
|
|
145
|
+
isLoading: boolean;
|
|
145
146
|
data: InfiniteData<IRequestSuccess<TResponse & {
|
|
146
147
|
pagination: Pagination;
|
|
147
148
|
}>>;
|
|
148
149
|
error: null;
|
|
149
150
|
isError: false;
|
|
150
|
-
isLoading: false;
|
|
151
151
|
isLoadingError: false;
|
|
152
152
|
isRefetchError: false;
|
|
153
153
|
isSuccess: true;
|
|
@@ -7,6 +7,7 @@ import { useQueryHeaders } from '../config/useQueryHeaders.js';
|
|
|
7
7
|
import 'axios';
|
|
8
8
|
import { makeRequest } from '../request/make-request.js';
|
|
9
9
|
import '../request/request.enum.js';
|
|
10
|
+
import { usePauseFutureRequests } from '../stores/usePauseFutureRequests.js';
|
|
10
11
|
|
|
11
12
|
const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
|
|
12
13
|
const { API_URL, TIMEOUT } = useEnvironmentVariables();
|
|
@@ -14,6 +15,8 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
|
|
|
14
15
|
const [requestPath, setRequestPath] = useState(path);
|
|
15
16
|
const [options, setOptions] = useState(queryOptions);
|
|
16
17
|
const { options: queryConfigOptions } = useQueryConfig();
|
|
18
|
+
const [requestPayload, setRequestPayload] = useState();
|
|
19
|
+
const isFutureQueriesPaused = usePauseFutureRequests((state) => state.isFutureQueriesPaused);
|
|
17
20
|
let queryClient = useQueryClient();
|
|
18
21
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
19
22
|
queryClient = useMemo(() => queryClient, []);
|
|
@@ -60,7 +63,7 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
|
|
|
60
63
|
return pathname + '?' + queryParams.toString();
|
|
61
64
|
};
|
|
62
65
|
const query = useInfiniteQuery([requestPath, {}], ({ pageParam = requestPath, queryKey }) => new Promise((res, rej) => sendRequest(res, rej, queryKey, pageParam)), {
|
|
63
|
-
enabled: load,
|
|
66
|
+
enabled: load && !isFutureQueriesPaused,
|
|
64
67
|
getNextPageParam: (lastPage) => constructPaginationLink('next_page', lastPage),
|
|
65
68
|
getPreviousPageParam: (lastPage) => constructPaginationLink('previous_page', lastPage),
|
|
66
69
|
...options,
|
|
@@ -71,10 +74,23 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
|
|
|
71
74
|
});
|
|
72
75
|
};
|
|
73
76
|
const get = async (link, fetchOptions) => {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
+
if (!isFutureQueriesPaused) {
|
|
78
|
+
await setOptionsAsync(fetchOptions);
|
|
79
|
+
await updatedPathAsync(link);
|
|
80
|
+
return query.data;
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
setRequestPayload({ link, fetchOptions });
|
|
84
|
+
return undefined;
|
|
85
|
+
}
|
|
77
86
|
};
|
|
87
|
+
useEffect(() => {
|
|
88
|
+
if (!isFutureQueriesPaused && requestPayload) {
|
|
89
|
+
get(requestPayload.link, requestPayload.fetchOptions);
|
|
90
|
+
setRequestPayload(undefined);
|
|
91
|
+
}
|
|
92
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
93
|
+
}, [isFutureQueriesPaused]);
|
|
78
94
|
const updatedPathAsync = async (link) => {
|
|
79
95
|
startTransition(() => {
|
|
80
96
|
setRequestPath(link);
|
|
@@ -93,6 +109,7 @@ const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, b
|
|
|
93
109
|
return {
|
|
94
110
|
get,
|
|
95
111
|
...query,
|
|
112
|
+
isLoading: query.isLoading || isFutureQueriesPaused,
|
|
96
113
|
};
|
|
97
114
|
};
|
|
98
115
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGetInfiniteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useGetInfiniteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -8,6 +8,7 @@ export declare const useGetRequest: <TResponse extends Record<string, any>>({ pa
|
|
|
8
8
|
queryOptions?: TanstackQueryOption<TResponse> | undefined;
|
|
9
9
|
keyTracker?: string | undefined;
|
|
10
10
|
} & DefaultRequestOptions) => {
|
|
11
|
+
isLoading: boolean;
|
|
11
12
|
setRequestPath: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
12
13
|
nextPage: () => void;
|
|
13
14
|
prevPage: () => void;
|
|
@@ -18,7 +19,6 @@ export declare const useGetRequest: <TResponse extends Record<string, any>>({ pa
|
|
|
18
19
|
data: IRequestSuccess<TResponse>;
|
|
19
20
|
error: any;
|
|
20
21
|
isError: true;
|
|
21
|
-
isLoading: false;
|
|
22
22
|
isLoadingError: false;
|
|
23
23
|
isRefetchError: true;
|
|
24
24
|
isSuccess: false;
|
|
@@ -41,6 +41,7 @@ export declare const useGetRequest: <TResponse extends Record<string, any>>({ pa
|
|
|
41
41
|
remove: () => void;
|
|
42
42
|
fetchStatus: import("@tanstack/react-query").FetchStatus;
|
|
43
43
|
} | {
|
|
44
|
+
isLoading: boolean;
|
|
44
45
|
setRequestPath: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
45
46
|
nextPage: () => void;
|
|
46
47
|
prevPage: () => void;
|
|
@@ -51,7 +52,6 @@ export declare const useGetRequest: <TResponse extends Record<string, any>>({ pa
|
|
|
51
52
|
data: IRequestSuccess<TResponse>;
|
|
52
53
|
error: null;
|
|
53
54
|
isError: false;
|
|
54
|
-
isLoading: false;
|
|
55
55
|
isLoadingError: false;
|
|
56
56
|
isRefetchError: false;
|
|
57
57
|
isSuccess: true;
|
|
@@ -74,6 +74,7 @@ export declare const useGetRequest: <TResponse extends Record<string, any>>({ pa
|
|
|
74
74
|
remove: () => void;
|
|
75
75
|
fetchStatus: import("@tanstack/react-query").FetchStatus;
|
|
76
76
|
} | {
|
|
77
|
+
isLoading: boolean;
|
|
77
78
|
setRequestPath: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
78
79
|
nextPage: () => void;
|
|
79
80
|
prevPage: () => void;
|
|
@@ -84,7 +85,6 @@ export declare const useGetRequest: <TResponse extends Record<string, any>>({ pa
|
|
|
84
85
|
data: undefined;
|
|
85
86
|
error: any;
|
|
86
87
|
isError: true;
|
|
87
|
-
isLoading: false;
|
|
88
88
|
isLoadingError: true;
|
|
89
89
|
isRefetchError: false;
|
|
90
90
|
isSuccess: false;
|
|
@@ -107,6 +107,7 @@ export declare const useGetRequest: <TResponse extends Record<string, any>>({ pa
|
|
|
107
107
|
remove: () => void;
|
|
108
108
|
fetchStatus: import("@tanstack/react-query").FetchStatus;
|
|
109
109
|
} | {
|
|
110
|
+
isLoading: boolean;
|
|
110
111
|
setRequestPath: import("react").Dispatch<import("react").SetStateAction<string>>;
|
|
111
112
|
nextPage: () => void;
|
|
112
113
|
prevPage: () => void;
|
|
@@ -117,7 +118,6 @@ export declare const useGetRequest: <TResponse extends Record<string, any>>({ pa
|
|
|
117
118
|
data: undefined;
|
|
118
119
|
error: null;
|
|
119
120
|
isError: false;
|
|
120
|
-
isLoading: true;
|
|
121
121
|
isLoadingError: false;
|
|
122
122
|
isRefetchError: false;
|
|
123
123
|
isSuccess: false;
|