@ventlio/tanstack-query 0.2.63 → 0.2.65

package/dist/config/bootstrapQueryRequest.d.ts

@@ -1,3 +1,3 @@
 import type { QueryClient } from '@tanstack/react-query';
-import type { BootstrapQueryRequest } from '../types';
-export declare const bootstrapQueryRequest: (queryClient: QueryClient, options?: BootstrapQueryRequest) => void;
+import type { BootstrapConfig } from '../types';
+export declare const bootstrapQueryRequest: (queryClient: QueryClient, options?: BootstrapConfig) => void;

package/dist/config/bootstrapQueryRequest.js

@@ -4,7 +4,7 @@ const bootstrapQueryRequest = (queryClient, options) => {
         staleTime: Infinity,
         cacheTime: Infinity,
     });
-    // set default query confg
+    // set default query config
     queryClient.setQueryData(['config'], {
         headers: {
             Authorization: ``,

package/dist/config/useEnvironmentVariables.js

@@ -2,8 +2,8 @@ import { useReactNativeEnv } from './useReactNativeEnv.js';
 
 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;
+    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),

package/dist/config/useReactNativeEnv.d.ts

@@ -1,4 +1,5 @@
 export declare const useReactNativeEnv: () => {
     appUrl: string | undefined;
     appTimeout: number | undefined;
+    isApp: boolean;
 };

package/dist/config/useReactNativeEnv.js

@@ -1,23 +1,12 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { useState, useEffect } from 'react';
 
 const useReactNativeEnv = () => {
     const queryClient = useQueryClient();
-    const [appUrl, setAppUrl] = useState(undefined);
-    const [appTimeout, setAppTimeout] = useState();
-    useEffect(() => {
-        const config = queryClient.getQueryData(['config']);
-        const loadReactNativeEnvIfNeeded = async () => {
-            if (config?.options?.context === 'app') {
-                const API_URL = config.options.environments?.appBaseUrl;
-                const API_TIMEOUT = config.options.environments?.appTimeout;
-                setAppUrl(API_URL);
-                setAppTimeout(API_TIMEOUT);
-            }
-        };
-        loadReactNativeEnvIfNeeded();
-    }, [queryClient]);
-    return { appUrl, appTimeout };
+    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 };
 };
 
 export { useReactNativeEnv };

package/dist/config/useReactNativeEnv.js.map

@@ -1 +1 @@
-{"version":3,"file":"useReactNativeEnv.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"useReactNativeEnv.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/index.mjs

@@ -1,5 +1,7 @@
 import { useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
-import { useState, useEffect, useMemo, startTransition } from 'react';
+import result from 'lodash.result';
+import set from 'lodash.set';
+import { useState, useMemo, useEffect, startTransition } from 'react';
 import axios from 'axios';
 
 const bootstrapQueryRequest = (queryClient, options) => {
@@ -8,7 +10,7 @@ const bootstrapQueryRequest = (queryClient, options) => {
         staleTime: Infinity,
         cacheTime: Infinity,
     });
-    // set default query confg
+    // set default query config
     queryClient.setQueryData(['config'], {
         headers: {
             Authorization: ``,
@@ -19,27 +21,17 @@ const bootstrapQueryRequest = (queryClient, options) => {
 
 const useReactNativeEnv = () => {
     const queryClient = useQueryClient();
-    const [appUrl, setAppUrl] = useState(undefined);
-    const [appTimeout, setAppTimeout] = useState();
-    useEffect(() => {
-        const config = queryClient.getQueryData(['config']);
-        const loadReactNativeEnvIfNeeded = async () => {
-            if (config?.options?.context === 'app') {
-                const API_URL = config.options.environments?.appBaseUrl;
-                const API_TIMEOUT = config.options.environments?.appTimeout;
-                setAppUrl(API_URL);
-                setAppTimeout(API_TIMEOUT);
-            }
-        };
-        loadReactNativeEnvIfNeeded();
-    }, [queryClient]);
-    return { appUrl, appTimeout };
+    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;
+    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),
@@ -107,9 +99,106 @@ const useKeyTrackerModel = (keyTracker) => {
     return { refetchQuery, getQueryKey };
 };
 
-const useQueryModel = (queryKey, filters) => {
+const useQueryModel = (keyTracker, exact = true) => {
     const queryClient = useQueryClient();
-    return queryClient.getQueryData(queryKey, filters);
+    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, set(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 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, set(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, set(queryData, path, newData));
+        }
+        return updated;
+    };
+    return { find, findAll, findMany, remove, update, add };
 };
 
 const useRefetchQuery = async (queryKey) => {
@@ -209,20 +298,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 {
-        delete headers['Content-Type'];
+        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,
@@ -250,6 +360,19 @@ async function makeRequest({ body, method = HttpMethod.GET, path, isFormData, he
             ...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 = (deleteOptions) => {
@@ -287,7 +410,7 @@ const useDeleteRequest = (deleteOptions) => {
         internalDeleteOptions = internalDeleteOptions ?? {};
         internalDeleteOptions.enabled = true;
         await updatedPathAsync(link);
-        await setOptionsAsync(deleteOptions);
+        await setOptionsAsync(internalDeleteOptions);
         return query.data;
     };
     return { destroy, ...query };
@@ -430,10 +553,11 @@ const usePatchRequest = ({ path, baseUrl, headers }) => {
     return { patch, ...mutation };
 };
 
-const usePostRequest = ({ path, isFormData = false, baseUrl, headers, }) => {
+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();
@@ -446,6 +570,10 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, }) => {
             headers: { ...globalHeaders, ...headers },
             baseURL: baseUrl ?? API_URL,
             timeout: TIMEOUT,
+            appFileConfig: {
+                isApp,
+                fileSelectors,
+            },
         });
         if (postResponse.status) {
             // scroll to top after success

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/model/index.d.ts

@@ -1,3 +1,4 @@
+export * from './model.interface';
 export * from './useKeyTrackerModel';
 export * from './useQueryModel';
 export * from './useRefetchQuery';

package/dist/model/model.interface.d.ts

@@ -0,0 +1,9 @@
+export interface QueryModelBuilder<T> {
+    add: (data: T, position?: QueryModelAddPosition, path?: string) => T | undefined;
+    findAll: (path?: string) => T[] | undefined;
+    findMany: (selector: (record: T) => boolean, path?: string) => T[];
+    find: (id: number | string, path?: string) => T | undefined;
+    update: (id: number | string, data: Partial<T>, path?: string) => T | undefined;
+    remove: (id: number, path?: string) => boolean;
+}
+export type QueryModelAddPosition = 'start' | 'end';

package/dist/model/useQueryModel.d.ts

@@ -1,2 +1,2 @@
-import type { QueryFilters } from '@tanstack/react-query';
-export declare const useQueryModel: (queryKey: any[], filters?: QueryFilters | undefined) => unknown;
+import type { QueryModelBuilder } from './model.interface';
+export declare const useQueryModel: <T>(keyTracker: string, exact?: boolean) => QueryModelBuilder<T>;

package/dist/model/useQueryModel.js

@@ -1,8 +1,108 @@
 import { useQueryClient } from '@tanstack/react-query';
+import result from 'lodash.result';
+import set from 'lodash.set';
+import { useKeyTrackerModel } from './useKeyTrackerModel.js';
 
-const useQueryModel = (queryKey, filters) => {
+const useQueryModel = (keyTracker, exact = true) => {
     const queryClient = useQueryClient();
-    return queryClient.getQueryData(queryKey, filters);
+    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, set(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 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, set(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, set(queryData, path, newData));
+        }
+        return updated;
+    };
+    return { find, findAll, findMany, remove, update, add };
 };
 
 export { useQueryModel };

package/dist/model/useQueryModel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useQueryModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"useQueryModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/queries/useDeleteRequest.js

@@ -41,7 +41,7 @@ const useDeleteRequest = (deleteOptions) => {
         internalDeleteOptions = internalDeleteOptions ?? {};
         internalDeleteOptions.enabled = true;
         await updatedPathAsync(link);
-        await setOptionsAsync(deleteOptions);
+        await setOptionsAsync(internalDeleteOptions);
         return query.data;
     };
     return { destroy, ...query };

package/dist/queries/usePatchRequest.js

@@ -1,7 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
 import { useQueryHeaders } from '../config/useQueryHeaders.js';
-import 'react';
 import { scrollToTop } from '../helpers/scrollToTop.js';
 import 'axios';
 import { makeRequest } from '../request/make-request.js';

package/dist/queries/usePatchRequest.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePatchRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"usePatchRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/queries/usePostRequest.d.ts

@@ -1,9 +1,10 @@
 import type { MutateOptions } from '@tanstack/react-query';
 import type { IRequestError, IRequestSuccess } from '../request';
 import type { DefaultRequestOptions } from './queries.interface';
-export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, headers, }: {
+export declare const usePostRequest: <TResponse>({ path, isFormData, baseUrl, headers, fileSelectors, }: {
     path: string;
     isFormData?: boolean | undefined;
+    fileSelectors?: string[] | undefined;
 } & DefaultRequestOptions) => {
     data: undefined;
     error: null;

package/dist/queries/usePostRequest.js

@@ -1,16 +1,17 @@
 import { useQueryClient, useMutation } from '@tanstack/react-query';
 import { useEnvironmentVariables } from '../config/useEnvironmentVariables.js';
 import { useQueryHeaders } from '../config/useQueryHeaders.js';
-import 'react';
+import { useReactNativeEnv } from '../config/useReactNativeEnv.js';
 import { scrollToTop } from '../helpers/scrollToTop.js';
 import 'axios';
 import { makeRequest } from '../request/make-request.js';
 import { HttpMethod } from '../request/request.enum.js';
 
-const usePostRequest = ({ path, isFormData = false, baseUrl, headers, }) => {
+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();
@@ -23,6 +24,10 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, }) => {
             headers: { ...globalHeaders, ...headers },
             baseURL: baseUrl ?? API_URL,
             timeout: TIMEOUT,
+            appFileConfig: {
+                isApp,
+                fileSelectors,
+            },
         });
         if (postResponse.status) {
             // scroll to top after success

package/dist/queries/usePostRequest.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePostRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"usePostRequest.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/request/make-request.d.ts

@@ -1,2 +1,2 @@
 import type { IMakeRequest } from './request.interface';
-export declare function makeRequest<TResponse>({ body, method, path, isFormData, headers, baseURL, timeout, }: IMakeRequest): Promise<import("./request.interface").IRequestError>;
+export declare function makeRequest<TResponse>({ body, method, path, isFormData, headers, baseURL, timeout, appFileConfig, }: IMakeRequest): Promise<import("./request.interface").IRequestError>;

package/dist/request/make-request.js

@@ -1,22 +1,43 @@
+import axios from 'axios';
 import { axiosInstance } from './axios-instance.js';
-import { buildFormData } from './buildFormData.js';
 import { ContentType, HttpMethod } from './request.enum.js';
 import { errorTransformer, successTransformer } from './transformer.js';
 
-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 {
-        delete headers['Content-Type'];
+        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,
@@ -44,6 +65,19 @@ async function makeRequest({ body, method = HttpMethod.GET, path, isFormData, he
             ...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;
 }
 
 export { makeRequest };

package/dist/request/make-request.js.map

@@ -1 +1 @@
-{"version":3,"file":"make-request.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"make-request.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/request/request.interface.d.ts

@@ -8,6 +8,11 @@ export interface IMakeRequest {
     method?: HttpMethod;
     isFormData?: boolean;
     headers: RawAxiosRequestHeaders;
+    appFileConfig?: AppFileConfig;
+}
+export interface AppFileConfig {
+    fileSelectors?: string[];
+    isApp: boolean;
 }
 export interface AxiosInstanceOption {
     bearerToken?: string;

package/dist/types/index.d.ts

@@ -1,14 +1,19 @@
 import type { RawAxiosRequestHeaders } from 'axios';
-export interface BootstrapQueryRequest {
+export interface BootstrapConfig {
     environments?: {
         appBaseUrl: string;
         appTimeout: number;
     };
-    context?: 'app' | 'web' | 'electronjs';
+    context?: ContextType;
+    modelConfig?: BootstrapModelConfig;
 }
+export interface BootstrapModelConfig {
+    idColumn: string;
+}
+export type ContextType = 'app' | 'web' | 'electronjs';
 export interface TanstackQueryConfig {
     headers: RawAxiosRequestHeaders;
-    options?: BootstrapQueryRequest;
+    options?: BootstrapConfig;
 }
 export interface IUseQueryHeaders {
     getHeaders: () => TanstackQueryConfig['headers'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ventlio/tanstack-query",
-  "version": "0.2.63",
+  "version": "0.2.65",
   "license": "MIT",
   "main": "dist/index.js",
   "contributors": [
@@ -51,6 +51,8 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/axios": "^0.14.0",
     "@types/jest": "^29.5.1",
+    "@types/lodash.result": "^4.5.7",
+    "@types/lodash.set": "^4.3.7",
     "@types/node": "*",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
@@ -82,5 +84,9 @@
   "files": [
     "dist/**/*",
     "src"
-  ]
+  ],
+  "dependencies": {
+    "lodash.result": "^4.5.2",
+    "lodash.set": "^4.3.2"
+  }
 }

package/src/config/bootstrapQueryRequest.ts

@@ -1,14 +1,14 @@
 import type { QueryClient } from '@tanstack/react-query';
-import type { BootstrapQueryRequest, TanstackQueryConfig } from '../types';
+import type { BootstrapConfig, TanstackQueryConfig } from '../types';
 
-export const bootstrapQueryRequest = (queryClient: QueryClient, options?: BootstrapQueryRequest): void => {
+export const bootstrapQueryRequest = (queryClient: QueryClient, options?: BootstrapConfig): void => {
   // make query config doesn't expire
   queryClient.setQueryDefaults(['config'], {
     staleTime: Infinity,
     cacheTime: Infinity,
   });
 
-  // set default query confg
+  // set default query config
   queryClient.setQueryData<TanstackQueryConfig>(['config'], {
     headers: {
       Authorization: ``,

package/src/config/useEnvironmentVariables.ts

@@ -3,8 +3,8 @@ import { useReactNativeEnv } from './useReactNativeEnv';
 
 export const useEnvironmentVariables = (): IConfig => {
   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;
+  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 as string,

package/src/config/useReactNativeEnv.ts

@@ -1,28 +1,13 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
 import type { TanstackQueryConfig } from '../types';
 
 export const useReactNativeEnv = () => {
   const queryClient = useQueryClient();
+  const config = queryClient.getQueryData<TanstackQueryConfig>(['config']);
 
-  const [appUrl, setAppUrl] = useState<string | undefined>(undefined);
-  const [appTimeout, setAppTimeout] = useState<number | undefined>();
+  const appUrl: string | undefined = config?.options?.environments?.appBaseUrl;
+  const appTimeout: number | undefined = config?.options?.environments?.appTimeout;
+  const isApp = config?.options?.context === 'app';
 
-  useEffect(() => {
-    const config = queryClient.getQueryData<TanstackQueryConfig>(['config']);
-
-    const loadReactNativeEnvIfNeeded = async () => {
-      if (config?.options?.context === 'app') {
-        const API_URL = config.options.environments?.appBaseUrl;
-        const API_TIMEOUT = config.options.environments?.appTimeout;
-
-        setAppUrl(API_URL);
-        setAppTimeout(API_TIMEOUT);
-      }
-    };
-
-    loadReactNativeEnvIfNeeded();
-  }, [queryClient]);
-
-  return { appUrl, appTimeout };
+  return { appUrl, appTimeout, isApp };
 };

package/src/model/index.ts

@@ -1,3 +1,4 @@
+export * from './model.interface';
 export * from './useKeyTrackerModel';
 export * from './useQueryModel';
 export * from './useRefetchQuery';

package/src/model/model.interface.ts

@@ -0,0 +1,10 @@
+export interface QueryModelBuilder<T> {
+  add: (data: T, position?: QueryModelAddPosition, path?: string) => T | undefined;
+  findAll: (path?: string) => T[] | undefined;
+  findMany: (selector: (record: T) => boolean, path?: string) => T[];
+  find: (id: number | string, path?: string) => T | undefined;
+  update: (id: number | string, data: Partial<T>, path?: string) => T | undefined;
+  remove: (id: number, path?: string) => boolean;
+}
+
+export type QueryModelAddPosition = 'start' | 'end';

package/src/model/useQueryModel.ts

@@ -1,8 +1,128 @@
-import type { QueryFilters } from '@tanstack/react-query';
 import { useQueryClient } from '@tanstack/react-query';
+import result from 'lodash.result';
+import set from 'lodash.set';
+import type { TanstackQueryConfig } from '../types';
+import type { QueryModelAddPosition, QueryModelBuilder } from './model.interface';
+import { useKeyTrackerModel } from './useKeyTrackerModel';
 
-export const useQueryModel = (queryKey: any[], filters?: QueryFilters | undefined) => {
+export const useQueryModel = <T>(keyTracker: string, exact: boolean = true): QueryModelBuilder<T> => {
   const queryClient = useQueryClient();
+  const { getQueryKey } = useKeyTrackerModel(keyTracker);
+  const queryKey = getQueryKey() as any[];
 
-  return queryClient.getQueryData(queryKey, filters);
+  const add = (data: T, position?: QueryModelAddPosition, path?: string): T | undefined => {
+    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, set(queryData, path, records));
+    }
+
+    return data;
+  };
+
+  const findAll = (path?: string): T[] | undefined => {
+    const data = queryClient.getQueryData(queryKey, { exact });
+
+    if (!data) {
+      return [];
+    }
+
+    if (!path) {
+      return Array.isArray(data) ? data : [data];
+    }
+
+    return result<T[]>(data, path, []);
+  };
+
+  const findMany = (selector: (record: T) => boolean, path?: string): T[] => {
+    const data = findAll(path) ?? [];
+    return data.filter(selector);
+  };
+
+  const find = (id: string | number, path?: string): T | undefined => {
+    const modelConfig = getModelConfig();
+
+    if (!modelConfig?.idColumn) {
+      return undefined;
+    }
+    const data = findAll(path) ?? [];
+
+    return data.find((record) => (record as Record<string, any>)[modelConfig.idColumn] === id);
+  };
+
+  const getModelConfig = () => {
+    const { options } = queryClient.getQueryData<TanstackQueryConfig>(['config']) ?? {};
+    const { modelConfig } = options ?? {};
+
+    return modelConfig;
+  };
+
+  const update = (id: string | number, data: Partial<T>, path?: string): T | undefined => {
+    const oldData = findAll(path) ?? [];
+    const modelConfig = getModelConfig();
+
+    if (!modelConfig?.idColumn) {
+      return undefined;
+    }
+    const idColumn = modelConfig.idColumn;
+
+    let updatedRecord: T | undefined = undefined;
+    const newData = oldData.map((record) => {
+      let dataRecord = record as Record<string, any>;
+
+      if (dataRecord[idColumn] === id) {
+        dataRecord = { ...dataRecord, ...data };
+        updatedRecord = dataRecord as T;
+      }
+
+      return dataRecord;
+    });
+
+    if (!path) {
+      queryClient.setQueryData(queryKey, newData);
+    } else {
+      const queryData = queryClient.getQueryData(queryKey, { exact }) ?? {};
+      queryClient.setQueryData(queryKey, set(queryData, path, newData));
+    }
+    return updatedRecord;
+  };
+
+  const remove = (id: number | string, path?: string): boolean => {
+    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 as Record<string, any>;
+      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, set(queryData, path, newData));
+    }
+    return updated;
+  };
+
+  return { find, findAll, findMany, remove, update, add };
 };

package/src/queries/useDeleteRequest.ts

@@ -63,7 +63,7 @@ export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOption
     internalDeleteOptions.enabled = true;
 
     await updatedPathAsync(link);
-    await setOptionsAsync(deleteOptions);
+    await setOptionsAsync(internalDeleteOptions);
 
     return query.data;
   };

package/src/queries/usePostRequest.ts

@@ -1,6 +1,6 @@
 import type { MutateOptions } from '@tanstack/react-query';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useEnvironmentVariables, useQueryHeaders } from '../config';
+import { useEnvironmentVariables, useQueryHeaders, useReactNativeEnv } from '../config';
 
 import type { RawAxiosRequestHeaders } from 'axios';
 import { scrollToTop } from '../helpers';
@@ -14,14 +14,16 @@ export const usePostRequest = <TResponse>({
   isFormData = false,
   baseUrl,
   headers,
+  fileSelectors,
 }: {
   path: string;
   isFormData?: boolean;
+  fileSelectors?: string[];
 } & DefaultRequestOptions) => {
   const { API_URL, TIMEOUT } = useEnvironmentVariables();
   const queryClient = useQueryClient();
   const { getHeaders } = useQueryHeaders();
-
+  const { isApp } = useReactNativeEnv();
   const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, postData: any) => {
     // get request headers
     const globalHeaders: RawAxiosRequestHeaders = getHeaders();
@@ -35,6 +37,10 @@ export const usePostRequest = <TResponse>({
       headers: { ...globalHeaders, ...headers },
       baseURL: baseUrl ?? API_URL,
       timeout: TIMEOUT,
+      appFileConfig: {
+        isApp,
+        fileSelectors,
+      },
     });
 
     if (postResponse.status) {

package/src/request/make-request.ts

@@ -1,6 +1,6 @@
+import axios from 'axios';
 import { axiosInstance } from './axios-instance';
 
-import { buildFormData } from './buildFormData';
 import { ContentType, HttpMethod } from './request.enum';
 import type { IMakeRequest } from './request.interface';
 import { errorTransformer, successTransformer } from './transformer';
@@ -13,22 +13,43 @@ export async function makeRequest<TResponse>({
   headers = {},
   baseURL,
   timeout,
+  appFileConfig,
 }: IMakeRequest) {
+  // 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: Record<string, string> = isApp ? getAppFiles(body, appFileConfig.fileSelectors) : {};
+
   // configure body
-  body = isFormData ? buildFormData(body as Record<string, any>) : body;
+  body = (isFormData ? axios.toFormData(body as FormData) : body) as FormData;
 
-  // configure request header
+  // configure request header1
   if (!isFormData) {
     headers['Content-Type'] = ContentType.APPLICATION_JSON;
   } else {
-    delete headers['Content-Type'];
+    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,
@@ -60,3 +81,18 @@ export async function makeRequest<TResponse>({
     });
   }
 }
+function getAppFiles(body: any, fileSelectors: string[] = []) {
+  const files: Record<string, string> = {};
+
+  if (body) {
+    if (fileSelectors.length > 0) {
+      //
+      for (const fileKey of fileSelectors) {
+        files[fileKey] = body[fileKey];
+        delete body[fileKey];
+      }
+    }
+  }
+
+  return files;
+}

package/src/request/request.interface.ts

@@ -9,8 +9,13 @@ export interface IMakeRequest {
   method?: HttpMethod;
   isFormData?: boolean;
   headers: RawAxiosRequestHeaders;
+  appFileConfig?: AppFileConfig;
 }
 
+export interface AppFileConfig {
+  fileSelectors?: string[];
+  isApp: boolean;
+}
 export interface AxiosInstanceOption {
   bearerToken?: string;
   contentType?: string;

package/src/types/index.ts

@@ -1,16 +1,22 @@
 import type { RawAxiosRequestHeaders } from 'axios';
 
-export interface BootstrapQueryRequest {
+export interface BootstrapConfig {
   environments?: {
     appBaseUrl: string;
     appTimeout: number;
   };
-  context?: 'app' | 'web' | 'electronjs';
+  context?: ContextType;
+  modelConfig?: BootstrapModelConfig;
 }
 
+export interface BootstrapModelConfig {
+  idColumn: string;
+}
+
+export type ContextType = 'app' | 'web' | 'electronjs';
 export interface TanstackQueryConfig {
   headers: RawAxiosRequestHeaders;
-  options?: BootstrapQueryRequest;
+  options?: BootstrapConfig;
 }
 
 export interface IUseQueryHeaders {