@ventlio/tanstack-query 0.2.5 → 0.2.7-2.1

package/src/queries/useGetRequest.ts

@@ -1,54 +1,68 @@
 import type { UseQueryOptions } from '@tanstack/react-query';
-import { useQuery } from '@tanstack/react-query';
-import { startTransition, useEffect, useState } from 'react';
-import { useQueryConfig } from '../config';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { startTransition, useEffect, useMemo, useState } from 'react';
+import type { RawAxiosRequestHeaders } from '../../node_modules/axios/index';
+import { useEnvironmentVariables, useQueryHeaders } from '../config';
+
 import type { IRequestError, IRequestSuccess } from '../request';
 import { makeRequest } from '../request';
-import type { IPagination, TanstackQueryOption } from './queries.interface';
+import type { DefaultRequestOptions, IPagination, TanstackQueryOption } from './queries.interface';
 
 export const useGetRequest = <TResponse extends Record<string, any>>({
   path,
   load = false,
   queryOptions,
+  keyTracker,
+  baseUrl,
+  headers,
 }: {
   path: string;
   load?: boolean;
   queryOptions?: TanstackQueryOption<TResponse>;
-}) => {
+  keyTracker?: string;
+} & DefaultRequestOptions) => {
   const [requestPath, updatePath] = useState<string>(path);
   const [options, setOptions] = useState<any>(queryOptions);
   const [page, setPage] = useState<number>(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: (
-      value:
-        | IRequestError
-        | IRequestSuccess<TResponse>
-        | PromiseLike<IRequestError | IRequestSuccess<TResponse>>
+      value: IRequestError | IRequestSuccess<TResponse> | PromiseLike<IRequestError | IRequestSuccess<TResponse>>
     ) => void,
     rej: (reason?: any) => void
   ) => {
-    const postResponse = await makeRequest<TResponse>({
-      path: requestPath,
-      headers,
-      baseURL,
-      timeout,
-    });
-    if (postResponse.status) {
-      res(postResponse as IRequestSuccess<TResponse>);
+    if (load) {
+      // get request headers
+      const globalHeaders: RawAxiosRequestHeaders = getHeaders();
+
+      const getResponse = await makeRequest<TResponse>({
+        path: requestPath,
+        headers: { ...globalHeaders, ...headers },
+        baseURL: baseUrl ?? API_URL,
+        timeout: TIMEOUT,
+      });
+
+      if (getResponse.status) {
+        res(getResponse as IRequestSuccess<TResponse>);
+      } else {
+        rej(getResponse);
+      }
     } else {
-      rej(postResponse);
+      res(null as any);
     }
   };
 
   const query = useQuery<any, any, IRequestSuccess<TResponse>>(
     [requestPath, {}],
-    () =>
-      new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => {
-        return sendRequest(res, rej);
-      }),
+    () => new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => sendRequest(res, rej)),
     {
       enabled: load,
       ...options,
@@ -61,13 +75,22 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
     }
   }, [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: IPagination = 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));
       }
     }
@@ -76,23 +99,17 @@ export const useGetRequest = <TResponse extends Record<string, any>>({
   const prevPage = () => {
     if (query.data?.data.pagination) {
       const pagination: IPagination = query.data.data.pagination;
-      if (
-        pagination.previous_page !== pagination.current_page &&
-        pagination.previous_page < pagination.current_page
-      ) {
-        updatePath(
-          constructPaginationLink(requestPath, pagination.previous_page)
-        );
+      if (pagination.previous_page !== pagination.current_page && pagination.previous_page < pagination.current_page) {
+        updatePath(constructPaginationLink(requestPath, pagination.previous_page));
       }
     }
   };
 
   const constructPaginationLink = (link: string, pageNumber: number) => {
-    const oldParams = new URLSearchParams(link);
-    const oldPage = Number(oldParams.get('page'));
+    const [pathname, queryString] = link.split('?');
+    const queryParams = new URLSearchParams(queryString);
 
-    const [pathname, queryStrings] = link.split('?', 1);
-    const queryParams = new URLSearchParams(queryStrings ?? '');
+    const oldPage = Number(queryParams.get('page'));
 
     queryParams.set('page', pageNumber as any);
 

package/src/queries/usePatchRequest.ts

@@ -1,57 +1,62 @@
 import type { MutateOptions } from '@tanstack/react-query';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import type { RawAxiosRequestHeaders } from 'axios';
+import { useEnvironmentVariables, useQueryHeaders } from '../config';
 import { scrollToTop } from '../helpers';
 import { HttpMethod, makeRequest } from '../request';
+import type { IRequestError, IRequestSuccess } from '../request/request.interface';
+import type { TanstackQueryConfig } from '../types';
+import type { DefaultRequestOptions } from './queries.interface';
 
-import { useQueryConfig } from '../config';
-import type {
-  IRequestError,
-  IRequestSuccess,
-} from '../request/request.interface';
+export const usePatchRequest = <TResponse>({ path, baseUrl, headers }: { path: string } & DefaultRequestOptions) => {
+  const { API_URL, TIMEOUT } = useEnvironmentVariables();
 
-export const usePatchRequest = <TResponse>({
-  path,
-}: {
-  path: string;
-  isFormData?: boolean;
-}) => {
-  const { headers, baseURL, timeout } = useQueryConfig();
+  const { getHeaders } = useQueryHeaders();
+  const queryClient = useQueryClient();
+
+  const config = queryClient.getQueryData<TanstackQueryConfig>(['config']);
+
+  const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void, data: any) => {
+    // get request headers
+    const globalHeaders: RawAxiosRequestHeaders = getHeaders();
+
+    const patchResponse = await makeRequest<TResponse>({
+      path: path,
+      body: data,
+      method: HttpMethod.PATCH,
+      headers: { ...globalHeaders, ...headers },
+      baseURL: baseUrl ?? API_URL,
+      timeout: TIMEOUT,
+    });
+
+    if (patchResponse.status) {
+      // scroll to top after success
+      if (config?.options?.context !== 'app') {
+        scrollToTop();
+      }
+      res(patchResponse as IRequestSuccess<TResponse>);
+    } else {
+      // scroll to top after error
+      if (config?.options?.context !== 'app') {
+        scrollToTop();
+      }
+      rej(patchResponse);
+    }
+  };
 
   // register post mutation
   const mutation = useMutation<IRequestSuccess<TResponse>, IRequestError>(
-    (postData: any) =>
+    (dataData: any) =>
       new Promise<IRequestSuccess<TResponse>>((res, rej) => {
-        makeRequest<TResponse>({
-          path: path,
-          body: postData,
-          method: HttpMethod.PATCH,
-          headers,
-          baseURL,
-          timeout,
-        }).then((postResponse) => {
-          if (postResponse.status) {
-            // scroll to top after success
-            scrollToTop();
-            res(postResponse as IRequestSuccess<TResponse>);
-          } else {
-            // scroll to top after error
-            window.scrollTo({
-              top: 0,
-              behavior: 'smooth',
-            });
-            rej(postResponse);
-          }
-        });
+        return sendRequest(res, rej, dataData);
       })
   );
 
   const patch = async (
-    postData: any,
-    options?:
-      | MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown>
-      | undefined
+    data: any,
+    options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined
   ): Promise<IRequestSuccess<TResponse>> => {
-    return mutation.mutateAsync(postData, options);
+    return mutation.mutateAsync(data, options);
   };
 
   return { patch, ...mutation };

package/src/queries/usePostRequest.ts

@@ -1,56 +1,73 @@
 import type { MutateOptions } from '@tanstack/react-query';
-import { useMutation } from '@tanstack/react-query';
-import { useQueryConfig } from '../config';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useEnvironmentVariables, useQueryHeaders, useReactNativeEnv } from '../config';
+
+import type { RawAxiosRequestHeaders } from 'axios';
+import { scrollToTop } from '../helpers';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
+import type { TanstackQueryConfig } from '../types';
+import type { DefaultRequestOptions } from './queries.interface';
 
 export const usePostRequest = <TResponse>({
   path,
   isFormData = false,
+  baseUrl,
+  headers,
+  fileSelectors,
 }: {
   path: string;
   isFormData?: boolean;
-}) => {
-  const { headers, baseURL, timeout } = useQueryConfig();
+  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();
+    const config = queryClient.getQueryData<TanstackQueryConfig>(['config']);
+
+    const postResponse = await makeRequest<TResponse>({
+      path,
+      body: postData,
+      method: HttpMethod.POST,
+      isFormData,
+      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();
+      }
+      res(postResponse as IRequestSuccess<TResponse>);
+    } else {
+      // scroll to top after error
+      if (config?.options?.context !== 'app') {
+        scrollToTop();
+      }
+      rej(postResponse);
+    }
+  };
 
   // register post mutation
   const mutation = useMutation<IRequestSuccess<TResponse>, IRequestError>(
-    async (postData: any) =>
-      new Promise<IRequestSuccess<TResponse>>((res, rej) => {
-        makeRequest<TResponse>({
-          path: 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 as IRequestSuccess<TResponse>);
-          } else {
-            // scroll to top after error
-            window.scrollTo({
-              top: 0,
-              behavior: 'smooth',
-            });
-            rej(postResponse);
-          }
-        });
-      })
+    async (postData: any) => new Promise<IRequestSuccess<TResponse>>((res, rej) => sendRequest(res, rej, postData))
   );
   const post = async (
-    postData: any,
-    options?:
-      | MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown>
-      | undefined
+    data: any,
+    options?: MutateOptions<IRequestSuccess<TResponse>, IRequestError, void, unknown> | undefined
   ): Promise<IRequestSuccess<TResponse>> => {
-    return mutation.mutateAsync(postData, options);
+    return mutation.mutateAsync(data, options);
   };
 
   return { post, ...mutation };

package/src/request/axios-instance.ts

@@ -2,11 +2,7 @@ import type { AxiosInstance } from 'axios';
 import axios from 'axios';
 import type { IMakeRequest } from './request.interface';
 
-export const axiosInstance = ({
-  baseURL,
-  timeout,
-  headers,
-}: Partial<IMakeRequest>): AxiosInstance => {
+export const axiosInstance = ({ baseURL, timeout, headers }: Partial<IMakeRequest>): AxiosInstance => {
   return axios.create({
     baseURL,
     timeout,

package/src/request/buildFormData.ts

@@ -1,13 +1,43 @@
 export const buildFormData = (body: Record<string, any>) => {
   const formData = new FormData();
 
+  const handleArrayValue = (key: string, value: any) => {
+    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: string, value: any) => {
+    if (value instanceof File) {
+      formData.append(key, value);
+    } else {
+      formData.append(key, JSON.stringify(value));
+    }
+  };
+
+  const handlePrimitiveValue = (key: string, value: any) => {
+    formData.append(key, value);
+  };
+
   const bodyKeys = Object.keys(body);
 
   bodyKeys.forEach((key) => {
-    formData.append(key, body[key]);
-  });
+    const inputValue = body[key];
 
-  body = formData;
+    if (Array.isArray(inputValue) && inputValue.length > 0) {
+      handleArrayValue(key, inputValue);
+    } else if (inputValue instanceof Object) {
+      handleObjectValue(key, inputValue);
+    } else {
+      handlePrimitiveValue(key, inputValue);
+    }
+  });
 
-  return body;
+  return formData;
 };

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,21 +13,43 @@ export async function makeRequest<TResponse>({
   headers = {},
   baseURL,
   timeout,
+  appFileConfig,
 }: IMakeRequest) {
-  // configure body
-  body = isFormData ? buildFormData(body as Record<string, any>) : body;
+  // 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 request header
+  // configure body
+  body = (isFormData ? axios.toFormData(body as FormData) : body) as FormData;
 
+  // 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,
@@ -45,14 +67,32 @@ export async function makeRequest<TResponse>({
     }
 
     return successTransformer<TResponse>({
-      data: jsonResp,
       statusCode: responseCode,
+      ...jsonResp,
+      status: resp.status,
     });
   } catch (error: any) {
+    const errorData = error?.response?.data;
     return errorTransformer({
       statusCode: error.status,
       message: error.message,
       code: error.status || error.statusCode,
+      ...errorData,
     });
   }
 }
+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/request/transformer.ts

@@ -1,14 +1,7 @@
-import type {
-  IRequestError,
-  IRequestSuccess,
-  IServerRequestError,
-  IServerRequestSuccess,
-} from './request.interface';
+import type { IRequestError, IRequestSuccess, IServerRequestError, IServerRequestSuccess } from './request.interface';
 
 //
-export const errorTransformer = (
-  data: IServerRequestError & { statusCode: number }
-): IRequestError => {
+export const errorTransformer = (data: IServerRequestError & { statusCode: number }): IRequestError => {
   return {
     message: data.message,
     statusCode: data.statusCode,
@@ -19,9 +12,7 @@ export const errorTransformer = (
 };
 
 //
-export const successTransformer = <T>(
-  data: IServerRequestSuccess & { statusCode: number }
-): IRequestSuccess<T> => {
+export const successTransformer = <T>(data: IServerRequestSuccess & { statusCode: number }): IRequestSuccess<T> => {
   return {
     message: data.message ?? 'Request successful',
     statusCode: data.statusCode,

package/src/types/index.ts

@@ -1,22 +1,25 @@
 import type { RawAxiosRequestHeaders } from 'axios';
 
-export interface TanstackQueryConfig {
-  baseURL: string;
-  timeout?: number;
-  headers: RawAxiosRequestHeaders;
+export interface BootstrapConfig {
+  environments?: {
+    appBaseUrl: string;
+    appTimeout: number;
+  };
+  context?: ContextType;
+  modelConfig?: BootstrapModelConfig;
 }
 
-export interface IUseQueryHeaders {
-  headers: TanstackQueryConfig['headers'];
-  setQueryHeaders: (header: TanstackQueryConfig['headers']) => void;
+export interface BootstrapModelConfig {
+  idColumn: string;
 }
 
-export interface IUseQueryTimeout {
-  timeout: TanstackQueryConfig['timeout'];
-  setQueryTimeout: (timeout: TanstackQueryConfig['timeout']) => void;
+export type ContextType = 'app' | 'web' | 'electronjs';
+export interface TanstackQueryConfig {
+  headers: RawAxiosRequestHeaders;
+  options?: BootstrapConfig;
 }
 
-export interface IUseQueryBaseURL {
-  baseURL: TanstackQueryConfig['baseURL'];
-  setQueryBaseUrl: (baseURL: TanstackQueryConfig['baseURL']) => void;
+export interface IUseQueryHeaders {
+  getHeaders: () => TanstackQueryConfig['headers'];
+  setQueryHeaders: (header: TanstackQueryConfig['headers']) => void;
 }

package/dist/queries/useQueryConfig.js

@@ -1,14 +0,0 @@
-'use strict';
-
-var reactQuery = require('@tanstack/react-query');
-
-const useQueryConfig = () => {
-    const queryClient = reactQuery.useQueryClient();
-    const { headers, baseURL, timeout } = queryClient.getQueryData([
-        'config',
-    ]);
-    return { headers, baseURL, timeout };
-};
-
-exports.useQueryConfig = useQueryConfig;
-//# sourceMappingURL=useQueryConfig.js.map

package/src/config/useQueryBaseURL.ts

@@ -1,17 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import type { IUseQueryBaseURL, TanstackQueryConfig } from '../types';
-import { useQueryConfig } from './useQueryConfig';
-
-export const useQueryBaseURL = (): IUseQueryBaseURL => {
-  const { baseURL } = useQueryConfig();
-  const queryClient = useQueryClient();
-
-  const setQueryBaseUrl = (newBaseUrl: TanstackQueryConfig['baseURL']) => {
-    queryClient.setQueryData<TanstackQueryConfig>(['config'], (config) => {
-      (config as TanstackQueryConfig).baseURL = newBaseUrl;
-      return config;
-    });
-  };
-
-  return { baseURL, setQueryBaseUrl };
-};

package/src/config/useQueryTimeout.ts

@@ -1,17 +0,0 @@
-import { useQueryClient } from '@tanstack/react-query';
-import type { IUseQueryTimeout, TanstackQueryConfig } from '../types';
-import { useQueryConfig } from './useQueryConfig';
-
-export const useQueryTimeout = (): IUseQueryTimeout => {
-  const { timeout } = useQueryConfig();
-  const queryClient = useQueryClient();
-
-  const setQueryTimeout = (newTimeout: TanstackQueryConfig['timeout']) => {
-    queryClient.setQueryData<TanstackQueryConfig>(['config'], (config) => {
-      (config as TanstackQueryConfig).timeout = newTimeout;
-      return config;
-    });
-  };
-
-  return { timeout, setQueryTimeout };
-};