@ventlio/tanstack-query 0.2.5 → 0.2.7-2.1

package/src/__tests__/queries/usePostRequest.spec.ts

@@ -0,0 +1,77 @@
+import { renderHook } from '@testing-library/react-hooks';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { usePostRequest } from '../../queries';
+
+const mockAxios = new MockAdapter(axios);
+
+describe('usePostRequest', () => {
+  const path = '/test';
+  const postData = { name: 'John Doe' };
+  const response = { id: 123, name: 'John Doe' };
+
+  beforeEach(() => {
+    mockAxios.reset();
+  });
+
+  it('should return post function and mutation object', () => {
+    const { result } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
+
+    expect(result.current.post).toBeInstanceOf(Function);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isSuccess).toBe(false);
+    expect(result.current.isError).toBe(false);
+  });
+
+  it('should make post request and return response data', async () => {
+    mockAxios.onPost(path).reply(200, response);
+
+    const { result, waitForNextUpdate } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
+
+    const responsePromise = result.current.post(postData);
+
+    expect(result.current.isLoading).toBe(true);
+
+    await waitForNextUpdate();
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isSuccess).toBe(true);
+    expect(result.current.data).toEqual(response);
+    expect(await responsePromise).toEqual(response);
+  });
+
+  it('should make post request and return error', async () => {
+    const errorMessage = 'Request failed with status code 500';
+    mockAxios.onPost(path).reply(500, { message: errorMessage });
+
+    const { result, waitForNextUpdate } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path }));
+
+    const responsePromise = result.current.post(postData);
+
+    expect(result.current.isLoading).toBe(true);
+
+    await waitForNextUpdate();
+
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isError).toBe(true);
+    expect(result.current.error?.message).toBe(errorMessage);
+
+    await expect(responsePromise).rejects.toEqual({
+      message: errorMessage,
+    });
+  });
+
+  it('should make post request with FormData', async () => {
+    const formData = new FormData();
+    formData.append('name', 'John Doe');
+    mockAxios.onPost(path).reply(200, response);
+
+    const { result } = renderHook(() => usePostRequest<{ id: number; name: string }>({ path, isFormData: true }));
+
+    const responsePromise = result.current.post(formData);
+
+    expect(result.current.isLoading).toBe(true);
+
+    await expect(responsePromise).resolves.toEqual(response);
+  });
+});

package/src/config/bootstrapQueryRequest.ts

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

package/src/config/config.interface.ts

@@ -0,0 +1,4 @@
+export interface IConfig {
+  API_URL: string;
+  TIMEOUT: number;
+}

package/src/config/index.ts

@@ -1,4 +1,6 @@
-export * from './useQueryBaseURL';
+export * from './bootstrapQueryRequest';
+export * from './config.interface';
+export * from './useEnvironmentVariables';
 export * from './useQueryConfig';
 export * from './useQueryHeaders';
-export * from './useQueryTimeout';
+export * from './useReactNativeEnv';

package/src/config/useEnvironmentVariables.ts

@@ -0,0 +1,13 @@
+import type { IConfig } from './config.interface';
+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;
+
+  return {
+    API_URL: url as string,
+    TIMEOUT: Number(timeout),
+  };
+};

package/src/config/useQueryConfig.ts

@@ -4,10 +4,7 @@ import type { TanstackQueryConfig } from '../types';
 export const useQueryConfig = (): TanstackQueryConfig => {
   const queryClient = useQueryClient();
 
-  const { headers, baseURL, timeout } =
-    queryClient.getQueryData<TanstackQueryConfig>([
-      'config',
-    ]) as TanstackQueryConfig;
+  const { headers = {}, options = {} } = queryClient.getQueryData<TanstackQueryConfig>(['config']) ?? {};
 
-  return { headers, baseURL, timeout };
+  return { headers, options };
 };

package/src/config/useQueryHeaders.ts

@@ -1,17 +1,34 @@
 import { useQueryClient } from '@tanstack/react-query';
+import { getDateInFuture } from '../helpers';
 import type { IUseQueryHeaders, TanstackQueryConfig } from '../types';
-import { useQueryConfig } from './useQueryConfig';
 
 export const useQueryHeaders = (): IUseQueryHeaders => {
-  const { headers } = useQueryConfig();
   const queryClient = useQueryClient();
 
+  const getHeaders = (): TanstackQueryConfig['headers'] => {
+    const config = queryClient.getQueryData(['config']) as TanstackQueryConfig;
+    return config.headers;
+  };
+
   const setQueryHeaders = (newHeaders: TanstackQueryConfig['headers']) => {
-    queryClient.setQueryData<TanstackQueryConfig>(['config'], (config) => {
-      (config as TanstackQueryConfig).headers = newHeaders;
-      return config;
+    // make sure the config does not expire
+    queryClient.setQueryDefaults(['config'], {
+      staleTime: Infinity,
+      cacheTime: Infinity,
     });
+
+    // set the config
+    queryClient.setQueryData<TanstackQueryConfig>(
+      ['config'],
+      (config): TanstackQueryConfig => {
+        const newConfig = { ...config, headers: newHeaders };
+        return newConfig;
+      },
+      {
+        updatedAt: getDateInFuture(2),
+      }
+    );
   };
 
-  return { headers, setQueryHeaders };
+  return { setQueryHeaders, getHeaders };
 };

package/src/config/useReactNativeEnv.ts

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

package/src/env.d.ts

@@ -0,0 +1,4 @@
+declare module '@env' {
+  export const API_URL: string;
+  export const API_TIMEOUT: number;
+}

package/src/helpers/index.ts

@@ -1 +1,2 @@
 export * from './scrollToTop';
+export * from './timeFuncs';

package/src/helpers/timeFuncs.ts

@@ -0,0 +1,10 @@
+export function getDateInFuture(days: number) {
+  // 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();
+}

package/src/model/index.ts

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

package/src/model/model.interface.ts

@@ -0,0 +1,12 @@
+export interface QueryModelBuilder<T> {
+  add: (data: T, position?: QueryModelAddPosition, path?: string) => T | undefined;
+  findAll: (path?: string) => T[] | 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;
+  get: (path?: string) => T | undefined;
+  set: <DataType>(data: Partial<DataType>, path?: string) => DataType | undefined;
+}
+
+export type QueryModelAddPosition = 'start' | 'end';

package/src/model/useKeyTrackerModel.ts

@@ -0,0 +1,22 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+export const useKeyTrackerModel = <T>(keyTracker: string) => {
+  const queryClient = useQueryClient();
+
+  const getQueryKey = (innerKeyTracker?: string) => {
+    const queryKey: any[] | undefined = queryClient.getQueryData([innerKeyTracker ?? keyTracker]);
+
+    return queryKey;
+  };
+
+  const refetchQuery = async (innerKeyTracker?: string) => {
+    const queryKey: any = getQueryKey(innerKeyTracker ?? keyTracker);
+
+    await queryClient.refetchQueries<T>({
+      queryKey,
+      exact: true,
+    });
+  };
+
+  return { refetchQuery, getQueryKey };
+};

package/src/model/useQueryModel.ts

@@ -1,11 +1,144 @@
-import type { QueryFilters } from '@tanstack/react-query';
 import { useQueryClient } from '@tanstack/react-query';
+import result from 'lodash.result';
+import { default as lodashSet } 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) ?? []) as T[];
+
+    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?: string): T[] | 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) ?? []) as T[];
+    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) ?? []) as T[];
+
+    return data.find((record) => (record as Record<string, any>)[modelConfig.idColumn] === id);
+  };
+
+  const get = (path?: string): T | undefined => {
+    let data = queryClient.getQueryData(queryKey, { exact });
+    if (path) {
+      data = result<T>(data, path);
+    }
+    return data as T;
+  };
+
+  const set = <DataType>(newData: Partial<DataType>, path?: string): DataType | undefined => {
+    if (path) {
+      const data = get() as any;
+      newData = lodashSet(data, path, newData);
+    }
+
+    return queryClient.setQueryData(queryKey, newData) as DataType;
+  };
+
+  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) ?? []) as T[];
+    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, lodashSet(queryData, path, newData));
+    }
+    return updatedRecord;
+  };
+
+  const remove = (id: number | string, path?: string): boolean => {
+    const oldData = (findAll(path) ?? []) as T[];
+    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, lodashSet(queryData, path, newData));
+    }
+    return updated;
+  };
+
+  return { find, findAll, findMany, remove, update, add, get, set };
 };

package/src/model/useRefetchQuery.ts

@@ -0,0 +1,19 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+export const useRefetchQuery = async (queryKey: any[]) => {
+  const queryClient = useQueryClient();
+
+  const refetchQuery = async <T>(innerQueryKey?: any[]) => {
+    await queryClient.invalidateQueries(
+      {
+        queryKey: innerQueryKey ?? queryKey,
+        exact: true,
+      },
+      { throwOnError: true, cancelRefetch: true }
+    );
+
+    return queryClient.getQueriesData<T>(innerQueryKey ?? queryKey);
+  };
+
+  return { refetchQuery };
+};

package/src/queries/queries.interface.ts

@@ -1,4 +1,5 @@
 import type { UseQueryOptions } from '@tanstack/react-query';
+import type { RawAxiosRequestHeaders } from 'axios';
 import type { IRequestError, IRequestSuccess } from '../request';
 
 export interface IPagination {
@@ -16,3 +17,8 @@ export type TanstackQueryOption<TResponse> = UseQueryOptions<
   IRequestSuccess<TResponse | undefined>,
   Array<any>
 >;
+
+export interface DefaultRequestOptions {
+  baseUrl?: string;
+  headers?: RawAxiosRequestHeaders;
+}

package/src/queries/useDeleteRequest.ts

@@ -1,36 +1,44 @@
 import type { UseQueryOptions } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
+import type { RawAxiosRequestHeaders } from 'axios';
 import { useState } from 'react';
-import { useQueryConfig } from '../config';
+import { useEnvironmentVariables, useQueryHeaders } from '../config';
 import type { IRequestError, IRequestSuccess } from '../request';
 import { HttpMethod, makeRequest } from '../request';
+import type { DefaultRequestOptions } from './queries.interface';
 
-export const useDeleteRequest = <TResponse>() => {
+export const useDeleteRequest = <TResponse>(deleteOptions?: DefaultRequestOptions) => {
+  const { baseUrl, headers } = deleteOptions ?? {};
   const [requestPath, updateDeletePath] = useState<string>('');
   const [options, setOptions] = useState<any>();
 
-  const { headers, baseURL, timeout } = useQueryConfig();
+  const { API_URL, TIMEOUT } = useEnvironmentVariables();
+
+  const { getHeaders } = useQueryHeaders();
+
+  const sendRequest = async (res: (value: any) => void, rej: (reason?: any) => void) => {
+    // get request headers
+    const globalHeaders: RawAxiosRequestHeaders = getHeaders();
+
+    const postResponse = await makeRequest<TResponse>({
+      path: requestPath,
+      headers: { ...globalHeaders, ...headers },
+      method: HttpMethod.DELETE,
+      baseURL: baseUrl ?? API_URL,
+      timeout: TIMEOUT,
+    });
+
+    if (postResponse.status) {
+      res(postResponse as IRequestSuccess<TResponse>);
+    } else {
+      rej(postResponse);
+    }
+  };
 
   const query = useQuery<any, any, IRequestSuccess<TResponse>>(
     [requestPath, {}],
-    () =>
-      new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => {
-        setTimeout(async () => {
-          const postResponse = await makeRequest<TResponse>({
-            path: requestPath,
-            headers,
-            method: HttpMethod.DELETE,
-            baseURL,
-            timeout,
-          });
-          if (postResponse.status) {
-            res(postResponse as IRequestSuccess<TResponse>);
-          } else {
-            rej(postResponse);
-          }
-        }, 200);
-      }),
-    { ...options }
+    () => new Promise<IRequestSuccess<TResponse> | IRequestError>((res, rej) => sendRequest(res, rej)),
+    { enabled: false, ...options }
   );
 
   const updatedPathAsync = async (link: string) => {
@@ -43,23 +51,19 @@ export const useDeleteRequest = <TResponse>() => {
 
   const destroy = async (
     link: string,
-    deleteOptions?: UseQueryOptions<
+    internalDeleteOptions?: UseQueryOptions<
       IRequestSuccess<TResponse | undefined>,
       IRequestError,
       IRequestSuccess<TResponse | undefined>,
       Array<any>
-    >
+    > & { cached?: boolean }
   ): Promise<IRequestSuccess<TResponse> | undefined> => {
     // 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;
   };