@ventlio/tanstack-query 0.2.63-beta.5.2 → 0.2.63-beta.6.2

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/index.js

@@ -5,6 +5,7 @@ export { useQueryHeaders } from './config/useQueryHeaders.js';
 export { useReactNativeEnv } from './config/useReactNativeEnv.js';
 export { scrollToTop } from './helpers/scrollToTop.js';
 export { getDateInFuture } from './helpers/timeFuncs.js';
+export { QueryModel } from './model/Model.js';
 export { useKeyTrackerModel } from './model/useKeyTrackerModel.js';
 export { useQueryModel } from './model/useQueryModel.js';
 export { useRefetchQuery } from './model/useRefetchQuery.js';

package/dist/index.js.map

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

package/dist/index.mjs

@@ -1,4 +1,6 @@
 import { useQueryClient, useQuery, useMutation } from '@tanstack/react-query';
+import result from 'lodash.result';
+import set from 'lodash.set';
 import { useState, useMemo, useEffect, startTransition } from 'react';
 import axios from 'axios';
 
@@ -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: ``,
@@ -81,6 +83,94 @@ const useQueryHeaders = () => {
     return { setQueryHeaders, getHeaders };
 };
 
+class QueryModel {
+    queryKey;
+    queryClient;
+    exact;
+    constructor(queryKey, queryClient, exact = true) {
+        this.queryKey = queryKey;
+        this.queryClient = queryClient;
+        this.exact = exact;
+    }
+    findAll(path) {
+        const data = this.queryClient.getQueryData(this.queryKey, { exact: this.exact });
+        if (!data) {
+            return [];
+        }
+        if (!path) {
+            return Array.isArray(data) ? data : [data];
+        }
+        return result(data, path, []);
+    }
+    findMany(selector, path) {
+        const data = this.findAll(path) ?? [];
+        return data.filter(selector);
+    }
+    find(id, path) {
+        const modelConfig = this.getModelConfig();
+        if (!modelConfig?.idColumn) {
+            return undefined;
+        }
+        const data = this.findAll(path) ?? [];
+        return data.find((record) => record[modelConfig.idColumn] === id);
+    }
+    update(id, data, path) {
+        const oldData = this.findAll(path) ?? [];
+        const modelConfig = this.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) {
+            this.queryClient.setQueryData(this.queryKey, newData);
+        }
+        else {
+            const queryData = this.queryClient.getQueryData(this.queryKey, { exact: this.exact }) ?? {};
+            this.queryClient.setQueryData(this.queryKey, set(queryData, path, newData));
+        }
+        return updatedRecord;
+    }
+    delete(id, path) {
+        const oldData = this.findAll(path) ?? [];
+        const modelConfig = this.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) {
+            this.queryClient.setQueryData(this.queryKey, newData);
+        }
+        else {
+            const queryData = this.queryClient.getQueryData(this.queryKey, { exact: this.exact }) ?? {};
+            this.queryClient.setQueryData(this.queryKey, set(queryData, path, newData));
+        }
+        return updated;
+    }
+    getModelConfig() {
+        const { options } = this.queryClient.getQueryData(['config']) ?? {};
+        const { modelConfig } = options ?? {};
+        return modelConfig;
+    }
+}
+
 const useKeyTrackerModel = (keyTracker) => {
     const queryClient = useQueryClient();
     const getQueryKey = (innerKeyTracker) => {
@@ -97,9 +187,11 @@ const useKeyTrackerModel = (keyTracker) => {
     return { refetchQuery, getQueryKey };
 };
 
-const useQueryModel = (queryKey, filters) => {
+const useQueryModel = (keyTracker) => {
     const queryClient = useQueryClient();
-    return queryClient.getQueryData(queryKey, filters);
+    const { getQueryKey } = useKeyTrackerModel(keyTracker);
+    const queryKey = getQueryKey();
+    return new QueryModel(queryKey, queryClient);
 };
 
 const useRefetchQuery = async (queryKey) => {
@@ -499,5 +591,5 @@ const usePostRequest = ({ path, isFormData = false, baseUrl, headers, fileSelect
     return { post, ...mutation };
 };
 
-export { ContentType, HttpMethod, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, getDateInFuture, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery };
+export { ContentType, HttpMethod, QueryModel, axiosInstance, bootstrapQueryRequest, buildFormData, errorTransformer, getDateInFuture, makeRequest, scrollToTop, successTransformer, useDeleteRequest, useEnvironmentVariables, useGetRequest, useKeyTrackerModel, usePatchRequest, usePostRequest, useQueryConfig, useQueryHeaders, useQueryModel, useReactNativeEnv, useRefetchQuery };
 //# sourceMappingURL=index.mjs.map

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/Model.d.ts

@@ -0,0 +1,14 @@
+import type { QueryClient } from '@tanstack/react-query';
+import type { QueryModelBuilder } from './model.interface';
+export declare class QueryModel<T> implements QueryModelBuilder<T> {
+    private readonly queryKey;
+    private readonly queryClient;
+    private readonly exact;
+    constructor(queryKey: any[], queryClient: QueryClient, exact?: boolean);
+    findAll(path?: string): T[] | undefined;
+    findMany(selector: (record: T) => boolean, path?: string): T[];
+    find(id: string | number, path?: string): T | undefined;
+    update(id: string | number, data: Partial<T>, path?: string): T | undefined;
+    delete(id: number | string, path?: string): boolean;
+    private getModelConfig;
+}

package/dist/model/Model.js

@@ -0,0 +1,93 @@
+import result from 'lodash.result';
+import set from 'lodash.set';
+
+class QueryModel {
+    queryKey;
+    queryClient;
+    exact;
+    constructor(queryKey, queryClient, exact = true) {
+        this.queryKey = queryKey;
+        this.queryClient = queryClient;
+        this.exact = exact;
+    }
+    findAll(path) {
+        const data = this.queryClient.getQueryData(this.queryKey, { exact: this.exact });
+        if (!data) {
+            return [];
+        }
+        if (!path) {
+            return Array.isArray(data) ? data : [data];
+        }
+        return result(data, path, []);
+    }
+    findMany(selector, path) {
+        const data = this.findAll(path) ?? [];
+        return data.filter(selector);
+    }
+    find(id, path) {
+        const modelConfig = this.getModelConfig();
+        if (!modelConfig?.idColumn) {
+            return undefined;
+        }
+        const data = this.findAll(path) ?? [];
+        return data.find((record) => record[modelConfig.idColumn] === id);
+    }
+    update(id, data, path) {
+        const oldData = this.findAll(path) ?? [];
+        const modelConfig = this.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) {
+            this.queryClient.setQueryData(this.queryKey, newData);
+        }
+        else {
+            const queryData = this.queryClient.getQueryData(this.queryKey, { exact: this.exact }) ?? {};
+            this.queryClient.setQueryData(this.queryKey, set(queryData, path, newData));
+        }
+        return updatedRecord;
+    }
+    delete(id, path) {
+        const oldData = this.findAll(path) ?? [];
+        const modelConfig = this.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) {
+            this.queryClient.setQueryData(this.queryKey, newData);
+        }
+        else {
+            const queryData = this.queryClient.getQueryData(this.queryKey, { exact: this.exact }) ?? {};
+            this.queryClient.setQueryData(this.queryKey, set(queryData, path, newData));
+        }
+        return updated;
+    }
+    getModelConfig() {
+        const { options } = this.queryClient.getQueryData(['config']) ?? {};
+        const { modelConfig } = options ?? {};
+        return modelConfig;
+    }
+}
+
+export { QueryModel };
+//# sourceMappingURL=Model.js.map

package/dist/model/Model.js.map

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

package/dist/model/index.d.ts

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

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

@@ -0,0 +1,7 @@
+export interface QueryModelBuilder<T> {
+    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;
+    delete: (id: number, path?: string) => boolean;
+}

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 { QueryModel } from './Model';
+export declare const useQueryModel: <T>(keyTracker: string) => QueryModel<T>;

package/dist/model/useQueryModel.js

@@ -1,8 +1,12 @@
 import { useQueryClient } from '@tanstack/react-query';
+import { QueryModel } from './Model.js';
+import { useKeyTrackerModel } from './useKeyTrackerModel.js';
 
-const useQueryModel = (queryKey, filters) => {
+const useQueryModel = (keyTracker) => {
     const queryClient = useQueryClient();
-    return queryClient.getQueryData(queryKey, filters);
+    const { getQueryKey } = useKeyTrackerModel(keyTracker);
+    const queryKey = getQueryKey();
+    return new QueryModel(queryKey, queryClient);
 };
 
 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/types/index.d.ts

@@ -1,15 +1,19 @@
 import type { RawAxiosRequestHeaders } from 'axios';
-export interface BootstrapQueryRequest {
+export interface BootstrapConfig {
     environments?: {
         appBaseUrl: string;
         appTimeout: number;
     };
     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-beta.5.2",
+  "version": "0.2.63-beta.6.2",
   "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/model/Model.ts

@@ -0,0 +1,107 @@
+import type { QueryClient } from '@tanstack/react-query';
+import result from 'lodash.result';
+import set from 'lodash.set';
+import type { TanstackQueryConfig } from '../types';
+import type { QueryModelBuilder } from './model.interface';
+
+export class QueryModel<T> implements QueryModelBuilder<T> {
+  constructor(
+    private readonly queryKey: any[],
+    private readonly queryClient: QueryClient,
+    private readonly exact: boolean = true
+  ) {}
+
+  public findAll(path?: string): T[] | undefined {
+    const data = this.queryClient.getQueryData(this.queryKey, { exact: this.exact });
+
+    if (!data) {
+      return [];
+    }
+
+    if (!path) {
+      return Array.isArray(data) ? data : [data];
+    }
+
+    return result<T[]>(data, path, []);
+  }
+
+  public findMany(selector: (record: T) => boolean, path?: string): T[] {
+    const data = this.findAll(path) ?? [];
+    return data.filter(selector);
+  }
+
+  find(id: string | number, path?: string): T | undefined {
+    const modelConfig = this.getModelConfig();
+
+    if (!modelConfig?.idColumn) {
+      return undefined;
+    }
+    const data = this.findAll(path) ?? [];
+
+    return data.find((record) => (record as Record<string, any>)[modelConfig.idColumn] === id);
+  }
+
+  update(id: string | number, data: Partial<T>, path?: string): T | undefined {
+    const oldData = this.findAll(path) ?? [];
+    const modelConfig = this.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) {
+      this.queryClient.setQueryData(this.queryKey, newData);
+    } else {
+      const queryData = this.queryClient.getQueryData(this.queryKey, { exact: this.exact }) ?? {};
+      this.queryClient.setQueryData(this.queryKey, set(queryData, path, newData));
+    }
+    return updatedRecord;
+  }
+
+  delete(id: number | string, path?: string): boolean {
+    const oldData = this.findAll(path) ?? [];
+    const modelConfig = this.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) {
+      this.queryClient.setQueryData(this.queryKey, newData);
+    } else {
+      const queryData = this.queryClient.getQueryData(this.queryKey, { exact: this.exact }) ?? {};
+      this.queryClient.setQueryData(this.queryKey, set(queryData, path, newData));
+    }
+    return updated;
+  }
+
+  private getModelConfig() {
+    const { options } = this.queryClient.getQueryData<TanstackQueryConfig>(['config']) ?? {};
+    const { modelConfig } = options ?? {};
+
+    return modelConfig;
+  }
+}

package/src/model/index.ts

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

package/src/model/model.interface.ts

@@ -0,0 +1,7 @@
+export interface QueryModelBuilder<T> {
+  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;
+  delete: (id: number, path?: string) => boolean;
+}

package/src/model/useQueryModel.ts

@@ -1,8 +1,10 @@
-import type { QueryFilters } from '@tanstack/react-query';
 import { useQueryClient } from '@tanstack/react-query';
+import { QueryModel } from './Model';
+import { useKeyTrackerModel } from './useKeyTrackerModel';
 
-export const useQueryModel = (queryKey: any[], filters?: QueryFilters | undefined) => {
+export const useQueryModel = <T>(keyTracker: string): QueryModel<T> => {
   const queryClient = useQueryClient();
-
-  return queryClient.getQueryData(queryKey, filters);
+  const { getQueryKey } = useKeyTrackerModel(keyTracker);
+  const queryKey = getQueryKey() as any[];
+  return new QueryModel<T>(queryKey, queryClient);
 };

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?: 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 {