@ventlio/tanstack-query 0.3.2 → 0.3.4
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/useQueryHeaders.js +4 -14
- package/dist/config/useQueryHeaders.js.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +27 -29
- package/dist/index.mjs.map +1 -1
- package/dist/model/useQueryModel.js +2 -0
- package/dist/model/useQueryModel.js.map +1 -1
- package/dist/queries/useDeleteRequest.js +3 -1
- package/dist/queries/useDeleteRequest.js.map +1 -1
- package/dist/queries/useGetInfiniteRequest.js +1 -0
- package/dist/queries/useGetInfiniteRequest.js.map +1 -1
- package/dist/queries/useGetRequest.js +1 -0
- package/dist/queries/useGetRequest.js.map +1 -1
- package/dist/queries/usePatchRequest.js +1 -0
- package/dist/queries/usePatchRequest.js.map +1 -1
- package/dist/queries/usePostRequest.js +1 -0
- package/dist/queries/usePostRequest.js.map +1 -1
- package/dist/stores/index.d.ts +1 -0
- package/dist/stores/useHeaderStore.d.ts +7 -0
- package/dist/stores/useHeaderStore.js +11 -0
- package/dist/stores/useHeaderStore.js.map +1 -0
- package/dist/types/index.d.ts +3 -3
- package/package.json +3 -2
- package/src/__tests__/queries/usePostRequest.spec.tsx +84 -0
- package/src/config/useQueryHeaders.ts +6 -18
- package/src/queries/useDeleteRequest.ts +3 -2
- package/src/queries/useGetInfiniteRequest.ts +1 -1
- package/src/queries/useGetRequest.ts +1 -1
- package/src/queries/usePatchRequest.ts +1 -1
- package/src/queries/usePostRequest.ts +1 -1
- package/src/stores/index.ts +1 -0
- package/src/stores/useHeaderStore.ts +13 -0
- package/src/types/index.ts +4 -3
- package/src/__tests__/queries/usePostRequest.spec.ts +0 -77
|
@@ -1,23 +1,13 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import
|
|
1
|
+
import { useHeaderStore } from '../stores/useHeaderStore.js';
|
|
2
|
+
import '../stores/usePauseFutureRequests.js';
|
|
3
3
|
|
|
4
4
|
const useQueryHeaders = () => {
|
|
5
|
-
const
|
|
6
|
-
const { headers, options } = useQueryConfig();
|
|
5
|
+
const { headers, setHeader } = useHeaderStore();
|
|
7
6
|
const getHeaders = () => {
|
|
8
7
|
return headers;
|
|
9
8
|
};
|
|
10
9
|
const setQueryHeaders = (newHeaders) => {
|
|
11
|
-
|
|
12
|
-
headers: { ...headers, ...newHeaders },
|
|
13
|
-
options,
|
|
14
|
-
};
|
|
15
|
-
queryClient.setDefaultOptions({
|
|
16
|
-
queries: {
|
|
17
|
-
meta: defaultMeta,
|
|
18
|
-
},
|
|
19
|
-
mutations: { meta: defaultMeta },
|
|
20
|
-
});
|
|
10
|
+
setHeader(newHeaders);
|
|
21
11
|
};
|
|
22
12
|
return { setQueryHeaders, getHeaders };
|
|
23
13
|
};
|
|
@@ -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.js
CHANGED
|
@@ -19,5 +19,6 @@ export { buildFormData } from './request/buildFormData.js';
|
|
|
19
19
|
export { makeRequest } from './request/make-request.js';
|
|
20
20
|
export { ContentType, HttpMethod } from './request/request.enum.js';
|
|
21
21
|
export { errorTransformer, successTransformer } from './request/transformer.js';
|
|
22
|
+
export { useHeaderStore } from './stores/useHeaderStore.js';
|
|
22
23
|
export { usePauseFutureRequests } from './stores/usePauseFutureRequests.js';
|
|
23
24
|
//# 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,10 +1,10 @@
|
|
|
1
1
|
import 'url-search-params-polyfill';
|
|
2
2
|
import { useQueryClient, useQuery, useInfiniteQuery, useMutation } from '@tanstack/react-query';
|
|
3
|
+
import { create } from 'zustand';
|
|
3
4
|
import { useState, useEffect, useMemo, startTransition } from 'react';
|
|
4
5
|
import result from 'lodash.result';
|
|
5
6
|
import lodashSet from 'lodash.set';
|
|
6
7
|
import axios from 'axios';
|
|
7
|
-
import { create } from 'zustand';
|
|
8
8
|
|
|
9
9
|
const bootstrapQueryRequest = (queryClient, options) => {
|
|
10
10
|
// make query config doesn't expire
|
|
@@ -48,23 +48,35 @@ const useEnvironmentVariables = () => {
|
|
|
48
48
|
};
|
|
49
49
|
};
|
|
50
50
|
|
|
51
|
+
const useHeaderStore = create((set) => ({
|
|
52
|
+
headers: undefined,
|
|
53
|
+
setHeader(headers) {
|
|
54
|
+
set({ headers });
|
|
55
|
+
},
|
|
56
|
+
}));
|
|
57
|
+
|
|
58
|
+
const usePauseFutureRequests = create((set) => {
|
|
59
|
+
const pauseFutureQueries = (status) => {
|
|
60
|
+
return set({ isFutureQueriesPaused: status });
|
|
61
|
+
};
|
|
62
|
+
const pauseFutureMutation = (status) => {
|
|
63
|
+
return set({ isFutureQueriesPaused: status });
|
|
64
|
+
};
|
|
65
|
+
return {
|
|
66
|
+
isFutureMutationsPaused: false,
|
|
67
|
+
isFutureQueriesPaused: false,
|
|
68
|
+
pauseFutureQueries,
|
|
69
|
+
pauseFutureMutation,
|
|
70
|
+
};
|
|
71
|
+
});
|
|
72
|
+
|
|
51
73
|
const useQueryHeaders = () => {
|
|
52
|
-
const
|
|
53
|
-
const { headers, options } = useQueryConfig();
|
|
74
|
+
const { headers, setHeader } = useHeaderStore();
|
|
54
75
|
const getHeaders = () => {
|
|
55
76
|
return headers;
|
|
56
77
|
};
|
|
57
78
|
const setQueryHeaders = (newHeaders) => {
|
|
58
|
-
|
|
59
|
-
headers: { ...headers, ...newHeaders },
|
|
60
|
-
options,
|
|
61
|
-
};
|
|
62
|
-
queryClient.setDefaultOptions({
|
|
63
|
-
queries: {
|
|
64
|
-
meta: defaultMeta,
|
|
65
|
-
},
|
|
66
|
-
mutations: { meta: defaultMeta },
|
|
67
|
-
});
|
|
79
|
+
setHeader(newHeaders);
|
|
68
80
|
};
|
|
69
81
|
return { setQueryHeaders, getHeaders };
|
|
70
82
|
};
|
|
@@ -402,21 +414,6 @@ function getAppFiles(body, fileSelectors = []) {
|
|
|
402
414
|
return files;
|
|
403
415
|
}
|
|
404
416
|
|
|
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
|
-
|
|
420
417
|
const useDeleteRequest = (deleteOptions) => {
|
|
421
418
|
const { baseUrl, headers } = deleteOptions ?? {};
|
|
422
419
|
const [requestPath, setRequestPath] = useState('');
|
|
@@ -435,6 +432,7 @@ const useDeleteRequest = (deleteOptions) => {
|
|
|
435
432
|
path: requestUrl,
|
|
436
433
|
headers: { ...globalHeaders, ...headers },
|
|
437
434
|
baseURL: baseUrl ?? API_URL,
|
|
435
|
+
method: HttpMethod.DELETE,
|
|
438
436
|
timeout: TIMEOUT,
|
|
439
437
|
};
|
|
440
438
|
let shouldContinue = true;
|
|
@@ -875,5 +873,5 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
|
|
|
875
873
|
return { post, uploadProgressPercent, ...mutation, isLoading: mutation.isLoading || isFutureMutationsPaused };
|
|
876
874
|
};
|
|
877
875
|
|
|
878
|
-
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 };
|
|
876
|
+
export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, getDateInFuture, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetInfiniteRequest, useGetRequest, useHeaderStore, useKeyTrackerModel, usePatchRequest, usePauseFutureRequests, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery, useUploadProgress };
|
|
879
877
|
//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,6 +3,8 @@ import result from 'lodash.result';
|
|
|
3
3
|
import lodashSet from 'lodash.set';
|
|
4
4
|
import 'url-search-params-polyfill';
|
|
5
5
|
import { useQueryConfig } from '../config/useQueryConfig.js';
|
|
6
|
+
import '../stores/useHeaderStore.js';
|
|
7
|
+
import '../stores/usePauseFutureRequests.js';
|
|
6
8
|
import { useKeyTrackerModel } from './useKeyTrackerModel.js';
|
|
7
9
|
|
|
8
10
|
const useQueryModel = (keyTracker, exact = true) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useQueryModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useQueryModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -6,7 +6,8 @@ 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 '../stores/useHeaderStore.js';
|
|
10
11
|
import { usePauseFutureRequests } from '../stores/usePauseFutureRequests.js';
|
|
11
12
|
|
|
12
13
|
const useDeleteRequest = (deleteOptions) => {
|
|
@@ -27,6 +28,7 @@ const useDeleteRequest = (deleteOptions) => {
|
|
|
27
28
|
path: requestUrl,
|
|
28
29
|
headers: { ...globalHeaders, ...headers },
|
|
29
30
|
baseURL: baseUrl ?? API_URL,
|
|
31
|
+
method: HttpMethod.DELETE,
|
|
30
32
|
timeout: TIMEOUT,
|
|
31
33
|
};
|
|
32
34
|
let shouldContinue = true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDeleteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useDeleteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -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 '../stores/useHeaderStore.js';
|
|
10
11
|
import { usePauseFutureRequests } from '../stores/usePauseFutureRequests.js';
|
|
11
12
|
|
|
12
13
|
const useGetInfiniteRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGetInfiniteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useGetInfiniteRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -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 '../stores/useHeaderStore.js';
|
|
10
11
|
import { usePauseFutureRequests } from '../stores/usePauseFutureRequests.js';
|
|
11
12
|
|
|
12
13
|
const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -9,6 +9,7 @@ import { useUploadProgress } from '../hooks/useUploadProgress.js';
|
|
|
9
9
|
import 'axios';
|
|
10
10
|
import { makeRequest } from '../request/make-request.js';
|
|
11
11
|
import { HttpMethod } from '../request/request.enum.js';
|
|
12
|
+
import '../stores/useHeaderStore.js';
|
|
12
13
|
import { usePauseFutureRequests } from '../stores/usePauseFutureRequests.js';
|
|
13
14
|
|
|
14
15
|
const usePatchRequest = ({ path, baseUrl, headers }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePatchRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"usePatchRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -10,6 +10,7 @@ import { useUploadProgress } from '../hooks/useUploadProgress.js';
|
|
|
10
10
|
import 'axios';
|
|
11
11
|
import { makeRequest } from '../request/make-request.js';
|
|
12
12
|
import { HttpMethod } from '../request/request.enum.js';
|
|
13
|
+
import '../stores/useHeaderStore.js';
|
|
13
14
|
import { usePauseFutureRequests } from '../stores/usePauseFutureRequests.js';
|
|
14
15
|
|
|
15
16
|
const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelectors, }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePostRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"usePostRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/stores/index.d.ts
CHANGED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { QueryHeaders } from '../types';
|
|
2
|
+
interface IUserHeaders {
|
|
3
|
+
headers: QueryHeaders | undefined;
|
|
4
|
+
setHeader: (headers: QueryHeaders) => void;
|
|
5
|
+
}
|
|
6
|
+
export declare const useHeaderStore: import("zustand").UseBoundStore<import("zustand").StoreApi<IUserHeaders>>;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useHeaderStore.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -20,10 +20,10 @@ export interface BootstrapModelConfig {
|
|
|
20
20
|
}
|
|
21
21
|
export type ContextType = 'app' | 'web' | 'electronjs';
|
|
22
22
|
export interface TanstackQueryConfig {
|
|
23
|
-
headers: RawAxiosRequestHeaders;
|
|
24
23
|
options?: BootstrapConfig;
|
|
25
24
|
}
|
|
26
25
|
export interface IUseQueryHeaders {
|
|
27
|
-
getHeaders: () =>
|
|
28
|
-
setQueryHeaders: (header:
|
|
26
|
+
getHeaders: () => QueryHeaders;
|
|
27
|
+
setQueryHeaders: (header: QueryHeaders) => void;
|
|
29
28
|
}
|
|
29
|
+
export type QueryHeaders = RawAxiosRequestHeaders | undefined;
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ventlio/tanstack-query",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"contributors": [
|
|
7
7
|
{
|
|
8
|
-
"email": "
|
|
8
|
+
"email": "stancoproof@gmail.com",
|
|
9
9
|
"name": "stancobridge",
|
|
10
10
|
"url": "https://github.com/stancobridge"
|
|
11
11
|
}
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
49
49
|
"@rollup/plugin-typescript": "^11.0.0",
|
|
50
50
|
"@tanstack/react-query": "^4.26.1",
|
|
51
|
+
"@testing-library/react": "^13.1",
|
|
51
52
|
"@testing-library/react-hooks": "^8.0.1",
|
|
52
53
|
"@types/axios": "^0.14.0",
|
|
53
54
|
"@types/jest": "^29.5.1",
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
2
|
+
import { renderHook } from '@testing-library/react';
|
|
3
|
+
import axios from 'axios';
|
|
4
|
+
import MockAdapter from 'axios-mock-adapter';
|
|
5
|
+
import type { ReactNode } from 'react';
|
|
6
|
+
import React from 'react';
|
|
7
|
+
import { useGetRequest } from '../../queries';
|
|
8
|
+
|
|
9
|
+
const mockAxios = new MockAdapter(axios);
|
|
10
|
+
|
|
11
|
+
describe('usePostRequest', () => {
|
|
12
|
+
const path = '/test';
|
|
13
|
+
const postData = { name: 'John Doe' };
|
|
14
|
+
const response = { id: 123, name: 'John Doe' };
|
|
15
|
+
|
|
16
|
+
const wrapper = ({ children }: { children: ReactNode }) => (
|
|
17
|
+
<QueryClientProvider client={new QueryClient()}>{children}</QueryClientProvider>
|
|
18
|
+
);
|
|
19
|
+
beforeEach(() => {
|
|
20
|
+
mockAxios.reset();
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
it('should return post function and mutation object', () => {
|
|
24
|
+
const { result } = renderHook(() => useGetRequest<{ id: number; name: string }>({ path, load: false }), {
|
|
25
|
+
wrapper,
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
expect(result.current.isLoading).toBe(false);
|
|
29
|
+
expect(result.current.isSuccess).toBe(false);
|
|
30
|
+
expect(result.current.isError).toBe(false);
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
// it('should make post request and return response data', async () => {
|
|
34
|
+
// mockAxios.onPost(path).reply(200, response);
|
|
35
|
+
|
|
36
|
+
// const { result, waitForNextUpdate } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
|
|
37
|
+
|
|
38
|
+
// const responsePromise = result.current.post(postData);
|
|
39
|
+
|
|
40
|
+
// expect(result.current.isLoading).toBe(true);
|
|
41
|
+
|
|
42
|
+
// await waitForNextUpdate();
|
|
43
|
+
|
|
44
|
+
// expect(result.current.isLoading).toBe(false);
|
|
45
|
+
// expect(result.current.isSuccess).toBe(true);
|
|
46
|
+
// expect(result.current.data).toEqual(response);
|
|
47
|
+
// expect(await responsePromise).toEqual(response);
|
|
48
|
+
// });
|
|
49
|
+
|
|
50
|
+
// it('should make post request and return error', async () => {
|
|
51
|
+
// const errorMessage = 'Request failed with status code 500';
|
|
52
|
+
// mockAxios.onPost(path).reply(500, { message: errorMessage });
|
|
53
|
+
|
|
54
|
+
// const { result, waitForNextUpdate } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
|
|
55
|
+
|
|
56
|
+
// const responsePromise = result.current.post(postData);
|
|
57
|
+
|
|
58
|
+
// expect(result.current.isLoading).toBe(true);
|
|
59
|
+
|
|
60
|
+
// await waitForNextUpdate();
|
|
61
|
+
|
|
62
|
+
// expect(result.current.isLoading).toBe(false);
|
|
63
|
+
// expect(result.current.isError).toBe(true);
|
|
64
|
+
// expect(result.current.error?.message).toBe(errorMessage);
|
|
65
|
+
|
|
66
|
+
// await expect(responsePromise).rejects.toEqual({
|
|
67
|
+
// message: errorMessage,
|
|
68
|
+
// });
|
|
69
|
+
// });
|
|
70
|
+
|
|
71
|
+
// it('should make post request with FormData', async () => {
|
|
72
|
+
// const formData = new FormData();
|
|
73
|
+
// formData.append('name', 'John Doe');
|
|
74
|
+
// mockAxios.onPost(path).reply(200, response);
|
|
75
|
+
|
|
76
|
+
// const { result } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path, isFormData: true }));
|
|
77
|
+
|
|
78
|
+
// const responsePromise = result.current.post(formData);
|
|
79
|
+
|
|
80
|
+
// expect(result.current.isLoading).toBe(true);
|
|
81
|
+
|
|
82
|
+
// await expect(responsePromise).resolves.toEqual(response);
|
|
83
|
+
// });
|
|
84
|
+
});
|
|
@@ -1,27 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import type { IUseQueryHeaders,
|
|
3
|
-
import { useQueryConfig } from './useQueryConfig';
|
|
1
|
+
import { useHeaderStore } from '../stores';
|
|
2
|
+
import type { IUseQueryHeaders, QueryHeaders } from '../types';
|
|
4
3
|
|
|
5
4
|
export const useQueryHeaders = (): IUseQueryHeaders => {
|
|
6
|
-
const
|
|
7
|
-
const { headers, options } = useQueryConfig();
|
|
5
|
+
const { headers, setHeader } = useHeaderStore();
|
|
8
6
|
|
|
9
|
-
const getHeaders = ():
|
|
7
|
+
const getHeaders = (): QueryHeaders => {
|
|
10
8
|
return headers;
|
|
11
9
|
};
|
|
12
10
|
|
|
13
|
-
const setQueryHeaders = (newHeaders:
|
|
14
|
-
|
|
15
|
-
headers: { ...headers, ...newHeaders },
|
|
16
|
-
options,
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
queryClient.setDefaultOptions({
|
|
20
|
-
queries: {
|
|
21
|
-
meta: defaultMeta,
|
|
22
|
-
},
|
|
23
|
-
mutations: { meta: defaultMeta },
|
|
24
|
-
});
|
|
11
|
+
const setQueryHeaders = (newHeaders: QueryHeaders) => {
|
|
12
|
+
setHeader(newHeaders);
|
|
25
13
|
};
|
|
26
14
|
|
|
27
15
|
return { setQueryHeaders, getHeaders };
|
|
@@ -4,7 +4,7 @@ import type { RawAxiosRequestHeaders } from 'axios';
|
|
|
4
4
|
import { useEffect, useState } from 'react';
|
|
5
5
|
import { useEnvironmentVariables, useQueryConfig, useQueryHeaders } from '../config';
|
|
6
6
|
import type { IRequestError, IRequestSuccess } from '../request';
|
|
7
|
-
import { makeRequest } from '../request';
|
|
7
|
+
import { HttpMethod, makeRequest } from '../request';
|
|
8
8
|
import { usePauseFutureRequests } from '../stores';
|
|
9
9
|
import type { DefaultRequestOptions } from './queries.interface';
|
|
10
10
|
|
|
@@ -24,7 +24,7 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
|
|
|
24
24
|
|
|
25
25
|
const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, queryKey: QueryKey) => {
|
|
26
26
|
// get request headers
|
|
27
|
-
const globalHeaders: RawAxiosRequestHeaders = getHeaders();
|
|
27
|
+
const globalHeaders: RawAxiosRequestHeaders | undefined = getHeaders();
|
|
28
28
|
|
|
29
29
|
const [url] = queryKey;
|
|
30
30
|
const requestUrl = (url ?? requestPath) as string;
|
|
@@ -33,6 +33,7 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
|
|
|
33
33
|
path: requestUrl,
|
|
34
34
|
headers: { ...globalHeaders, ...headers },
|
|
35
35
|
baseURL: baseUrl ?? API_URL,
|
|
36
|
+
method: HttpMethod.DELETE,
|
|
36
37
|
timeout: TIMEOUT,
|
|
37
38
|
};
|
|
38
39
|
|
|
@@ -59,7 +59,7 @@ export const useGetInfiniteRequest = <TResponse extends Record<string, any>>({
|
|
|
59
59
|
) => {
|
|
60
60
|
if (load) {
|
|
61
61
|
// get request headers
|
|
62
|
-
const globalHeaders: RawAxiosRequestHeaders = getHeaders();
|
|
62
|
+
const globalHeaders: RawAxiosRequestHeaders | undefined = getHeaders();
|
|
63
63
|
|
|
64
64
|
const requestOptions = {
|
|
65
65
|
path: pageParam ?? requestPath,
|
|
@@ -47,7 +47,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
|
|
|
47
47
|
) => {
|
|
48
48
|
if (load) {
|
|
49
49
|
// get request headers
|
|
50
|
-
const globalHeaders: RawAxiosRequestHeaders = getHeaders();
|
|
50
|
+
const globalHeaders: RawAxiosRequestHeaders | undefined = getHeaders();
|
|
51
51
|
|
|
52
52
|
const [url] = queryKey;
|
|
53
53
|
const requestUrl = (url ?? requestPath) as string;
|
|
@@ -24,7 +24,7 @@ export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: s
|
|
|
24
24
|
|
|
25
25
|
const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, data: any) => {
|
|
26
26
|
// get request headers
|
|
27
|
-
const globalHeaders: RawAxiosRequestHeaders = getHeaders();
|
|
27
|
+
const globalHeaders: RawAxiosRequestHeaders | undefined = getHeaders();
|
|
28
28
|
|
|
29
29
|
const requestOptions = {
|
|
30
30
|
path: path,
|
|
@@ -39,7 +39,7 @@ export const usePostRequest = <TResponse>({
|
|
|
39
39
|
postData: { data: any; requestConfig?: Partial<IMakeRequest> }
|
|
40
40
|
) => {
|
|
41
41
|
// get request headers
|
|
42
|
-
const globalHeaders: RawAxiosRequestHeaders = getHeaders();
|
|
42
|
+
const globalHeaders: RawAxiosRequestHeaders | undefined = getHeaders();
|
|
43
43
|
|
|
44
44
|
const { data, requestConfig } = postData;
|
|
45
45
|
|
package/src/stores/index.ts
CHANGED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { create } from 'zustand';
|
|
2
|
+
import type { QueryHeaders } from '../types';
|
|
3
|
+
|
|
4
|
+
interface IUserHeaders {
|
|
5
|
+
headers: QueryHeaders | undefined;
|
|
6
|
+
setHeader: (headers: QueryHeaders) => void;
|
|
7
|
+
}
|
|
8
|
+
export const useHeaderStore = create<IUserHeaders>((set) => ({
|
|
9
|
+
headers: undefined,
|
|
10
|
+
setHeader(headers) {
|
|
11
|
+
set({ headers });
|
|
12
|
+
},
|
|
13
|
+
}));
|
package/src/types/index.ts
CHANGED
|
@@ -19,11 +19,12 @@ export interface BootstrapModelConfig {
|
|
|
19
19
|
|
|
20
20
|
export type ContextType = 'app' | 'web' | 'electronjs';
|
|
21
21
|
export interface TanstackQueryConfig {
|
|
22
|
-
headers: RawAxiosRequestHeaders;
|
|
23
22
|
options?: BootstrapConfig;
|
|
24
23
|
}
|
|
25
24
|
|
|
26
25
|
export interface IUseQueryHeaders {
|
|
27
|
-
getHeaders: () =>
|
|
28
|
-
setQueryHeaders: (header:
|
|
26
|
+
getHeaders: () => QueryHeaders;
|
|
27
|
+
setQueryHeaders: (header: QueryHeaders) => void;
|
|
29
28
|
}
|
|
29
|
+
|
|
30
|
+
export type QueryHeaders = RawAxiosRequestHeaders | undefined;
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { renderHook } from '@testing-library/react-hooks';
|
|
2
|
-
import axios from 'axios';
|
|
3
|
-
import MockAdapter from 'axios-mock-adapter';
|
|
4
|
-
import { usePostRequest } from '../../queries';
|
|
5
|
-
|
|
6
|
-
const mockAxios = new MockAdapter(axios);
|
|
7
|
-
|
|
8
|
-
describe('usePostRequest', () => {
|
|
9
|
-
const path = '/test';
|
|
10
|
-
const postData = { name: 'John Doe' };
|
|
11
|
-
const response = { id: 123, name: 'John Doe' };
|
|
12
|
-
|
|
13
|
-
beforeEach(() => {
|
|
14
|
-
mockAxios.reset();
|
|
15
|
-
});
|
|
16
|
-
|
|
17
|
-
it('should return post function and mutation object', () => {
|
|
18
|
-
const { result } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
|
|
19
|
-
|
|
20
|
-
expect(result.current.post).toBeInstanceOf(Function);
|
|
21
|
-
expect(result.current.isLoading).toBe(false);
|
|
22
|
-
expect(result.current.isSuccess).toBe(false);
|
|
23
|
-
expect(result.current.isError).toBe(false);
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
it('should make post request and return response data', async () => {
|
|
27
|
-
mockAxios.onPost(path).reply(200, response);
|
|
28
|
-
|
|
29
|
-
const { result, waitForNextUpdate } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
|
|
30
|
-
|
|
31
|
-
const responsePromise = result.current.post(postData);
|
|
32
|
-
|
|
33
|
-
expect(result.current.isLoading).toBe(true);
|
|
34
|
-
|
|
35
|
-
await waitForNextUpdate();
|
|
36
|
-
|
|
37
|
-
expect(result.current.isLoading).toBe(false);
|
|
38
|
-
expect(result.current.isSuccess).toBe(true);
|
|
39
|
-
expect(result.current.data).toEqual(response);
|
|
40
|
-
expect(await responsePromise).toEqual(response);
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
it('should make post request and return error', async () => {
|
|
44
|
-
const errorMessage = 'Request failed with status code 500';
|
|
45
|
-
mockAxios.onPost(path).reply(500, { message: errorMessage });
|
|
46
|
-
|
|
47
|
-
const { result, waitForNextUpdate } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
|
|
48
|
-
|
|
49
|
-
const responsePromise = result.current.post(postData);
|
|
50
|
-
|
|
51
|
-
expect(result.current.isLoading).toBe(true);
|
|
52
|
-
|
|
53
|
-
await waitForNextUpdate();
|
|
54
|
-
|
|
55
|
-
expect(result.current.isLoading).toBe(false);
|
|
56
|
-
expect(result.current.isError).toBe(true);
|
|
57
|
-
expect(result.current.error?.message).toBe(errorMessage);
|
|
58
|
-
|
|
59
|
-
await expect(responsePromise).rejects.toEqual({
|
|
60
|
-
message: errorMessage,
|
|
61
|
-
});
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
it('should make post request with FormData', async () => {
|
|
65
|
-
const formData = new FormData();
|
|
66
|
-
formData.append('name', 'John Doe');
|
|
67
|
-
mockAxios.onPost(path).reply(200, response);
|
|
68
|
-
|
|
69
|
-
const { result } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path, isFormData: true }));
|
|
70
|
-
|
|
71
|
-
const responsePromise = result.current.post(formData);
|
|
72
|
-
|
|
73
|
-
expect(result.current.isLoading).toBe(true);
|
|
74
|
-
|
|
75
|
-
await expect(responsePromise).resolves.toEqual(response);
|
|
76
|
-
});
|
|
77
|
-
});
|