@choksheak/react-utils 0.2.3 → 0.2.5

package/README.md

@@ -1,3 +1,5 @@
-# Chok's React Utilities
+# @choksheak/react-utils
 
 Miscellaneous React+TypeScript utilities with support for full tree-shaking.
+
+Online docs: https://choksheak.github.io/react-utils/

package/fetcher.min.cjs

@@ -0,0 +1,2 @@
+"use strict";var f=Object.create;var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var a=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,n=Object.prototype.hasOwnProperty;var w=(r,e)=>{for(var t in e)m(r,t,{get:e[t],enumerable:!0})},p=(r,e,t,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of a(e))!n.call(r,o)&&o!==t&&m(r,o,{get:()=>e[o],enumerable:!(c=h(e,o))||c.enumerable});return r};var x=(r,e,t)=>(t=r!=null?f(d(r)):{},p(e||!r||!r.__esModule?m(t,"default",{value:r,enumerable:!0}):t,r)),y=r=>p(m({},"__esModule",{value:!0}),r);var u={};w(u,{fetcher:()=>l,fetcherWithRetries:()=>k});module.exports=y(u);var i=x(require("wretch")),s=require("wretch/middlewares"),l=(0,i.default)(),k=(0,i.default)().middlewares([(0,s.retry)({maxAttempts:3,delayTimer:1e3,retryOnNetworkError:!0})]);0&&(module.exports={fetcher,fetcherWithRetries});
+//# sourceMappingURL=fetcher.min.cjs.map

package/fetcher.min.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/fetcher.ts"],"sourcesContent":["import wretch from \"wretch\";\nimport { retry } from \"wretch/middlewares\";\n\n/** Name this as \"fetcher\" to make it easier to understand. */\nexport const fetcher = wretch();\n\n/** Fetcher with default short retries. */\nexport const fetcherWithRetries = wretch().middlewares([\n  retry({\n    maxAttempts: 3,\n    delayTimer: 1000,\n    retryOnNetworkError: true,\n  }),\n]);\n"],"mappings":"0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,uBAAAC,IAAA,eAAAC,EAAAJ,GAAA,IAAAK,EAAmB,qBACnBC,EAAsB,8BAGTJ,KAAU,EAAAK,SAAO,EAGjBJ,KAAqB,EAAAI,SAAO,EAAE,YAAY,IACrD,SAAM,CACJ,YAAa,EACb,WAAY,IACZ,oBAAqB,EACvB,CAAC,CACH,CAAC","names":["fetcher_exports","__export","fetcher","fetcherWithRetries","__toCommonJS","import_wretch","import_middlewares","wretch"]}

package/fetcher.min.mjs

@@ -0,0 +1,2 @@
+import r from"wretch";import{retry as e}from"wretch/middlewares";var m=r(),i=r().middlewares([e({maxAttempts:3,delayTimer:1e3,retryOnNetworkError:!0})]);export{m as fetcher,i as fetcherWithRetries};
+//# sourceMappingURL=fetcher.min.mjs.map

package/fetcher.min.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/fetcher.ts"],"sourcesContent":["import wretch from \"wretch\";\nimport { retry } from \"wretch/middlewares\";\n\n/** Name this as \"fetcher\" to make it easier to understand. */\nexport const fetcher = wretch();\n\n/** Fetcher with default short retries. */\nexport const fetcherWithRetries = wretch().middlewares([\n  retry({\n    maxAttempts: 3,\n    delayTimer: 1000,\n    retryOnNetworkError: true,\n  }),\n]);\n"],"mappings":"AAAA,OAAOA,MAAY,SACnB,OAAS,SAAAC,MAAa,qBAGf,IAAMC,EAAUF,EAAO,EAGjBG,EAAqBH,EAAO,EAAE,YAAY,CACrDC,EAAM,CACJ,YAAa,EACb,WAAY,IACZ,oBAAqB,EACvB,CAAC,CACH,CAAC","names":["wretch","retry","fetcher","fetcherWithRetries"]}

package/index.min.cjs

@@ -0,0 +1,2 @@
+"use strict";console.log("Hello from Chok's React Utils");
+//# sourceMappingURL=index.min.cjs.map

package/index.min.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Unused file. To support full tree-shaking, please import from the individual\n// files directly.\n\nconsole.log(`Hello from Chok's React Utils`);\n"],"mappings":"aAGA,QAAQ,IAAI,+BAA+B","names":[]}

package/index.min.mjs

@@ -0,0 +1,2 @@
+var e=(l,o)=>()=>(o||l((o={exports:{}}).exports,o),o.exports);var s=e(()=>{console.log("Hello from Chok's React Utils")});export default s();
+//# sourceMappingURL=index.min.mjs.map

package/index.min.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Unused file. To support full tree-shaking, please import from the individual\n// files directly.\n\nconsole.log(`Hello from Chok's React Utils`);\n"],"mappings":"8DAAA,IAAAA,EAAAC,EAAA,KAGA,QAAQ,IAAI,+BAA+B","names":["require_index","__commonJSMin"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@choksheak/react-utils",
   "license": "The Unlicense",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Miscellaneous React+TypeScript utilities with support for full tree-shaking.",
   "private": false,
   "main": "index.js",
@@ -13,7 +13,7 @@
   "scripts": {
     "lint": "eslint .",
     "fix": "eslint . --fix",
-    "tsc": "tsc --noEmit",
+    "tsc": "tsc --noEmit --allowSyntheticDefaultImports",
     "ft": "npm run fix && npm run tsc",
     "build": "tsup src/*",
     "test": "vitest run",
@@ -63,7 +63,9 @@
   "devDependencies": {
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.38.0",
+    "@swc/core": "^1.14.0",
     "@types/jest": "^30.0.0",
+    "@types/lodash": "^4.17.20",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@typescript-eslint/eslint-plugin": "^8.46.2",
@@ -79,6 +81,7 @@
     "globals": "^16.4.0",
     "jiti": "^2.6.1",
     "lint-staged": "^16.2.6",
+    "lodash": "^4.17.21",
     "object-sizeof": "^2.6.5",
     "prettier": "^3.6.2",
     "react": "^19.2.0",
@@ -89,28 +92,58 @@
     "typedoc": "^0.28.14",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.2",
+    "use-deep-compare": "^1.3.0",
     "vitest": "^4.0.3",
     "wretch": "^3.0.2"
   },
   "peerDependencies": {
     "@choksheak/ts-utils": ">=0.2.9",
+    "lodash": ">=4.17.21",
     "object-sizeof": ">=2.6.5",
     "react": ">=16",
+    "use-deep-compare": ">=1.3.0",
     "wretch": ">=3"
   },
   "exports": {
     "./package.json": "./package.json",
     "./fetcher": {
       "types": "./fetcher.d.ts",
-      "import": "./fetcher.js"
+      "import": {
+        "production": "./fetcher.min.mjs",
+        "development": "./fetcher.mjs",
+        "default": "./fetcher.mjs"
+      },
+      "require": {
+        "production": "./fetcher.min.cjs",
+        "development": "./fetcher.cjs",
+        "default": "./fetcher.cjs"
+      }
     },
     "./sharedQuery": {
       "types": "./sharedQuery.d.ts",
-      "import": "./sharedQuery.js"
+      "import": {
+        "production": "./sharedQuery.min.mjs",
+        "development": "./sharedQuery.mjs",
+        "default": "./sharedQuery.mjs"
+      },
+      "require": {
+        "production": "./sharedQuery.min.cjs",
+        "development": "./sharedQuery.cjs",
+        "default": "./sharedQuery.cjs"
+      }
     },
     "./sharedState": {
       "types": "./sharedState.d.ts",
-      "import": "./sharedState.js"
+      "import": {
+        "production": "./sharedState.min.mjs",
+        "development": "./sharedState.mjs",
+        "default": "./sharedState.mjs"
+      },
+      "require": {
+        "production": "./sharedState.min.cjs",
+        "development": "./sharedState.cjs",
+        "default": "./sharedState.cjs"
+      }
     }
   },
   "typesVersions": {

package/{sharedQuery.js → sharedQuery.cjs}

@@ -38,7 +38,7 @@ __export(sharedQuery_exports, {
 module.exports = __toCommonJS(sharedQuery_exports);
 var import_timeConstants2 = require("@choksheak/ts-utils/timeConstants");
 var import_object_sizeof = __toESM(require("object-sizeof"));
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/sharedState.ts
 var import_timeConstants = require("@choksheak/ts-utils/timeConstants");
@@ -303,18 +303,39 @@ function stringifyDeterministicForKeys(params) {
   });
 }
 
+// src/utils/useDeepMemo.ts
+var import_isEqual = __toESM(require("lodash/isEqual"));
+var import_react2 = require("react");
+function useDeepMemo(value) {
+  const [state, setState] = (0, import_react2.useState)(value);
+  return (0, import_react2.useMemo)(() => {
+    if (state === value || (0, import_isEqual.default)(state, value)) {
+      return state;
+    }
+    setState(value);
+    return value;
+  }, [state, value]);
+}
+
 // src/sharedQuery.ts
 var SharedQueryDefaults = {
+  // Refetch on every page load.
   staleMs: 0,
+  // Keep in cache for a long time.
   expiryMs: 30 * import_timeConstants2.MS_PER_DAY,
+  // Always refetch automatically if the data is stale.
+  refetchOnStale: true,
+  // No default persistence configured.
   persistTo: void 0,
+  // 100 is not too large, but please tweak accordingly.
   maxSize: 100,
-  // 100 is not too large, but please tweak accordingly
-  maxBytes: 1e5
-  // 100kb before GC
+  // 100kb limit before discarding old records.
+  maxBytes: 1e5,
+  // Default to log to console.
+  log: (...args) => console.log("[sharedQuery]", ...args)
 };
 var SharedQuery = class {
-  inflightPromises = /* @__PURE__ */ new Map();
+  inflightQueries = /* @__PURE__ */ new Map();
   queryState;
   queryName;
   queryFn;
@@ -323,22 +344,27 @@ var SharedQuery = class {
   refetchOnStale;
   maxSize;
   maxBytes;
+  log;
   constructor(options) {
     this.queryName = options.queryName;
     this.queryFn = options.queryFn;
-    this.expiryMs = options?.expiryMs !== void 0 ? options?.expiryMs : SharedQueryDefaults.expiryMs;
-    this.staleMs = options?.staleMs !== void 0 ? options?.staleMs : SharedQueryDefaults.staleMs;
-    this.refetchOnStale = Boolean(options?.refetchOnStale);
-    const persistTo = options.persistTo ?? SharedQueryDefaults.persistTo;
-    if (persistTo === "localStorage") {
-      options.localStorageKey = options.queryName;
-    } else if (persistTo === "indexedDb") {
-      options.indexedDbKey = options.queryName;
+    this.staleMs = options?.staleMs ?? SharedQueryDefaults.staleMs;
+    this.expiryMs = options?.expiryMs ?? SharedQueryDefaults.expiryMs;
+    this.refetchOnStale = options?.refetchOnStale ?? SharedQueryDefaults.refetchOnStale;
+    if (!options.localStorageKey && !options.indexedDbKey) {
+      const persistTo = options.persistTo ?? SharedQueryDefaults.persistTo;
+      if (persistTo === "localStorage") {
+        options.localStorageKey = options.queryName;
+      } else if (persistTo === "indexedDb") {
+        options.indexedDbKey = options.queryName;
+      }
     }
     this.maxSize = options?.maxSize ?? SharedQueryDefaults.maxSize;
     this.maxBytes = options?.maxBytes ?? SharedQueryDefaults.maxBytes;
+    this.log = options?.log ?? SharedQueryDefaults.log;
     this.queryState = sharedState(
       {},
+      // defaultValue
       {
         ...options,
         // Fallback to use expiryMs for the storeExpiryMs.
@@ -346,9 +372,56 @@ var SharedQuery = class {
       }
     );
   }
+  /** Returns a key to identify requests based on the given args. */
   getQueryKey(args) {
     return this.queryName + ":" + stringifyDeterministicForKeys(args);
   }
+  /**
+   * Get the AbortController to abort the inflight query (if any).
+   *
+   * Note that once you get the controller, you can also get the signal easily
+   * using `controller.signal`. So if you need both the controller and the
+   * signal, just use this function.
+   */
+  getAbortController(args) {
+    const queryKey = this.getQueryKey(args);
+    return this.getAbortControllerByKey(queryKey);
+  }
+  getAbortControllerByKey(queryKey) {
+    return this.inflightQueries.get(queryKey)?.abortController ?? null;
+  }
+  /**
+   * Get the AbortSignal to check for query abortions.
+   *
+   * Example:
+   * ```
+   *   const getUserQuery = sharedQuery({
+   *     queryName: "getUser",
+   *     queryFn: (userId: string) => {
+   *       // Get the signal for this current execution.
+   *       const signal = getUserQuery.getAbortSignal([userId]);
+   *
+   *       // Pass the signal to fetch so that it can be aborted.
+   *       const response = await fetch(`/users/${userId}`, { signal });
+   *
+   *       // Check for errors.
+   *       if (!response.ok) {
+   *         throw new Error(response.statusText);
+   *       }
+   *
+   *       // Return the data.
+   *       return await response.json();
+   *     },
+   *   });
+   * ```
+   */
+  getAbortSignal(args) {
+    const queryKey = this.getQueryKey(args);
+    return this.getAbortSignalByKey(queryKey);
+  }
+  getAbortSignalByKey(queryKey) {
+    return this.getAbortControllerByKey(queryKey)?.signal ?? null;
+  }
   isStale(dataUpdatedMs) {
     if (this.staleMs === 0) return true;
     const ageMs = Date.now() - dataUpdatedMs;
@@ -364,46 +437,53 @@ var SharedQuery = class {
     const cached = this.queryState.getSnapshot()?.[queryKey];
     if (cached?.data && !this.isExpired(cached.dataUpdatedMs ?? 0)) {
       if (!this.isStale(cached.dataUpdatedMs ?? 0)) {
-        console.log(
-          `Return fresh data ${queryKey} from cache without fetching`
-        );
+        this.log(`Return fresh data ${queryKey} from cache without fetching`);
         return cached.data;
       }
       if (this.refetchOnStale) {
-        console.log(`refetchOnStale for ${queryKey}`);
+        this.log(`refetchOnStale for ${queryKey}`);
         void this.dedupedFetch(queryKey, ...args);
       }
-      console.log(`Returning stale data for ${queryKey}`);
+      this.log(`Returning stale data for ${queryKey}`);
       return cached.data;
     }
     return await this.dedupedFetch(queryKey, ...args);
   }
   dedupedFetch(queryKey, ...args) {
-    const inflightPromise = this.inflightPromises.get(queryKey);
-    if (inflightPromise) {
-      console.log(`Deduplicating inflight fetch for ${queryKey}`);
-      return inflightPromise;
+    const inflightQuery = this.inflightQueries.get(queryKey);
+    if (inflightQuery) {
+      this.log(`Deduplicating inflight fetch for ${queryKey}`);
+      return inflightQuery.promise;
     }
     const promise = this.startFetching(queryKey, args);
-    this.inflightPromises.set(queryKey, promise);
+    const abortController = new AbortController();
+    this.inflightQueries.set(queryKey, { promise, abortController });
     return promise;
   }
   async startFetching(queryKey, args) {
-    console.log(`Start fetching ${queryKey}`);
+    this.log(`Start fetching ${queryKey}`);
     try {
       const data = await this.queryFn(...args);
-      console.log(`Successfully fetched ${queryKey}`);
+      this.log(`Successfully fetched ${queryKey}`);
       this.setData(queryKey, data, Date.now());
       return data;
     } catch (e) {
-      console.error(`Failed to fetch ${queryKey}: ${e}`);
+      this.log(`Failed to fetch ${queryKey}: ${e}`);
       throw e;
     } finally {
-      this.inflightPromises.delete(queryKey);
+      this.inflightQueries.delete(queryKey);
     }
   }
+  /** Get the entire stored entry for a query key. */
+  getQueryValue(queryKey) {
+    return this.queryState.getSnapshot()?.[queryKey];
+  }
+  /** Get the current stored data for a query key. */
+  getData(queryKey) {
+    return this.queryState.getSnapshot()?.[queryKey]?.data;
+  }
   /** Set the data directly if the user obtained it from somewhere else. */
-  async setData(queryKey, data, dataUpdatedMs = Date.now()) {
+  setData(queryKey, data, dataUpdatedMs = Date.now()) {
     const entry = {
       lastUpdatedMs: Date.now(),
       loading: false,
@@ -413,24 +493,35 @@ var SharedQuery = class {
     this.queryState.setValue((prev) => ({ ...prev, [queryKey]: entry }));
     this.enforceSizeLimit();
   }
-  /** Do a new fetch even when the data is already cached. */
+  /**
+   * Do a new fetch even when the data is already cached, but don't fetch if
+   * another fetch is already inflight.
+   */
   async updateFromSource(...args) {
     const key = this.getQueryKey(args);
     return await this.dedupedFetch(key, ...args);
   }
   /** Delete the cached data for one set of arguments. */
-  deleteData(args) {
-    const queryKey = this.getQueryKey(args);
+  deleteData(queryKey) {
     const record = this.queryState.getSnapshot();
     const clone = { ...record };
     delete clone[queryKey];
     this.queryState.setValue(clone);
-    this.inflightPromises.delete(queryKey);
+    const inflight = this.inflightQueries.get(queryKey);
+    if (inflight) {
+      this.inflightQueries.delete(queryKey);
+      inflight.abortController.abort("Deleted");
+    }
   }
   /** Delete all currently cached data & all inflight promises. */
   clear() {
     this.queryState.delete();
-    this.inflightPromises.clear();
+    for (const { abortController } of Array.from(
+      this.inflightQueries.values()
+    )) {
+      abortController.abort("Cleared");
+    }
+    this.inflightQueries.clear();
   }
   /**
    * Discard the oldest entries if the size exceeds the limit. The last
@@ -451,7 +542,7 @@ var SharedQuery = class {
     if (this.maxSize) {
       const numToCut = oldSize - this.maxSize;
       if (numToCut > 0) {
-        console.log(
+        this.log(
           `enforceSizeLimit for ${this.queryName} needed due to size ${oldSize} > ${this.maxSize}`
         );
         newState = { ...newState };
@@ -470,7 +561,7 @@ var SharedQuery = class {
       const currentByteSize = needUpdate ? (0, import_object_sizeof.default)(newState) : oldByteSize;
       let bytesToCut = currentByteSize - this.maxBytes;
       if (bytesToCut > 0) {
-        console.log(
+        this.log(
           `enforceSizeLimit for ${this.queryName} needed due to byte size ${currentByteSize.toLocaleString()} > ${this.maxBytes.toLocaleString()}`
         );
         if (!needUpdate) {
@@ -495,12 +586,12 @@ var SharedQuery = class {
     }
     if (needUpdate) {
       this.queryState.setValue(newState);
-      console.log(
+      this.log(
         `Trimmed data for ${this.queryName}: size=(${oldSize} -> ${Object.keys(newState).length}) (limit=${this.maxSize}), byteSize=(${oldByteSize.toLocaleString()} -> ${(0, import_object_sizeof.default)(newState).toLocaleString()}) (limit=${this.maxBytes.toLocaleString()})`
       );
       return;
     }
-    console.log(
+    this.log(
       `No need to trim data for ${this.queryName}: size=${oldSize} (limit=${this.maxSize}), byteSize=${oldByteSize.toLocaleString()} (limit=${this.maxBytes.toLocaleString()})`
     );
   }
@@ -518,77 +609,109 @@ var DEFAULT_QUERY_STATE_ENTRY = {
   loading: true
 };
 function useSharedQuery(query, args = []) {
+  const stableArgs = useDeepMemo(args);
   const [queryState, setQueryState] = useSharedState(query.queryState);
-  const isMounted = (0, import_react2.useRef)(true);
-  const queryKey = query.getQueryKey(args);
-  const execute = (0, import_react2.useCallback)(async () => {
-    console.log(`Begin executing shared query ${queryKey}`);
-    setQueryState((prev) => {
-      const clone = { ...prev };
-      clone[queryKey] = {
-        ...clone[queryKey] ?? {},
+  const isMounted = (0, import_react3.useRef)(true);
+  const queryKey = (0, import_react3.useMemo)(
+    () => query.getQueryKey(stableArgs),
+    [query, stableArgs]
+  );
+  const queryStateValue = queryState[queryKey];
+  const setQueryStateValue = (0, import_react3.useCallback)(
+    (arg) => {
+      setQueryState((prev) => {
+        const clone = { ...prev };
+        clone[queryKey] = typeof arg === "function" ? arg(clone[queryKey]) : arg;
+        return clone;
+      });
+    },
+    [queryKey, setQueryState]
+  );
+  const execute = (0, import_react3.useCallback)(
+    async (forceRefresh) => {
+      query.log(`Begin executing shared query ${queryKey}`);
+      setQueryStateValue((prev) => ({
+        // Keep old data and error.
+        ...prev ?? {},
         lastUpdatedMs: Date.now(),
         loading: true
-      };
-      return clone;
-    });
-    try {
-      const data = await query.getCachedOrFetch(...args);
-      if (isMounted.current) {
-        setQueryState((prev) => {
-          const clone = { ...prev };
+      }));
+      try {
+        const data = await (forceRefresh ? query.updateFromSource(...stableArgs) : query.getCachedOrFetch(...stableArgs));
+        if (isMounted.current) {
           const now = Date.now();
-          clone[queryKey] = {
+          setQueryStateValue({
             // Don't keep old error.
             lastUpdatedMs: now,
             loading: false,
             data,
             dataUpdatedMs: now
-          };
-          return clone;
-        });
-      }
-    } catch (e) {
-      const error = e instanceof Error ? e : new Error(`An unknown error occurred during fetch: ${e}`);
-      if (isMounted.current) {
-        setQueryState((prev) => {
-          const clone = { ...prev };
+          });
+        }
+      } catch (e) {
+        if (isMounted.current) {
           const now = Date.now();
-          clone[queryKey] = {
+          setQueryStateValue((prev) => ({
             // Keep old data.
-            ...clone[queryKey] ?? {},
+            ...prev ?? {},
             lastUpdatedMs: now,
             loading: false,
-            error,
+            error: e,
             errorUpdatedMs: now
-          };
-          return clone;
-        });
+          }));
+        }
       }
-    }
-  }, [queryKey]);
-  (0, import_react2.useEffect)(() => {
+    },
+    [query, queryKey, setQueryStateValue, stableArgs]
+  );
+  (0, import_react3.useEffect)(() => {
     isMounted.current = true;
-    void execute();
+    void execute(false);
     return () => {
       isMounted.current = false;
     };
   }, [execute]);
-  return (0, import_react2.useMemo)(() => {
-    const state = queryState[queryKey] ?? DEFAULT_QUERY_STATE_ENTRY;
+  return (0, import_react3.useMemo)(() => {
+    const state = queryStateValue ?? DEFAULT_QUERY_STATE_ENTRY;
     return {
       ...state,
+      // This works only if the user-given queryFn supports abort. If not,
+      // this function doesn't do anything, since we don't have any means to
+      // abort the running queryFn.
+      abortCurrentQuery: (reason) => {
+        const controller = query.getAbortControllerByKey(queryKey);
+        controller?.abort(reason);
+        return Boolean(controller);
+      },
       refetch: () => {
-        return query.updateFromSource(...args);
+        void execute(true);
       },
       setData: (data, dataUpdatedMs) => {
-        query.setData(queryKey, data, dataUpdatedMs ?? Date.now());
+        const now = Date.now();
+        setQueryStateValue((prev) => ({
+          ...prev ?? {},
+          data,
+          dataUpdatedMs: dataUpdatedMs ?? now,
+          lastUpdatedMs: now,
+          loading: false
+        }));
       },
       deleteData: () => {
-        query.deleteData(args);
+        setQueryState((prev) => {
+          const clone = { ...prev };
+          delete clone[queryKey];
+          return clone;
+        });
       }
     };
-  }, [query, queryKey, queryState]);
+  }, [
+    execute,
+    query,
+    queryKey,
+    queryStateValue,
+    setQueryState,
+    setQueryStateValue
+  ]);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {