@ventlio/tanstack-query 0.2.6 → 0.2.7-2.1

package/dist/index.mjs

@@ -1,64 +1,234 @@
+import 'url-search-params-polyfill';
 import { useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
-import { useState, useEffect, startTransition } from 'react';
+import result from 'lodash.result';
+import lodashSet from 'lodash.set';
+import { useState, useMemo, useEffect, startTransition } from 'react';
 import axios from 'axios';
 
-const useQueryConfig = () => {
-    const queryClient = useQueryClient();
-    const { headers, baseURL, timeout } = queryClient.getQueryData([
-        'config',
-    ]);
-    return { headers, baseURL, timeout };
+const bootstrapQueryRequest = (queryClient, options) => {
+    // make query config doesn't expire
+    queryClient.setQueryDefaults(['config'], {
+        staleTime: Infinity,
+        cacheTime: Infinity,
+    });
+    // set default query config
+    queryClient.setQueryData(['config'], {
+        headers: {
+            Authorization: ``,
+        },
+        options,
+    });
 };
 
-const useQueryBaseURL = () => {
-    const { baseURL } = useQueryConfig();
+const useReactNativeEnv = () => {
     const queryClient = useQueryClient();
-    const setQueryBaseUrl = (newBaseUrl) => {
-        queryClient.setQueryData(['config'], (config) => {
-            config.baseURL = newBaseUrl;
-            return config;
-        });
+    const config = queryClient.getQueryData(['config']);
+    const appUrl = config?.options?.environments?.appBaseUrl;
+    const appTimeout = config?.options?.environments?.appTimeout;
+    const isApp = config?.options?.context === 'app';
+    return { appUrl, appTimeout, isApp };
+};
+
+const useEnvironmentVariables = () => {
+    const { appTimeout, appUrl } = useReactNativeEnv();
+    const url = process.env.REACT_APP_API_URL ?? process.env.NEXT_PUBLIC_API_URL ?? appUrl;
+    const timeout = process.env.REACT_APP_API_TIMEOUT ?? process.env.NEXT_PUBLIC_API_TIMEOUT ?? appTimeout;
+    return {
+        API_URL: url,
+        TIMEOUT: Number(timeout),
     };
-    return { baseURL, setQueryBaseUrl };
 };
 
+const useQueryConfig = () => {
+    const queryClient = useQueryClient();
+    const { headers = {}, options = {} } = queryClient.getQueryData(['config']) ?? {};
+    return { headers, options };
+};
+
+const scrollToTop = () => {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+    });
+};
+
+function getDateInFuture(days) {
+    // Create a new Date object
+    const date = new Date();
+    // Add the specified number of days to the date
+    date.setDate(date.getDate() + days);
+    // Get the Unix timestamp of the date (in milliseconds)
+    return date.getTime();
+}
+
 const useQueryHeaders = () => {
-    const { headers } = useQueryConfig();
     const queryClient = useQueryClient();
+    const getHeaders = () => {
+        const config = queryClient.getQueryData(['config']);
+        return config.headers;
+    };
     const setQueryHeaders = (newHeaders) => {
+        // make sure the config does not expire
+        queryClient.setQueryDefaults(['config'], {
+            staleTime: Infinity,
+            cacheTime: Infinity,
+        });
+        // set the config
         queryClient.setQueryData(['config'], (config) => {
-            config.headers = newHeaders;
-            return config;
+            const newConfig = { ...config, headers: newHeaders };
+            return newConfig;
+        }, {
+            updatedAt: getDateInFuture(2),
         });
     };
-    return { headers, setQueryHeaders };
+    return { setQueryHeaders, getHeaders };
 };
 
-const useQueryTimeout = () => {
-    const { timeout } = useQueryConfig();
+const useKeyTrackerModel = (keyTracker) => {
     const queryClient = useQueryClient();
-    const setQueryTimeout = (newTimeout) => {
-        queryClient.setQueryData(['config'], (config) => {
-            config.timeout = newTimeout;
-            return config;
+    const getQueryKey = (innerKeyTracker) => {
+        const queryKey = queryClient.getQueryData([innerKeyTracker ?? keyTracker]);
+        return queryKey;
+    };
+    const refetchQuery = async (innerKeyTracker) => {
+        const queryKey = getQueryKey(innerKeyTracker ?? keyTracker);
+        await queryClient.refetchQueries({
+            queryKey,
+            exact: true,
         });
     };
-    return { timeout, setQueryTimeout };
+    return { refetchQuery, getQueryKey };
 };
 
-const scrollToTop = () => {
-    window.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-    });
+const useQueryModel = (keyTracker, exact = true) => {
+    const queryClient = useQueryClient();
+    const { getQueryKey } = useKeyTrackerModel(keyTracker);
+    const queryKey = getQueryKey();
+    const add = (data, position, path) => {
+        let records = (findAll(path) ?? []);
+        if (!position || position === 'end') {
+            records = [...records, data];
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        }
+        else if (position === 'start') {
+            records = [data, ...records];
+        }
+        if (!path) {
+            queryClient.setQueryData(queryKey, records);
+        }
+        else {
+            const queryData = queryClient.getQueryData(queryKey, { exact }) ?? {};
+            queryClient.setQueryData(queryKey, lodashSet(queryData, path, records));
+        }
+        return data;
+    };
+    const findAll = (path) => {
+        const data = queryClient.getQueryData(queryKey, { exact });
+        if (!data) {
+            return [];
+        }
+        if (!path) {
+            return Array.isArray(data) ? data : [data];
+        }
+        return result(data, path, []);
+    };
+    const findMany = (selector, path) => {
+        const data = (findAll(path) ?? []);
+        return data.filter(selector);
+    };
+    const find = (id, path) => {
+        const modelConfig = getModelConfig();
+        if (!modelConfig?.idColumn) {
+            return undefined;
+        }
+        const data = (findAll(path) ?? []);
+        return data.find((record) => record[modelConfig.idColumn] === id);
+    };
+    const get = (path) => {
+        let data = queryClient.getQueryData(queryKey, { exact });
+        if (path) {
+            data = result(data, path);
+        }
+        return data;
+    };
+    const set = (newData, path) => {
+        if (path) {
+            const data = get();
+            newData = lodashSet(data, path, newData);
+        }
+        return queryClient.setQueryData(queryKey, newData);
+    };
+    const getModelConfig = () => {
+        const { options } = queryClient.getQueryData(['config']) ?? {};
+        const { modelConfig } = options ?? {};
+        return modelConfig;
+    };
+    const update = (id, data, path) => {
+        const oldData = (findAll(path) ?? []);
+        const modelConfig = getModelConfig();
+        if (!modelConfig?.idColumn) {
+            return undefined;
+        }
+        const idColumn = modelConfig.idColumn;
+        let updatedRecord = undefined;
+        const newData = oldData.map((record) => {
+            let dataRecord = record;
+            if (dataRecord[idColumn] === id) {
+                dataRecord = { ...dataRecord, ...data };
+                updatedRecord = dataRecord;
+            }
+            return dataRecord;
+        });
+        if (!path) {
+            queryClient.setQueryData(queryKey, newData);
+        }
+        else {
+            const queryData = queryClient.getQueryData(queryKey, { exact }) ?? {};
+            queryClient.setQueryData(queryKey, lodashSet(queryData, path, newData));
+        }
+        return updatedRecord;
+    };
+    const remove = (id, path) => {
+        const oldData = (findAll(path) ?? []);
+        const modelConfig = getModelConfig();
+        if (!modelConfig?.idColumn) {
+            return false;
+        }
+        const idColumn = modelConfig.idColumn;
+        let updated = false;
+        const newData = oldData.filter((record) => {
+            const dataRecord = record;
+            if (dataRecord[idColumn] === id) {
+                updated = true;
+                return false;
+            }
+            return true;
+        });
+        if (!path) {
+            queryClient.setQueryData(queryKey, newData);
+        }
+        else {
+            const queryData = queryClient.getQueryData(queryKey, { exact }) ?? {};
+            queryClient.setQueryData(queryKey, lodashSet(queryData, path, newData));
+        }
+        return updated;
+    };
+    return { find, findAll, findMany, remove, update, add, get, set };
 };
 
-const useQueryModel = (queryKey, filters) => {
+const useRefetchQuery = async (queryKey) => {
     const queryClient = useQueryClient();
-    return queryClient.getQueryData(queryKey, filters);
+    const refetchQuery = async (innerQueryKey) => {
+        await queryClient.invalidateQueries({
+            queryKey: innerQueryKey ?? queryKey,
+            exact: true,
+        }, { throwOnError: true, cancelRefetch: true });
+        return queryClient.getQueriesData(innerQueryKey ?? queryKey);
+    };
+    return { refetchQuery };
 };
 
-const axiosInstance = ({ baseURL, timeout, headers, }) => {
+const axiosInstance = ({ baseURL, timeout, headers }) => {
     return axios.create({
         baseURL,
         timeout,
@@ -68,12 +238,44 @@ const axiosInstance = ({ baseURL, timeout, headers, }) => {
 
 const buildFormData = (body) => {
     const formData = new FormData();
+    const handleArrayValue = (key, value) => {
+        for (const item of value) {
+            if (item instanceof File) {
+                formData.append(key, item);
+            }
+            else if (item instanceof Object) {
+                formData.append(key, JSON.stringify(item));
+            }
+            else {
+                formData.append(key, item);
+            }
+        }
+    };
+    const handleObjectValue = (key, value) => {
+        if (value instanceof File) {
+            formData.append(key, value);
+        }
+        else {
+            formData.append(key, JSON.stringify(value));
+        }
+    };
+    const handlePrimitiveValue = (key, value) => {
+        formData.append(key, value);
+    };
     const bodyKeys = Object.keys(body);
     bodyKeys.forEach((key) => {
-        formData.append(key, body[key]);
+        const inputValue = body[key];
+        if (Array.isArray(inputValue) && inputValue.length > 0) {
+            handleArrayValue(key, inputValue);
+        }
+        else if (inputValue instanceof Object) {
+            handleObjectValue(key, inputValue);
+        }
+        else {
+            handlePrimitiveValue(key, inputValue);
+        }
     });
-    body = formData;
-    return body;
+    return formData;
 };
 
 var HttpMethod;
@@ -111,17 +313,41 @@ const successTransformer = (data) => {
     };
 };
 
-async function makeRequest({ body, method = HttpMethod.GET, path, isFormData, headers = {}, baseURL, timeout, }) {
+async function makeRequest({ body, method = HttpMethod.GET, path, isFormData, headers = {}, baseURL, timeout, appFileConfig, }) {
+    // check if file is included in mobile app environment and extract all file input to avoid
+    // it being formatted to object using axios formData builder
+    const isApp = appFileConfig?.isApp;
+    const appFiles = isApp ? getAppFiles(body, appFileConfig.fileSelectors) : {};
     // configure body
-    body = isFormData ? buildFormData(body) : body;
-    // configure request header
+    body = (isFormData ? axios.toFormData(body) : body);
+    // configure request header1
     if (!isFormData) {
         headers['Content-Type'] = ContentType.APPLICATION_JSON;
     }
+    else {
+        if (isApp) {
+            headers['Content-Type'] = ContentType.MULTIPART_FORM_DATA;
+            // add the app files
+            for (const fileKey in appFiles) {
+                const currentFile = appFiles[fileKey];
+                if (Array.isArray(currentFile)) {
+                    for (const innerFile of currentFile) {
+                        body.append(fileKey, innerFile);
+                    }
+                }
+                else {
+                    body.append(fileKey, currentFile);
+                }
+            }
+        }
+        else {
+            delete headers['Content-Type'];
+        }
+    }
     try {
-        const axios = axiosInstance({ baseURL, headers, timeout });
+        const axiosRequest = axiosInstance({ baseURL, headers, timeout });
         //   send request
-        const resp = await axios({
+        const resp = await axiosRequest({
             url: path,
             method,
             data: body,
@@ -135,82 +361,107 @@ async function makeRequest({ body, method = HttpMethod.GET, path, isFormData, he
             return errorTransformer({ ...jsonResp, statusCode: responseCode });
         }
         return successTransformer({
-            data: jsonResp,
             statusCode: responseCode,
+            ...jsonResp,
+            status: resp.status,
         });
     }
     catch (error) {
+        const errorData = error?.response?.data;
         return errorTransformer({
             statusCode: error.status,
             message: error.message,
             code: error.status || error.statusCode,
+            ...errorData,
         });
     }
+}
+function getAppFiles(body, fileSelectors = []) {
+    const files = {};
+    if (body) {
+        if (fileSelectors.length > 0) {
+            //
+            for (const fileKey of fileSelectors) {
+                files[fileKey] = body[fileKey];
+                delete body[fileKey];
+            }
+        }
+    }
+    return files;
 }
 
-const useDeleteRequest = () => {
+const useDeleteRequest = (deleteOptions) => {
+    const { baseUrl, headers } = deleteOptions ?? {};
     const [requestPath, updateDeletePath] = useState('');
     const [options, setOptions] = useState();
-    const { headers, baseURL, timeout } = useQueryConfig();
-    const query = useQuery([requestPath, {}], () => new Promise((res, rej) => {
-        setTimeout(async () => {
-            const postResponse = await makeRequest({
-                path: requestPath,
-                headers,
-                method: HttpMethod.DELETE,
-                baseURL,
-                timeout,
-            });
-            if (postResponse.status) {
-                res(postResponse);
-            }
-            else {
-                rej(postResponse);
-            }
-        }, 200);
-    }), { ...options });
+    const { API_URL, TIMEOUT } = useEnvironmentVariables();
+    const { getHeaders } = useQueryHeaders();
+    const sendRequest = async (res, rej) => {
+        // get request headers
+        const globalHeaders = getHeaders();
+        const postResponse = await makeRequest({
+            path: requestPath,
+            headers: { ...globalHeaders, ...headers },
+            method: HttpMethod.DELETE,
+            baseURL: baseUrl ?? API_URL,
+            timeout: TIMEOUT,
+        });
+        if (postResponse.status) {
+            res(postResponse);
+        }
+        else {
+            rej(postResponse);
+        }
+    };
+    const query = useQuery([requestPath, {}], () => new Promise((res, rej) => sendRequest(res, rej)), { enabled: false, ...options });
     const updatedPathAsync = async (link) => {
         return updateDeletePath(link);
     };
     const setOptionsAsync = async (fetchOptions) => {
         return setOptions(fetchOptions);
     };
-    const destroy = async (link, deleteOptions) => {
+    const destroy = async (link, internalDeleteOptions) => {
         // set enabled to be true for every delete
-        deleteOptions = deleteOptions ?? {};
-        deleteOptions.enabled = true;
+        internalDeleteOptions = internalDeleteOptions ?? {};
+        internalDeleteOptions.enabled = true;
+        await setOptionsAsync(internalDeleteOptions);
         await updatedPathAsync(link);
-        await setOptionsAsync(deleteOptions);
-        // return query.refetch<TResponse>({
-        //   queryKey: [link, {}],
-        // });
         return query.data;
     };
     return { destroy, ...query };
 };
 
-const useGetRequest = ({ path, load = false, queryOptions, }) => {
+const useGetRequest = ({ path, load = false, queryOptions, keyTracker, baseUrl, headers, }) => {
     const [requestPath, updatePath] = useState(path);
     const [options, setOptions] = useState(queryOptions);
     const [page, setPage] = useState(1);
-    const { headers, baseURL, timeout } = useQueryConfig();
+    const { API_URL, TIMEOUT } = useEnvironmentVariables();
+    const { getHeaders } = useQueryHeaders();
+    let queryClient = useQueryClient();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    queryClient = useMemo(() => queryClient, []);
     const sendRequest = async (res, rej) => {
-        const postResponse = await makeRequest({
-            path: requestPath,
-            headers,
-            baseURL,
-            timeout,
-        });
-        if (postResponse.status) {
-            res(postResponse);
+        if (load) {
+            // get request headers
+            const globalHeaders = getHeaders();
+            const getResponse = await makeRequest({
+                path: requestPath,
+                headers: { ...globalHeaders, ...headers },
+                baseURL: baseUrl ?? API_URL,
+                timeout: TIMEOUT,
+            });
+            if (getResponse.status) {
+                res(getResponse);
+            }
+            else {
+                rej(getResponse);
+            }
         }
         else {
-            rej(postResponse);
+            res(null);
         }
     };
-    const query = useQuery([requestPath, {}], () => new Promise((res, rej) => {
-        return sendRequest(res, rej);
-    }), {
+    const query = useQuery([requestPath, {}], () => new Promise((res, rej) => sendRequest(res, rej)), {
         enabled: load,
         ...options,
     });
@@ -219,11 +470,20 @@ const useGetRequest = ({ path, load = false, queryOptions, }) => {
             updatePath(path);
         }
     }, [path]);
+    useEffect(() => {
+        if (keyTracker) {
+            // set expiration time for the tracker
+            queryClient.setQueryDefaults([keyTracker], {
+                cacheTime: Infinity,
+                staleTime: Infinity,
+            });
+            queryClient.setQueryData([keyTracker], [requestPath, {}]);
+        }
+    }, [keyTracker, requestPath, queryClient, queryOptions?.staleTime]);
     const nextPage = () => {
         if (query.data?.data.pagination) {
             const pagination = query.data.data.pagination;
-            if (pagination.next_page !== pagination.current_page &&
-                pagination.next_page > pagination.current_page) {
+            if (pagination.next_page !== pagination.current_page && pagination.next_page > pagination.current_page) {
                 updatePath(constructPaginationLink(requestPath, pagination.next_page));
             }
         }
@@ -231,17 +491,15 @@ const useGetRequest = ({ path, load = false, queryOptions, }) => {
     const prevPage = () => {
         if (query.data?.data.pagination) {
             const pagination = query.data.data.pagination;
-            if (pagination.previous_page !== pagination.current_page &&
-                pagination.previous_page < pagination.current_page) {
+            if (pagination.previous_page !== pagination.current_page && pagination.previous_page < pagination.current_page) {
                 updatePath(constructPaginationLink(requestPath, pagination.previous_page));
             }
         }
     };
     const constructPaginationLink = (link, pageNumber) => {
-        const oldParams = new URLSearchParams(link);
-        const oldPage = Number(oldParams.get('page'));
-        const [pathname, queryStrings] = link.split('?', 1);
-        const queryParams = new URLSearchParams(queryStrings ?? '');
+        const [pathname, queryString] = link.split('?');
+        const queryParams = new URLSearchParams(queryString);
+        const oldPage = Number(queryParams.get('page'));
         queryParams.set('page', pageNumber);
         link = pathname + '?' + queryParams.toString();
         // only update page when pagination number changed
@@ -280,75 +538,91 @@ const useGetRequest = ({ path, load = false, queryOptions, }) => {
     };
 };
 
-const usePatchRequest = ({ path, }) => {
-    const { headers, baseURL, timeout } = useQueryConfig();
-    // register post mutation
-    const mutation = useMutation((postData) => new Promise((res, rej) => {
-        makeRequest({
+const usePatchRequest = ({ path, baseUrl, headers }) => {
+    const { API_URL, TIMEOUT } = useEnvironmentVariables();
+    const { getHeaders } = useQueryHeaders();
+    const queryClient = useQueryClient();
+    const config = queryClient.getQueryData(['config']);
+    const sendRequest = async (res, rej, data) => {
+        // get request headers
+        const globalHeaders = getHeaders();
+        const patchResponse = await makeRequest({
             path: path,
-            body: postData,
+            body: data,
             method: HttpMethod.PATCH,
-            headers,
-            baseURL,
-            timeout,
-        }).then((postResponse) => {
-            if (postResponse.status) {
-                // scroll to top after success
+            headers: { ...globalHeaders, ...headers },
+            baseURL: baseUrl ?? API_URL,
+            timeout: TIMEOUT,
+        });
+        if (patchResponse.status) {
+            // scroll to top after success
+            if (config?.options?.context !== 'app') {
                 scrollToTop();
-                res(postResponse);
             }
-            else {
-                // scroll to top after error
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth',
-                });
-                rej(postResponse);
+            res(patchResponse);
+        }
+        else {
+            // scroll to top after error
+            if (config?.options?.context !== 'app') {
+                scrollToTop();
             }
-        });
+            rej(patchResponse);
+        }
+    };
+    // register post mutation
+    const mutation = useMutation((dataData) => new Promise((res, rej) => {
+        return sendRequest(res, rej, dataData);
     }));
-    const patch = async (postData, options) => {
-        return mutation.mutateAsync(postData, options);
+    const patch = async (data, options) => {
+        return mutation.mutateAsync(data, options);
     };
     return { patch, ...mutation };
 };
 
-const usePostRequest = ({ path, isFormData = false, }) => {
-    const { headers, baseURL, timeout } = useQueryConfig();
-    // register post mutation
-    const mutation = useMutation(async (postData) => new Promise((res, rej) => {
-        makeRequest({
-            path: path,
+const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelectors, }) => {
+    const { API_URL, TIMEOUT } = useEnvironmentVariables();
+    const queryClient = useQueryClient();
+    const { getHeaders } = useQueryHeaders();
+    const { isApp } = useReactNativeEnv();
+    const sendRequest = async (res, rej, postData) => {
+        // get request headers
+        const globalHeaders = getHeaders();
+        const config = queryClient.getQueryData(['config']);
+        const postResponse = await makeRequest({
+            path,
             body: postData,
             method: HttpMethod.POST,
             isFormData,
-            headers,
-            baseURL,
-            timeout,
-        }).then((postResponse) => {
-            if (postResponse.status) {
-                // scroll to top after success
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth',
-                });
-                res(postResponse);
+            headers: { ...globalHeaders, ...headers },
+            baseURL: baseUrl ?? API_URL,
+            timeout: TIMEOUT,
+            appFileConfig: {
+                isApp,
+                fileSelectors,
+            },
+        });
+        if (postResponse.status) {
+            // scroll to top after success
+            if (config?.options?.context !== 'app') {
+                scrollToTop();
             }
-            else {
-                // scroll to top after error
-                window.scrollTo({
-                    top: 0,
-                    behavior: 'smooth',
-                });
-                rej(postResponse);
+            res(postResponse);
+        }
+        else {
+            // scroll to top after error
+            if (config?.options?.context !== 'app') {
+                scrollToTop();
             }
-        });
-    }));
-    const post = async (postData, options) => {
-        return mutation.mutateAsync(postData, options);
+            rej(postResponse);
+        }
+    };
+    // register post mutation
+    const mutation = useMutation(async (postData) => new Promise((res, rej) => sendRequest(res, rej, postData)));
+    const post = async (data, options) => {
+        return mutation.mutateAsync(data, options);
     };
     return { post, ...mutation };
 };
 
-export { ContentType, HttpMethod, axiosInstance, buildFormData, errorTransformer, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useGetRequest, usePatchRequest, usePostRequest, useQueryBaseURL, useQueryConfig, useQueryHeaders, useQueryModel, useQueryTimeout };
+export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, getDateInFuture, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery };
 //# sourceMappingURL=index.mjs.map