@ventlio/tanstack-query 0.2.53 → 0.2.55
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/bootstrapQueryRequest.d.ts +2 -1
- package/dist/config/bootstrapQueryRequest.js +2 -1
- package/dist/config/bootstrapQueryRequest.js.map +1 -1
- package/dist/config/index.d.ts +1 -0
- package/dist/config/useEnvironmentVariables.js +5 -2
- package/dist/config/useEnvironmentVariables.js.map +1 -1
- package/dist/config/useReactNativeEnv.d.ts +4 -0
- package/dist/config/useReactNativeEnv.js +25 -0
- package/dist/config/useReactNativeEnv.js.map +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +30 -14
- package/dist/index.mjs.map +1 -1
- package/dist/model/useKeyTrackerModel.js +1 -3
- package/dist/model/useKeyTrackerModel.js.map +1 -1
- package/dist/queries/useGetRequest.js +2 -4
- package/dist/queries/useGetRequest.js.map +1 -1
- package/dist/queries/usePatchRequest.d.ts +1 -1
- package/dist/queries/usePatchRequest.js +2 -1
- 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/request/axios-instance.d.ts +1 -1
- package/dist/request/axios-instance.js +1 -1
- package/dist/types/index.d.ts +4 -0
- package/package.json +5 -2
- package/src/__tests__/queries/usePostRequest.spec.ts +4 -12
- package/src/config/bootstrapQueryRequest.ts +3 -2
- package/src/config/index.ts +1 -0
- package/src/config/useEnvironmentVariables.ts +4 -3
- package/src/config/useQueryConfig.ts +1 -2
- package/src/config/useReactNativeEnv.ts +27 -0
- package/src/env.d.ts +4 -0
- package/src/model/useKeyTrackerModel.ts +1 -3
- package/src/model/useQueryModel.ts +1 -4
- package/src/queries/useDeleteRequest.ts +3 -11
- package/src/queries/useGetRequest.ts +6 -24
- package/src/queries/usePatchRequest.ts +4 -17
- package/src/queries/usePostRequest.ts +3 -12
- package/src/request/axios-instance.ts +1 -5
- package/src/request/transformer.ts +3 -12
- package/src/types/index.ts +5 -0
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
import type { QueryClient } from '@tanstack/react-query';
|
|
2
|
-
|
|
2
|
+
import type { BootstrapQueryRequest } from '../types';
|
|
3
|
+
export declare const bootstrapQueryRequest: (queryClient: QueryClient, options?: BootstrapQueryRequest) => void;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
const bootstrapQueryRequest = (queryClient) => {
|
|
3
|
+
const bootstrapQueryRequest = (queryClient, options) => {
|
|
4
4
|
// make query config doesn't expire
|
|
5
5
|
queryClient.setQueryDefaults(['config'], {
|
|
6
6
|
staleTime: Infinity,
|
|
@@ -11,6 +11,7 @@ const bootstrapQueryRequest = (queryClient) => {
|
|
|
11
11
|
headers: {
|
|
12
12
|
Authorization: ``,
|
|
13
13
|
},
|
|
14
|
+
options,
|
|
14
15
|
});
|
|
15
16
|
};
|
|
16
17
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bootstrapQueryRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"bootstrapQueryRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
|
package/dist/config/index.d.ts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var useReactNativeEnv = require('./useReactNativeEnv.js');
|
|
4
|
+
|
|
3
5
|
const useEnvironmentVariables = () => {
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
+
const { appTimeout, appUrl } = useReactNativeEnv.useReactNativeEnv();
|
|
7
|
+
const url = process.env.REACT_APP_API_URL || process.env.NEXT_PUBLIC_API_URL || appUrl;
|
|
8
|
+
const timeout = process.env.REACT_APP_API_TIMEOUT || process.env.NEXT_PUBLIC_API_TIMEOUT || appTimeout;
|
|
6
9
|
return {
|
|
7
10
|
API_URL: url,
|
|
8
11
|
TIMEOUT: Number(timeout),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useEnvironmentVariables.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useEnvironmentVariables.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var reactQuery = require('@tanstack/react-query');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
|
|
6
|
+
const useReactNativeEnv = () => {
|
|
7
|
+
const queryClient = reactQuery.useQueryClient();
|
|
8
|
+
const [appUrl, setAppUrl] = react.useState(undefined);
|
|
9
|
+
const [appTimeout, setAppTimeout] = react.useState();
|
|
10
|
+
react.useEffect(() => {
|
|
11
|
+
const config = queryClient.getQueryData(['config']);
|
|
12
|
+
const loadReactNativeEnvIfNeeded = async () => {
|
|
13
|
+
if (config?.options?.environment === 'app') {
|
|
14
|
+
const { API_URL, API_TIMEOUT } = await require('@env');
|
|
15
|
+
setAppUrl(API_URL);
|
|
16
|
+
setAppTimeout(API_TIMEOUT);
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
loadReactNativeEnvIfNeeded();
|
|
20
|
+
}, [queryClient]);
|
|
21
|
+
return { appUrl, appTimeout };
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
exports.useReactNativeEnv = useReactNativeEnv;
|
|
25
|
+
//# sourceMappingURL=useReactNativeEnv.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useReactNativeEnv.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -4,6 +4,7 @@ var bootstrapQueryRequest = require('./config/bootstrapQueryRequest.js');
|
|
|
4
4
|
var useEnvironmentVariables = require('./config/useEnvironmentVariables.js');
|
|
5
5
|
var useQueryConfig = require('./config/useQueryConfig.js');
|
|
6
6
|
var useQueryHeaders = require('./config/useQueryHeaders.js');
|
|
7
|
+
var useReactNativeEnv = require('./config/useReactNativeEnv.js');
|
|
7
8
|
var scrollToTop = require('./helpers/scrollToTop.js');
|
|
8
9
|
var timeFuncs = require('./helpers/timeFuncs.js');
|
|
9
10
|
var useKeyTrackerModel = require('./model/useKeyTrackerModel.js');
|
|
@@ -25,6 +26,7 @@ exports.bootstrapQueryRequest = bootstrapQueryRequest.bootstrapQueryRequest;
|
|
|
25
26
|
exports.useEnvironmentVariables = useEnvironmentVariables.useEnvironmentVariables;
|
|
26
27
|
exports.useQueryConfig = useQueryConfig.useQueryConfig;
|
|
27
28
|
exports.useQueryHeaders = useQueryHeaders.useQueryHeaders;
|
|
29
|
+
exports.useReactNativeEnv = useReactNativeEnv.useReactNativeEnv;
|
|
28
30
|
exports.scrollToTop = scrollToTop.scrollToTop;
|
|
29
31
|
exports.getDateInFuture = timeFuncs.getDateInFuture;
|
|
30
32
|
exports.useKeyTrackerModel = useKeyTrackerModel.useKeyTrackerModel;
|
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,8 +1,8 @@
|
|
|
1
1
|
import { useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
|
|
2
|
-
import { useState,
|
|
2
|
+
import { useState, useEffect, useMemo, startTransition } from 'react';
|
|
3
3
|
import axios from 'axios';
|
|
4
4
|
|
|
5
|
-
const bootstrapQueryRequest = (queryClient) => {
|
|
5
|
+
const bootstrapQueryRequest = (queryClient, options) => {
|
|
6
6
|
// make query config doesn't expire
|
|
7
7
|
queryClient.setQueryDefaults(['config'], {
|
|
8
8
|
staleTime: Infinity,
|
|
@@ -13,12 +13,32 @@ const bootstrapQueryRequest = (queryClient) => {
|
|
|
13
13
|
headers: {
|
|
14
14
|
Authorization: ``,
|
|
15
15
|
},
|
|
16
|
+
options,
|
|
16
17
|
});
|
|
17
18
|
};
|
|
18
19
|
|
|
20
|
+
const useReactNativeEnv = () => {
|
|
21
|
+
const queryClient = useQueryClient();
|
|
22
|
+
const [appUrl, setAppUrl] = useState(undefined);
|
|
23
|
+
const [appTimeout, setAppTimeout] = useState();
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
const config = queryClient.getQueryData(['config']);
|
|
26
|
+
const loadReactNativeEnvIfNeeded = async () => {
|
|
27
|
+
if (config?.options?.environment === 'app') {
|
|
28
|
+
const { API_URL, API_TIMEOUT } = await require('@env');
|
|
29
|
+
setAppUrl(API_URL);
|
|
30
|
+
setAppTimeout(API_TIMEOUT);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
loadReactNativeEnvIfNeeded();
|
|
34
|
+
}, [queryClient]);
|
|
35
|
+
return { appUrl, appTimeout };
|
|
36
|
+
};
|
|
37
|
+
|
|
19
38
|
const useEnvironmentVariables = () => {
|
|
20
|
-
const
|
|
21
|
-
const
|
|
39
|
+
const { appTimeout, appUrl } = useReactNativeEnv();
|
|
40
|
+
const url = process.env.REACT_APP_API_URL || process.env.NEXT_PUBLIC_API_URL || appUrl;
|
|
41
|
+
const timeout = process.env.REACT_APP_API_TIMEOUT || process.env.NEXT_PUBLIC_API_TIMEOUT || appTimeout;
|
|
22
42
|
return {
|
|
23
43
|
API_URL: url,
|
|
24
44
|
TIMEOUT: Number(timeout),
|
|
@@ -73,9 +93,7 @@ const useQueryHeaders = () => {
|
|
|
73
93
|
const useKeyTrackerModel = (keyTracker) => {
|
|
74
94
|
const queryClient = useQueryClient();
|
|
75
95
|
const getQueryKey = (innerKeyTracker) => {
|
|
76
|
-
const queryKey = queryClient.getQueryData([
|
|
77
|
-
innerKeyTracker ?? keyTracker,
|
|
78
|
-
]);
|
|
96
|
+
const queryKey = queryClient.getQueryData([innerKeyTracker ?? keyTracker]);
|
|
79
97
|
return queryKey;
|
|
80
98
|
};
|
|
81
99
|
const refetchQuery = async (innerKeyTracker) => {
|
|
@@ -105,7 +123,7 @@ const useRefetchQuery = async (queryKey) => {
|
|
|
105
123
|
return { refetchQuery };
|
|
106
124
|
};
|
|
107
125
|
|
|
108
|
-
const axiosInstance = ({ baseURL, timeout, headers
|
|
126
|
+
const axiosInstance = ({ baseURL, timeout, headers }) => {
|
|
109
127
|
return axios.create({
|
|
110
128
|
baseURL,
|
|
111
129
|
timeout,
|
|
@@ -321,8 +339,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
|
|
|
321
339
|
const nextPage = () => {
|
|
322
340
|
if (query.data?.data.pagination) {
|
|
323
341
|
const pagination = query.data.data.pagination;
|
|
324
|
-
if (pagination.next_page !== pagination.current_page &&
|
|
325
|
-
pagination.next_page > pagination.current_page) {
|
|
342
|
+
if (pagination.next_page !== pagination.current_page && pagination.next_page > pagination.current_page) {
|
|
326
343
|
updatePath(constructPaginationLink(requestPath, pagination.next_page));
|
|
327
344
|
}
|
|
328
345
|
}
|
|
@@ -330,8 +347,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
|
|
|
330
347
|
const prevPage = () => {
|
|
331
348
|
if (query.data?.data.pagination) {
|
|
332
349
|
const pagination = query.data.data.pagination;
|
|
333
|
-
if (pagination.previous_page !== pagination.current_page &&
|
|
334
|
-
pagination.previous_page < pagination.current_page) {
|
|
350
|
+
if (pagination.previous_page !== pagination.current_page && pagination.previous_page < pagination.current_page) {
|
|
335
351
|
updatePath(constructPaginationLink(requestPath, pagination.previous_page));
|
|
336
352
|
}
|
|
337
353
|
}
|
|
@@ -378,7 +394,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
|
|
|
378
394
|
};
|
|
379
395
|
};
|
|
380
396
|
|
|
381
|
-
const usePatchRequest = ({ path, baseUrl, headers
|
|
397
|
+
const usePatchRequest = ({ path, baseUrl, headers }) => {
|
|
382
398
|
const { API_URL, TIMEOUT } = useEnvironmentVariables();
|
|
383
399
|
const { getHeaders } = useQueryHeaders();
|
|
384
400
|
const sendRequest = async (res, rej, data) => {
|
|
@@ -458,5 +474,5 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, }) => {
|
|
|
458
474
|
return { post, ...mutation };
|
|
459
475
|
};
|
|
460
476
|
|
|
461
|
-
export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, getDateInFuture, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useRefetchQuery };
|
|
477
|
+
export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, getDateInFuture, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery };
|
|
462
478
|
//# 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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -5,9 +5,7 @@ var reactQuery = require('@tanstack/react-query');
|
|
|
5
5
|
const useKeyTrackerModel = (keyTracker) => {
|
|
6
6
|
const queryClient = reactQuery.useQueryClient();
|
|
7
7
|
const getQueryKey = (innerKeyTracker) => {
|
|
8
|
-
const queryKey = queryClient.getQueryData([
|
|
9
|
-
innerKeyTracker ?? keyTracker,
|
|
10
|
-
]);
|
|
8
|
+
const queryKey = queryClient.getQueryData([innerKeyTracker ?? keyTracker]);
|
|
11
9
|
return queryKey;
|
|
12
10
|
};
|
|
13
11
|
const refetchQuery = async (innerKeyTracker) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyTrackerModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useKeyTrackerModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -55,8 +55,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
|
|
|
55
55
|
const nextPage = () => {
|
|
56
56
|
if (query.data?.data.pagination) {
|
|
57
57
|
const pagination = query.data.data.pagination;
|
|
58
|
-
if (pagination.next_page !== pagination.current_page &&
|
|
59
|
-
pagination.next_page > pagination.current_page) {
|
|
58
|
+
if (pagination.next_page !== pagination.current_page && pagination.next_page > pagination.current_page) {
|
|
60
59
|
updatePath(constructPaginationLink(requestPath, pagination.next_page));
|
|
61
60
|
}
|
|
62
61
|
}
|
|
@@ -64,8 +63,7 @@ const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl,
|
|
|
64
63
|
const prevPage = () => {
|
|
65
64
|
if (query.data?.data.pagination) {
|
|
66
65
|
const pagination = query.data.data.pagination;
|
|
67
|
-
if (pagination.previous_page !== pagination.current_page &&
|
|
68
|
-
pagination.previous_page < pagination.current_page) {
|
|
66
|
+
if (pagination.previous_page !== pagination.current_page && pagination.previous_page < pagination.current_page) {
|
|
69
67
|
updatePath(constructPaginationLink(requestPath, pagination.previous_page));
|
|
70
68
|
}
|
|
71
69
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useGetRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
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
|
+
export declare const usePatchRequest: <TResponse>({ path, baseUrl, headers }: {
|
|
5
5
|
path: string;
|
|
6
6
|
} & DefaultRequestOptions) => {
|
|
7
7
|
data: undefined;
|
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
var reactQuery = require('@tanstack/react-query');
|
|
4
4
|
var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
|
|
5
5
|
var useQueryHeaders = require('../config/useQueryHeaders.js');
|
|
6
|
+
require('react');
|
|
6
7
|
var scrollToTop = require('../helpers/scrollToTop.js');
|
|
7
8
|
require('axios');
|
|
8
9
|
var makeRequest = require('../request/make-request.js');
|
|
9
10
|
var request_enum = require('../request/request.enum.js');
|
|
10
11
|
|
|
11
|
-
const usePatchRequest = ({ path, baseUrl, headers
|
|
12
|
+
const usePatchRequest = ({ path, baseUrl, headers }) => {
|
|
12
13
|
const { API_URL, TIMEOUT } = useEnvironmentVariables.useEnvironmentVariables();
|
|
13
14
|
const { getHeaders } = useQueryHeaders.useQueryHeaders();
|
|
14
15
|
const sendRequest = async (res, rej, data) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePatchRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"usePatchRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
var reactQuery = require('@tanstack/react-query');
|
|
4
4
|
var useEnvironmentVariables = require('../config/useEnvironmentVariables.js');
|
|
5
5
|
var useQueryHeaders = require('../config/useQueryHeaders.js');
|
|
6
|
+
require('react');
|
|
6
7
|
require('axios');
|
|
7
8
|
var makeRequest = require('../request/make-request.js');
|
|
8
9
|
var request_enum = require('../request/request.enum.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePostRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"usePostRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { AxiosInstance } from 'axios';
|
|
2
2
|
import type { IMakeRequest } from './request.interface';
|
|
3
|
-
export declare const axiosInstance: ({ baseURL, timeout, headers
|
|
3
|
+
export declare const axiosInstance: ({ baseURL, timeout, headers }: Partial<IMakeRequest>) => AxiosInstance;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import type { RawAxiosRequestHeaders } from 'axios';
|
|
2
|
+
export interface BootstrapQueryRequest {
|
|
3
|
+
environment: 'app' | 'web' | 'electronjs';
|
|
4
|
+
}
|
|
2
5
|
export interface TanstackQueryConfig {
|
|
3
6
|
headers: RawAxiosRequestHeaders;
|
|
7
|
+
options?: BootstrapQueryRequest;
|
|
4
8
|
}
|
|
5
9
|
export interface IUseQueryHeaders {
|
|
6
10
|
getHeaders: () => TanstackQueryConfig['headers'];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ventlio/tanstack-query",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.55",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"contributors": [
|
|
@@ -30,7 +30,8 @@
|
|
|
30
30
|
"axios": "^1.3.4",
|
|
31
31
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
32
32
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
33
|
-
"react-native": "*"
|
|
33
|
+
"react-native": "*",
|
|
34
|
+
"react-native-dotenv": "3.4.8"
|
|
34
35
|
},
|
|
35
36
|
"peerDependenciesMeta": {
|
|
36
37
|
"react-native": {
|
|
@@ -54,6 +55,7 @@
|
|
|
54
55
|
"@types/node": "*",
|
|
55
56
|
"@types/react": "^18.2.0",
|
|
56
57
|
"@types/react-dom": "^18.2.0",
|
|
58
|
+
"@types/react-native-dotenv": "^0.2.0",
|
|
57
59
|
"@typescript-eslint/eslint-plugin": "^5.54.1",
|
|
58
60
|
"@typescript-eslint/parser": "^5.54.1",
|
|
59
61
|
"axios": "^1.3.4",
|
|
@@ -71,6 +73,7 @@
|
|
|
71
73
|
"prettier": "^2.8.4",
|
|
72
74
|
"react": "^18.2.0",
|
|
73
75
|
"react-dom": "^18.2.0",
|
|
76
|
+
"react-native-dotenv": "3.4.8",
|
|
74
77
|
"rimraf": "^4.4.0",
|
|
75
78
|
"rollup": "^3.19.1",
|
|
76
79
|
"rollup-plugin-typescript2": "^0.34.1",
|
|
@@ -15,9 +15,7 @@ describe('usePostRequest', () => {
|
|
|
15
15
|
});
|
|
16
16
|
|
|
17
17
|
it('should return post function and mutation object', () => {
|
|
18
|
-
const { result } = renderHook(() =>
|
|
19
|
-
usePostRequest<{ id: number; name: string }>({ path })
|
|
20
|
-
);
|
|
18
|
+
const { result } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
|
|
21
19
|
|
|
22
20
|
expect(result.current.post).toBeInstanceOf(Function);
|
|
23
21
|
expect(result.current.isLoading).toBe(false);
|
|
@@ -28,9 +26,7 @@ describe('usePostRequest', () => {
|
|
|
28
26
|
it('should make post request and return response data', async () => {
|
|
29
27
|
mockAxios.onPost(path).reply(200, response);
|
|
30
28
|
|
|
31
|
-
const { result, waitForNextUpdate } = renderHook(() =>
|
|
32
|
-
usePostRequest<{ id: number; name: string }>({ path })
|
|
33
|
-
);
|
|
29
|
+
const { result, waitForNextUpdate } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
|
|
34
30
|
|
|
35
31
|
const responsePromise = result.current.post(postData);
|
|
36
32
|
|
|
@@ -48,9 +44,7 @@ describe('usePostRequest', () => {
|
|
|
48
44
|
const errorMessage = 'Request failed with status code 500';
|
|
49
45
|
mockAxios.onPost(path).reply(500, { message: errorMessage });
|
|
50
46
|
|
|
51
|
-
const { result, waitForNextUpdate } = renderHook(() =>
|
|
52
|
-
usePostRequest<{ id: number; name: string }>({ path })
|
|
53
|
-
);
|
|
47
|
+
const { result, waitForNextUpdate } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
|
|
54
48
|
|
|
55
49
|
const responsePromise = result.current.post(postData);
|
|
56
50
|
|
|
@@ -72,9 +66,7 @@ describe('usePostRequest', () => {
|
|
|
72
66
|
formData.append('name', 'John Doe');
|
|
73
67
|
mockAxios.onPost(path).reply(200, response);
|
|
74
68
|
|
|
75
|
-
const { result } = renderHook(() =>
|
|
76
|
-
usePostRequest<{ id: number; name: string }>({ path, isFormData: true })
|
|
77
|
-
);
|
|
69
|
+
const { result } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path, isFormData: true }));
|
|
78
70
|
|
|
79
71
|
const responsePromise = result.current.post(formData);
|
|
80
72
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { QueryClient } from '@tanstack/react-query';
|
|
2
|
-
import type { TanstackQueryConfig } from '../types';
|
|
2
|
+
import type { BootstrapQueryRequest, TanstackQueryConfig } from '../types';
|
|
3
3
|
|
|
4
|
-
export const bootstrapQueryRequest = (queryClient: QueryClient): void => {
|
|
4
|
+
export const bootstrapQueryRequest = (queryClient: QueryClient, options?: BootstrapQueryRequest): void => {
|
|
5
5
|
// make query config doesn't expire
|
|
6
6
|
queryClient.setQueryDefaults(['config'], {
|
|
7
7
|
staleTime: Infinity,
|
|
@@ -13,5 +13,6 @@ export const bootstrapQueryRequest = (queryClient: QueryClient): void => {
|
|
|
13
13
|
headers: {
|
|
14
14
|
Authorization: ``,
|
|
15
15
|
},
|
|
16
|
+
options,
|
|
16
17
|
});
|
|
17
18
|
};
|
package/src/config/index.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import type { IConfig } from './config.interface';
|
|
2
|
+
import { useReactNativeEnv } from './useReactNativeEnv';
|
|
2
3
|
|
|
3
4
|
export const useEnvironmentVariables = (): IConfig => {
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
|
|
5
|
+
const { appTimeout, appUrl } = useReactNativeEnv();
|
|
6
|
+
const url = process.env.REACT_APP_API_URL || process.env.NEXT_PUBLIC_API_URL || appUrl;
|
|
7
|
+
const timeout = process.env.REACT_APP_API_TIMEOUT || process.env.NEXT_PUBLIC_API_TIMEOUT || appTimeout;
|
|
7
8
|
|
|
8
9
|
return {
|
|
9
10
|
API_URL: url as string,
|
|
@@ -4,8 +4,7 @@ import type { TanstackQueryConfig } from '../types';
|
|
|
4
4
|
export const useQueryConfig = (): TanstackQueryConfig => {
|
|
5
5
|
const queryClient = useQueryClient();
|
|
6
6
|
|
|
7
|
-
const { headers = {} } =
|
|
8
|
-
queryClient.getQueryData<TanstackQueryConfig>(['config']) ?? {};
|
|
7
|
+
const { headers = {} } = queryClient.getQueryData<TanstackQueryConfig>(['config']) ?? {};
|
|
9
8
|
|
|
10
9
|
return { headers };
|
|
11
10
|
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { useQueryClient } from '@tanstack/react-query';
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
3
|
+
import type { TanstackQueryConfig } from '../types';
|
|
4
|
+
|
|
5
|
+
export const useReactNativeEnv = () => {
|
|
6
|
+
const queryClient = useQueryClient();
|
|
7
|
+
|
|
8
|
+
const [appUrl, setAppUrl] = useState<string | undefined>(undefined);
|
|
9
|
+
const [appTimeout, setAppTimeout] = useState<number | undefined>();
|
|
10
|
+
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
const config = queryClient.getQueryData<TanstackQueryConfig>(['config']);
|
|
13
|
+
|
|
14
|
+
const loadReactNativeEnvIfNeeded = async () => {
|
|
15
|
+
if (config?.options?.environment === 'app') {
|
|
16
|
+
const { API_URL, API_TIMEOUT } = await require('@env');
|
|
17
|
+
|
|
18
|
+
setAppUrl(API_URL);
|
|
19
|
+
setAppTimeout(API_TIMEOUT);
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
loadReactNativeEnvIfNeeded();
|
|
24
|
+
}, [queryClient]);
|
|
25
|
+
|
|
26
|
+
return { appUrl, appTimeout };
|
|
27
|
+
};
|
package/src/env.d.ts
ADDED
|
@@ -4,9 +4,7 @@ export const useKeyTrackerModel = <T>(keyTracker: string) => {
|
|
|
4
4
|
const queryClient = useQueryClient();
|
|
5
5
|
|
|
6
6
|
const getQueryKey = (innerKeyTracker?: string) => {
|
|
7
|
-
const queryKey: any[] | undefined = queryClient.getQueryData([
|
|
8
|
-
innerKeyTracker ?? keyTracker,
|
|
9
|
-
]);
|
|
7
|
+
const queryKey: any[] | undefined = queryClient.getQueryData([innerKeyTracker ?? keyTracker]);
|
|
10
8
|
|
|
11
9
|
return queryKey;
|
|
12
10
|
};
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import type { QueryFilters } from '@tanstack/react-query';
|
|
2
2
|
import { useQueryClient } from '@tanstack/react-query';
|
|
3
3
|
|
|
4
|
-
export const useQueryModel = (
|
|
5
|
-
queryKey: any[],
|
|
6
|
-
filters?: QueryFilters | undefined
|
|
7
|
-
) => {
|
|
4
|
+
export const useQueryModel = (queryKey: any[], filters?: QueryFilters | undefined) => {
|
|
8
5
|
const queryClient = useQueryClient();
|
|
9
6
|
|
|
10
7
|
return queryClient.getQueryData(queryKey, filters);
|
|
@@ -7,9 +7,7 @@ import type { IRequestError, IRequestSuccess } from '../request';
|
|
|
7
7
|
import { HttpMethod, makeRequest } from '../request';
|
|
8
8
|
import type { DefaultRequestOptions } from './queries.interface';
|
|
9
9
|
|
|
10
|
-
export const useDeleteRequest = <TResponse>(
|
|
11
|
-
deleteOptions?: DefaultRequestOptions
|
|
12
|
-
) => {
|
|
10
|
+
export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOptions) => {
|
|
13
11
|
const { baseUrl, headers } = deleteOptions ?? {};
|
|
14
12
|
const [requestPath, updateDeletePath] = useState<string>('');
|
|
15
13
|
const [options, setOptions] = useState<any>();
|
|
@@ -18,10 +16,7 @@ export const useDeleteRequest = <TResponse>(
|
|
|
18
16
|
|
|
19
17
|
const { getHeaders } = useQueryHeaders();
|
|
20
18
|
|
|
21
|
-
const sendRequest = async (
|
|
22
|
-
res: (value: any) => void,
|
|
23
|
-
rej: (reason?: any) => void
|
|
24
|
-
) => {
|
|
19
|
+
const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void) => {
|
|
25
20
|
// get request headers
|
|
26
21
|
const globalHeaders: RawAxiosRequestHeaders = getHeaders();
|
|
27
22
|
|
|
@@ -41,10 +36,7 @@ export const useDeleteRequest = <TResponse>(
|
|
|
41
36
|
|
|
42
37
|
const query = useQuery<any, any, IRequestSuccess<TResponse>>(
|
|
43
38
|
[requestPath, {}],
|
|
44
|
-
() =>
|
|
45
|
-
new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) =>
|
|
46
|
-
sendRequest(res, rej)
|
|
47
|
-
),
|
|
39
|
+
() => new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => sendRequest(res, rej)),
|
|
48
40
|
{ enabled: false, ...options }
|
|
49
41
|
);
|
|
50
42
|
|
|
@@ -6,11 +6,7 @@ import { useEnvironmentVariables, useQueryHeaders } from '../config';
|
|
|
6
6
|
|
|
7
7
|
import type { IRequestError, IRequestSuccess } from '../request';
|
|
8
8
|
import { makeRequest } from '../request';
|
|
9
|
-
import type {
|
|
10
|
-
DefaultRequestOptions,
|
|
11
|
-
IPagination,
|
|
12
|
-
TanstackQueryOption,
|
|
13
|
-
} from './queries.interface';
|
|
9
|
+
import type { DefaultRequestOptions, IPagination, TanstackQueryOption } from './queries.interface';
|
|
14
10
|
|
|
15
11
|
export const useGetRequest = <TResponse extends Record<string, any>>({
|
|
16
12
|
path,
|
|
@@ -39,10 +35,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
|
|
|
39
35
|
|
|
40
36
|
const sendRequest = async (
|
|
41
37
|
res: (
|
|
42
|
-
value:
|
|
43
|
-
| IRequestError
|
|
44
|
-
| IRequestSuccess<TResponse>
|
|
45
|
-
| PromiseLike<IRequestError | IRequestSuccess<TResponse>>
|
|
38
|
+
value: IRequestError | IRequestSuccess<TResponse> | PromiseLike<IRequestError | IRequestSuccess<TResponse>>
|
|
46
39
|
) => void,
|
|
47
40
|
rej: (reason?: any) => void
|
|
48
41
|
) => {
|
|
@@ -64,10 +57,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
|
|
|
64
57
|
|
|
65
58
|
const query = useQuery<any, any, IRequestSuccess<TResponse>>(
|
|
66
59
|
[requestPath, {}],
|
|
67
|
-
() =>
|
|
68
|
-
new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) =>
|
|
69
|
-
sendRequest(res, rej)
|
|
70
|
-
),
|
|
60
|
+
() => new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => sendRequest(res, rej)),
|
|
71
61
|
{
|
|
72
62
|
enabled: load,
|
|
73
63
|
...options,
|
|
@@ -95,10 +85,7 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
|
|
|
95
85
|
const nextPage = () => {
|
|
96
86
|
if (query.data?.data.pagination) {
|
|
97
87
|
const pagination: IPagination = query.data.data.pagination;
|
|
98
|
-
if (
|
|
99
|
-
pagination.next_page !== pagination.current_page &&
|
|
100
|
-
pagination.next_page > pagination.current_page
|
|
101
|
-
) {
|
|
88
|
+
if (pagination.next_page !== pagination.current_page && pagination.next_page > pagination.current_page) {
|
|
102
89
|
updatePath(constructPaginationLink(requestPath, pagination.next_page));
|
|
103
90
|
}
|
|
104
91
|
}
|
|
@@ -107,13 +94,8 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
|
|
|
107
94
|
const prevPage = () => {
|
|
108
95
|
if (query.data?.data.pagination) {
|
|
109
96
|
const pagination: IPagination = query.data.data.pagination;
|
|
110
|
-
if (
|
|
111
|
-
pagination.previous_page
|
|
112
|
-
pagination.previous_page < pagination.current_page
|
|
113
|
-
) {
|
|
114
|
-
updatePath(
|
|
115
|
-
constructPaginationLink(requestPath, pagination.previous_page)
|
|
116
|
-
);
|
|
97
|
+
if (pagination.previous_page !== pagination.current_page && pagination.previous_page < pagination.current_page) {
|
|
98
|
+
updatePath(constructPaginationLink(requestPath, pagination.previous_page));
|
|
117
99
|
}
|
|
118
100
|
}
|
|
119
101
|
};
|
|
@@ -4,26 +4,15 @@ import type { RawAxiosRequestHeaders } from 'axios';
|
|
|
4
4
|
import { useEnvironmentVariables, useQueryHeaders } from '../config';
|
|
5
5
|
import { scrollToTop } from '../helpers';
|
|
6
6
|
import { HttpMethod, makeRequest } from '../request';
|
|
7
|
-
import type {
|
|
8
|
-
IRequestError,
|
|
9
|
-
IRequestSuccess,
|
|
10
|
-
} from '../request/request.interface';
|
|
7
|
+
import type { IRequestError, IRequestSuccess } from '../request/request.interface';
|
|
11
8
|
import type { DefaultRequestOptions } from './queries.interface';
|
|
12
9
|
|
|
13
|
-
export const usePatchRequest = <TResponse>({
|
|
14
|
-
path,
|
|
15
|
-
baseUrl,
|
|
16
|
-
headers,
|
|
17
|
-
}: { path: string } & DefaultRequestOptions) => {
|
|
10
|
+
export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: string } & DefaultRequestOptions) => {
|
|
18
11
|
const { API_URL, TIMEOUT } = useEnvironmentVariables();
|
|
19
12
|
|
|
20
13
|
const { getHeaders } = useQueryHeaders();
|
|
21
14
|
|
|
22
|
-
const sendRequest = async (
|
|
23
|
-
res: (value: any) => void,
|
|
24
|
-
rej: (reason?: any) => void,
|
|
25
|
-
data: any
|
|
26
|
-
) => {
|
|
15
|
+
const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, data: any) => {
|
|
27
16
|
// get request headers
|
|
28
17
|
const globalHeaders: RawAxiosRequestHeaders = getHeaders();
|
|
29
18
|
|
|
@@ -60,9 +49,7 @@ export const usePatchRequest = <TResponse>({
|
|
|
60
49
|
|
|
61
50
|
const patch = async (
|
|
62
51
|
data: any,
|
|
63
|
-
options?:
|
|
64
|
-
| MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown>
|
|
65
|
-
| undefined
|
|
52
|
+
options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined
|
|
66
53
|
): Promise<IRequestSuccess<TResponse>> => {
|
|
67
54
|
return mutation.mutateAsync(data, options);
|
|
68
55
|
};
|
|
@@ -20,11 +20,7 @@ export const usePostRequest = <TResponse>({
|
|
|
20
20
|
|
|
21
21
|
const { getHeaders } = useQueryHeaders();
|
|
22
22
|
|
|
23
|
-
const sendRequest = async (
|
|
24
|
-
res: (value: any) => void,
|
|
25
|
-
rej: (reason?: any) => void,
|
|
26
|
-
postData: any
|
|
27
|
-
) => {
|
|
23
|
+
const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, postData: any) => {
|
|
28
24
|
// get request headers
|
|
29
25
|
const globalHeaders: RawAxiosRequestHeaders = getHeaders();
|
|
30
26
|
|
|
@@ -57,16 +53,11 @@ export const usePostRequest = <TResponse>({
|
|
|
57
53
|
|
|
58
54
|
// register post mutation
|
|
59
55
|
const mutation = useMutation<IRequestSuccess<TResponse>, IRequestError>(
|
|
60
|
-
async (postData: any) =>
|
|
61
|
-
new Promise<IRequestSuccess<TResponse>>((res, rej) =>
|
|
62
|
-
sendRequest(res, rej, postData)
|
|
63
|
-
)
|
|
56
|
+
async (postData: any) => new Promise<IRequestSuccess<TResponse>>((res, rej) => sendRequest(res, rej, postData))
|
|
64
57
|
);
|
|
65
58
|
const post = async (
|
|
66
59
|
data: any,
|
|
67
|
-
options?:
|
|
68
|
-
| MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown>
|
|
69
|
-
| undefined
|
|
60
|
+
options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined
|
|
70
61
|
): Promise<IRequestSuccess<TResponse>> => {
|
|
71
62
|
return mutation.mutateAsync(data, options);
|
|
72
63
|
};
|
|
@@ -2,11 +2,7 @@ import type { AxiosInstance } from 'axios';
|
|
|
2
2
|
import axios from 'axios';
|
|
3
3
|
import type { IMakeRequest } from './request.interface';
|
|
4
4
|
|
|
5
|
-
export const axiosInstance = ({
|
|
6
|
-
baseURL,
|
|
7
|
-
timeout,
|
|
8
|
-
headers,
|
|
9
|
-
}: Partial<IMakeRequest>): AxiosInstance => {
|
|
5
|
+
export const axiosInstance = ({ baseURL, timeout, headers }: Partial<IMakeRequest>): AxiosInstance => {
|
|
10
6
|
return axios.create({
|
|
11
7
|
baseURL,
|
|
12
8
|
timeout,
|
|
@@ -1,14 +1,7 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
IRequestError,
|
|
3
|
-
IRequestSuccess,
|
|
4
|
-
IServerRequestError,
|
|
5
|
-
IServerRequestSuccess,
|
|
6
|
-
} from './request.interface';
|
|
1
|
+
import type { IRequestError, IRequestSuccess, IServerRequestError, IServerRequestSuccess } from './request.interface';
|
|
7
2
|
|
|
8
3
|
//
|
|
9
|
-
export const errorTransformer = (
|
|
10
|
-
data: IServerRequestError & { statusCode: number }
|
|
11
|
-
): IRequestError => {
|
|
4
|
+
export const errorTransformer = (data: IServerRequestError & { statusCode: number }): IRequestError => {
|
|
12
5
|
return {
|
|
13
6
|
message: data.message,
|
|
14
7
|
statusCode: data.statusCode,
|
|
@@ -19,9 +12,7 @@ export const errorTransformer = (
|
|
|
19
12
|
};
|
|
20
13
|
|
|
21
14
|
//
|
|
22
|
-
export const successTransformer = <T>(
|
|
23
|
-
data: IServerRequestSuccess & { statusCode: number }
|
|
24
|
-
): IRequestSuccess<T> => {
|
|
15
|
+
export const successTransformer = <T>(data: IServerRequestSuccess & { statusCode: number }): IRequestSuccess<T> => {
|
|
25
16
|
return {
|
|
26
17
|
message: data.message ?? 'Request successful',
|
|
27
18
|
statusCode: data.statusCode,
|
package/src/types/index.ts
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import type { RawAxiosRequestHeaders } from 'axios';
|
|
2
2
|
|
|
3
|
+
export interface BootstrapQueryRequest {
|
|
4
|
+
environment: 'app' | 'web' | 'electronjs';
|
|
5
|
+
}
|
|
6
|
+
|
|
3
7
|
export interface TanstackQueryConfig {
|
|
4
8
|
headers: RawAxiosRequestHeaders;
|
|
9
|
+
options?: BootstrapQueryRequest;
|
|
5
10
|
}
|
|
6
11
|
|
|
7
12
|
export interface IUseQueryHeaders {
|