@choksheak/react-utils 0.5.0 → 0.5.1

package/{chunk-UBAHJNMF.js → chunk-5O4HBYCM.js}

@@ -1,7 +1,7 @@
 import {
   sharedState,
   useSharedState
-} from "./chunk-H4OYYPJV.js";
+} from "./chunk-ZEVXDXJD.js";
 import {
   stringifyDeterministicForKeys
 } from "./chunk-7XC6EVMX.js";
@@ -11,15 +11,8 @@ import {
 
 // src/sharedQuery.ts
 import { http, retries } from "@choksheak/ts-utils/http";
-import { nonNil } from "@choksheak/ts-utils/nonNil";
 import getByteSize from "object-sizeof";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import XXH from "xxhashjs";
 var hasWindow = typeof window !== "undefined";
 var SharedQueryConfig = {
@@ -27,8 +20,6 @@ var SharedQueryConfig = {
   staleMs: 0,
   /** Keep in cache for a long time. */
   expiryMs: 30 * 864e5,
-  /** 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. */
@@ -114,7 +105,6 @@ function sharedQuery2(options) {
   const refetchFn = options.refetchFn;
   const staleMs = options?.staleMs ?? SharedQueryConfig.staleMs;
   const expiryMs = options?.expiryMs ?? SharedQueryConfig.expiryMs;
-  const refetchOnStale = options?.refetchOnStale ?? SharedQueryConfig.refetchOnStale;
   const store = options.store;
   if (store) {
     if ("persistTo" in store && store.isValid) {
@@ -160,6 +150,27 @@ function sharedQuery2(options) {
     // defaultValue
     options
   );
+  function getQueryKey(args) {
+    let s = stringifyDeterministicForKeys(args);
+    if (s.length > 30) {
+      s = XXH.h32(s, 39406).toString(16).slice(2);
+    }
+    return queryName + ":" + s;
+  }
+  function getAbortControllerByKey(queryKey) {
+    return inflightQueries.get(queryKey)?.abortController ?? null;
+  }
+  function getAbortController(args) {
+    const queryKey = getQueryKey(args);
+    return getAbortControllerByKey(queryKey);
+  }
+  function getAbortSignal(args) {
+    const queryKey = getQueryKey(args);
+    return getAbortSignalByKey(queryKey);
+  }
+  function getAbortSignalByKey(queryKey) {
+    return getAbortControllerByKey(queryKey)?.signal ?? null;
+  }
   function isStale(dataUpdatedMs) {
     if (staleMs === 0) return true;
     const ageMs = Date.now() - dataUpdatedMs;
@@ -196,7 +207,7 @@ function sharedQuery2(options) {
     const deleteKeyIfNotMounted = (key, expired) => {
       if (mountedKeys.has(key)) {
         log(`Cannot clean up ${key} as it is mounted`);
-        return;
+        return false;
       }
       const byteSize = getByteSize(key) + getByteSize(newState[key]);
       log(
@@ -206,23 +217,31 @@ function sharedQuery2(options) {
       bytesToCut -= byteSize;
       delete newState[key];
       needUpdate = true;
+      return true;
     };
-    let entriesByTimeAscending = Object.entries(newState).sort(
-      (entry1, entry2) => entry1[1].lastUpdatedMs - entry2[1].lastUpdatedMs
+    const entriesByLastUpdatedMsAsc = Object.fromEntries(
+      Object.entries(newState).sort(
+        (entry1, entry2) => entry1[1].lastUpdatedMs - entry2[1].lastUpdatedMs
+      )
     );
-    for (const [key] of entriesByTimeAscending) {
-      if (!isExpired(newState[key].lastUpdatedMs)) {
+    for (const key of Object.keys(entriesByLastUpdatedMsAsc)) {
+      const state = newState[key];
+      if (!state?.lastUpdatedMs || state?.loading) {
+        continue;
+      }
+      if (state?.lastUpdatedMs && !isExpired(state.lastUpdatedMs)) {
         break;
       }
-      deleteKeyIfNotMounted(key, true);
+      if (deleteKeyIfNotMounted(key, true)) {
+        delete entriesByLastUpdatedMsAsc[key];
+      }
     }
     if (numToCut > 0 || bytesToCut > 0) {
-      if (needUpdate) {
-        entriesByTimeAscending = Object.entries(newState).sort(
-          (entry1, entry2) => entry1[1].lastUpdatedMs - entry2[1].lastUpdatedMs
-        );
-      }
-      for (const [key] of entriesByTimeAscending) {
+      for (const key of Object.keys(entriesByLastUpdatedMsAsc)) {
+        const state = newState[key];
+        if (!state?.lastUpdatedMs || state?.loading) {
+          continue;
+        }
         deleteKeyIfNotMounted(key, false);
         if (numToCut <= 0 && bytesToCut <= 0) {
           break;
@@ -240,15 +259,120 @@ function sharedQuery2(options) {
       `Trimmed data for ${queryName}: size=[${oldSize} -> ${Object.keys(newState).length}] (limit=${maxSize}), byteSize=[${oldByteSize.toLocaleString()} -> ${getByteSize(newState).toLocaleString()}] (limit=${maxBytes.toLocaleString()})`
     );
   }
+  function getQueryValue(queryKey) {
+    return queryState.getSnapshot()?.[queryKey];
+  }
+  function setQueryValue(queryKey, next) {
+    queryState.setValue((prev) => {
+      const value = typeof next === "function" ? next(prev[queryKey] ?? DEFAULT_QUERY_STATE_ENTRY) : next;
+      return { ...prev, [queryKey]: value };
+    });
+    enforceSizeLimit();
+  }
+  function getData(queryKey) {
+    const stateValue = getQueryValue(queryKey);
+    if (stateValue?.dataUpdatedMs) {
+      if (isExpired(stateValue.dataUpdatedMs)) {
+        deleteData(queryKey);
+        return void 0;
+      }
+    }
+    return stateValue?.data;
+  }
   function setData(queryKey, data, dataUpdatedMs = Date.now()) {
-    const entry = {
+    setQueryValue(queryKey, {
       lastUpdatedMs: Date.now(),
       loading: false,
       data,
       dataUpdatedMs
-    };
-    queryState.setValue((prev) => ({ ...prev, [queryKey]: entry }));
-    enforceSizeLimit();
+    });
+  }
+  function deleteData(queryKey) {
+    const record = queryState.getSnapshot();
+    const clone = { ...record };
+    delete clone[queryKey];
+    queryState.setValue(clone);
+    const inflight = inflightQueries.get(queryKey);
+    if (inflight) {
+      inflightQueries.delete(queryKey);
+      inflight.abortController.abort("Deleted");
+    }
+  }
+  async function wrapLoading(queryKey, fetchData) {
+    setQueryValue(queryKey, DEFAULT_QUERY_STATE_ENTRY);
+    try {
+      const data = await fetchData();
+      if (getQueryValue(queryKey)?.loading) {
+        const now = Date.now();
+        setQueryValue(queryKey, {
+          data,
+          loading: false,
+          lastUpdatedMs: now,
+          dataUpdatedMs: now
+        });
+      }
+      return data;
+    } catch (e) {
+      if (getQueryValue(queryKey)?.loading) {
+        const now = Date.now();
+        setQueryValue(queryKey, {
+          loading: false,
+          lastUpdatedMs: now,
+          error: e,
+          errorUpdatedMs: now
+        });
+      }
+      throw e;
+    }
+  }
+  async function waitForStateInit(queryKey) {
+    const startMs = Date.now();
+    await queryState.readyPromise;
+    const waitedMs = Date.now() - startMs;
+    if (waitedMs) {
+      log(`${queryKey}: Waited for ${waitedMs}ms before data is ready`);
+    }
+  }
+  async function getCachedOrFetch(queryKey, ...args) {
+    await waitForStateInit(queryKey);
+    const cached = getQueryValue(queryKey);
+    if (cached?.data !== void 0 && cached.dataUpdatedMs && !isExpired(cached.dataUpdatedMs)) {
+      if (!isStale(cached.dataUpdatedMs)) {
+        log(`Return fresh data ${queryKey} from cache without fetching`);
+        return cached.data;
+      }
+      void dedupedFetch(queryKey, "query", ...args);
+      log(`Returning stale data for ${queryKey}`);
+      return cached.data;
+    }
+    return await dedupedFetch(queryKey, "query", ...args);
+  }
+  async function getCachedStateOrFetch(queryKey, ...args) {
+    await waitForStateInit(queryKey);
+    const cached = getQueryValue(queryKey);
+    if (cached?.data !== void 0 && cached.dataUpdatedMs && !isExpired(cached.dataUpdatedMs)) {
+      if (!isStale(cached.dataUpdatedMs)) {
+        log(`Return fresh data ${queryKey} from cache without fetching`);
+        return cached;
+      }
+      void dedupedFetch(queryKey, "query", ...args);
+      log(`Returning stale data for ${queryKey}`);
+      return cached;
+    }
+    if (cached?.error !== void 0 && cached.errorUpdatedMs && !isExpired(cached.errorUpdatedMs)) {
+      if (!isStale(cached.errorUpdatedMs)) {
+        log(`Return fresh error ${queryKey} from cache without fetching`);
+        return cached;
+      }
+      void dedupedFetch(queryKey, "query", ...args);
+      log(`Returning stale error for ${queryKey}`);
+      return cached;
+    }
+    try {
+      await dedupedFetch(queryKey, "query", ...args);
+    } catch {
+    }
+    return getQueryValue(queryKey) ?? DEFAULT_QUERY_STATE_ENTRY;
   }
   async function startFetching(queryKey, queryType, args) {
     log(`Start fetching ${queryKey}, queryType=${queryType}`);
@@ -272,197 +396,69 @@ function sharedQuery2(options) {
       );
       return inflightQuery.promise;
     }
-    const promise = startFetching(queryKey, queryType, args);
-    const abortController = new AbortController();
-    inflightQueries.set(queryKey, { promise, abortController });
-    return promise;
+    return wrapLoading(queryKey, () => {
+      const promise = startFetching(queryKey, queryType, args);
+      const abortController = new AbortController();
+      inflightQueries.set(queryKey, { promise, abortController });
+      return promise;
+    });
   }
-  const obj = {
+  async function fetch(queryKey, ...args) {
+    return await dedupedFetch(queryKey, "query", ...args);
+  }
+  async function refetch(queryKey, ...args) {
+    return await dedupedFetch(queryKey, "refetch", ...args);
+  }
+  function clear() {
+    queryState.delete();
+    for (const { abortController } of Array.from(inflightQueries.values())) {
+      abortController.abort("Cleared");
+    }
+    inflightQueries.clear();
+  }
+  function mount(queryKey) {
+    mountedKeys.set(queryKey, (mountedKeys.get(queryKey) ?? 0) + 1);
+  }
+  function unmount(queryKey) {
+    const count = mountedKeys.get(queryKey);
+    if (count === 1) {
+      mountedKeys.delete(queryKey);
+    } else {
+      mountedKeys.set(queryKey, (count ?? 0) - 1);
+    }
+  }
+  return {
     queryName,
     queryFn,
     refetchFn,
     expiryMs,
     staleMs,
-    refetchOnStale,
     maxSize,
     maxBytes,
     keepLastNonEmptyData,
     log,
     queryState,
-    /** Returns a key to identify requests based on the given args. */
-    getQueryKey(args) {
-      let s = stringifyDeterministicForKeys(args);
-      if (s.length > 30) {
-        s = XXH.h32(s, 39406).toString(16).slice(2);
-      }
-      return queryName + ":" + s;
-    },
-    /**
-     * 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 = obj.getQueryKey(args);
-      return obj.getAbortControllerByKey(queryKey);
-    },
-    getAbortControllerByKey(queryKey) {
-      return inflightQueries.get(queryKey)?.abortController ?? null;
-    },
-    /**
-     * Get the AbortSignal to check for query abortions.
-     *
-     * Example using fetch:
-     * ```
-     *   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();
-     *     },
-     *   });
-     * ```
-     *
-     * Example using `http.ts`:
-     * ```
-     *   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 http.get(`/users/${userId}`, { signal });
-     *       return await response.json();
-     *     },
-     *   });
-     * ```
-     */
-    getAbortSignal(args) {
-      const queryKey = obj.getQueryKey(args);
-      return obj.getAbortSignalByKey(queryKey);
-    },
-    getAbortSignalByKey(queryKey) {
-      return obj.getAbortControllerByKey(queryKey)?.signal ?? null;
-    },
-    /** For cached data, we need to return the correct timestamps as well. */
-    async getCachedOrFetch(...args) {
-      const startMs = Date.now();
-      await queryState.readyPromise;
-      const waitedMs = Date.now() - startMs;
-      const queryKey = obj.getQueryKey(args);
-      const cached = queryState.getSnapshot()?.[queryKey];
-      if (waitedMs) {
-        log(`${queryKey}: Waited for ${waitedMs}ms before data is ready`);
-      }
-      if (cached?.data && !isExpired(cached.dataUpdatedMs ?? 0)) {
-        if (!isStale(cached.dataUpdatedMs ?? 0)) {
-          log(`Return fresh data ${queryKey} from cache without fetching`);
-          return cached;
-        }
-        if (refetchOnStale) {
-          log(`refetchOnStale for ${queryKey}`);
-          void dedupedFetch(queryKey, "query", ...args);
-        }
-        log(`Returning stale data for ${queryKey}`);
-        return cached;
-      }
-      const data = await dedupedFetch(queryKey, "query", ...args);
-      const now = Date.now();
-      return {
-        // Don't keep old error.
-        lastUpdatedMs: now,
-        loading: false,
-        data,
-        dataUpdatedMs: now
-      };
-    },
-    /** Get the entire stored entry for a query key. */
-    getQueryValue(queryKey) {
-      return queryState.getSnapshot()?.[queryKey];
-    },
-    /** Get the current stored data for a query key. */
-    getData(queryKey) {
-      const stateValue = queryState.getSnapshot()?.[queryKey];
-      if (stateValue?.lastUpdatedMs) {
-        if (isExpired(stateValue.lastUpdatedMs)) {
-          obj.deleteData(queryKey);
-          return void 0;
-        }
-      }
-      return stateValue?.data;
-    },
-    /** Set the data directly if the user obtained it from somewhere else. */
+    getQueryKey,
+    getAbortController,
+    getAbortControllerByKey,
+    getAbortSignal,
+    getAbortSignalByKey,
+    isStale,
+    isExpired,
+    enforceSizeLimit,
+    getQueryValue,
+    setQueryValue,
+    getData,
     setData,
-    /**
-     * 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 = obj.getQueryKey(args);
-      return await dedupedFetch(key, "query", ...args);
-    },
-    /**
-     * Perform an explicit refetch. If `options.refetchFn` was not specified,
-     * then this would be identical to calling `obj.updateFromSource()`.
-     */
-    async refetch(...args) {
-      const key = obj.getQueryKey(args);
-      return await dedupedFetch(key, "refetch", ...args);
-    },
-    /** Delete the cached data for one set of arguments. */
-    deleteData(queryKey) {
-      const record = queryState.getSnapshot();
-      const clone = { ...record };
-      delete clone[queryKey];
-      queryState.setValue(clone);
-      const inflight = inflightQueries.get(queryKey);
-      if (inflight) {
-        inflightQueries.delete(queryKey);
-        inflight.abortController.abort("Deleted");
-      }
-    },
-    /** Delete all currently cached data & all inflight promises. */
-    clear() {
-      queryState.delete();
-      for (const { abortController } of Array.from(inflightQueries.values())) {
-        abortController.abort("Cleared");
-      }
-      inflightQueries.clear();
-    },
-    /** Keep track of mounted keys. */
-    mount(queryKey) {
-      mountedKeys.set(queryKey, (mountedKeys.get(queryKey) ?? 0) + 1);
-    },
-    /** Clean up mounted keys. */
-    unmount(queryKey) {
-      const count = mountedKeys.get(queryKey);
-      if (count === 1) {
-        mountedKeys.delete(queryKey);
-      } else {
-        mountedKeys.set(queryKey, (count ?? 0) - 1);
-      }
-    },
-    /**
-     * Discard the oldest entries if the size exceeds the limit. The last
-     * remaining record cannot be deleted no matter what the limit is.
-     */
-    enforceSizeLimit
+    deleteData,
+    getCachedOrFetch,
+    getCachedStateOrFetch,
+    fetch,
+    refetch,
+    clear,
+    mount,
+    unmount
   };
-  return obj;
 }
 function sharedQuery(options) {
   return sharedQuery1(options);
@@ -473,7 +469,7 @@ var DEFAULT_QUERY_STATE_ENTRY = {
 };
 function useSharedQuery(query, ...args) {
   const stableArgs = useDeepMemo(args);
-  const [queryState, setQueryState] = useSharedState(query.queryState);
+  const [queryState] = useSharedState(query.queryState);
   const isMounted = useRef(true);
   const initQueryKeyDone = useRef("");
   const queryKey = useMemo(
@@ -481,75 +477,12 @@ function useSharedQuery(query, ...args) {
     [query, stableArgs]
   );
   const queryStateValue = queryState[queryKey] ?? DEFAULT_QUERY_STATE_ENTRY;
-  const setQueryStateValue = useCallback(
-    (next) => {
-      setQueryState((prev) => {
-        const clone = { ...prev };
-        clone[queryKey] = typeof next === "function" ? next(clone[queryKey] ?? DEFAULT_QUERY_STATE_ENTRY) : next;
-        return clone;
-      });
-    },
-    [queryKey, setQueryState]
-  );
   const [lastNonEmptyData, setLastNonEmptyData] = useState();
   useEffect(() => {
     if (query.keepLastNonEmptyData && queryStateValue.data !== void 0) {
       setLastNonEmptyData(queryStateValue.data);
     }
   }, [query.keepLastNonEmptyData, queryStateValue.data]);
-  const executeQuery = useCallback(
-    async (isRefetch) => {
-      query.log(
-        `Begin executing shared query ${queryKey}, isRefetch=${isRefetch}`
-      );
-      if (!isMounted.current) return;
-      setQueryStateValue((prev) => ({
-        // Keep old data and error.
-        ...prev,
-        lastUpdatedMs: Date.now(),
-        loading: true
-      }));
-      try {
-        let state;
-        if (isRefetch) {
-          const data = await query.refetch(...stableArgs);
-          const now = Date.now();
-          state = {
-            // Don't keep old error.
-            lastUpdatedMs: now,
-            loading: false,
-            data,
-            dataUpdatedMs: now
-          };
-        } else {
-          state = await query.getCachedOrFetch(...stableArgs);
-        }
-        if (!isMounted.current) return;
-        setQueryStateValue({ ...state, loading: false });
-        return state.data;
-      } catch (e) {
-        if (!isMounted.current) return;
-        const now = Date.now();
-        setQueryStateValue((prev) => ({
-          // Keep old data.
-          ...prev,
-          lastUpdatedMs: now,
-          loading: false,
-          error: e,
-          errorUpdatedMs: now
-        }));
-      }
-    },
-    [query, queryKey, setQueryStateValue, stableArgs]
-  );
-  useEffect(() => {
-    if (initQueryKeyDone.current === queryKey) return;
-    initQueryKeyDone.current = queryKey;
-    if (queryStateValue.data !== void 0) {
-      return;
-    }
-    void executeQuery(false);
-  }, [executeQuery, queryKey, queryStateValue.data]);
   useEffect(() => {
     isMounted.current = true;
     query.mount(queryKey);
@@ -558,6 +491,11 @@ function useSharedQuery(query, ...args) {
       query.unmount(queryKey);
     };
   }, [query, queryKey]);
+  useEffect(() => {
+    if (initQueryKeyDone.current === queryKey) return;
+    initQueryKeyDone.current = queryKey;
+    void query.getCachedStateOrFetch(queryKey, ...stableArgs);
+  }, [query, queryKey, stableArgs]);
   return useMemo(() => {
     return {
       ...queryStateValue,
@@ -573,14 +511,13 @@ function useSharedQuery(query, ...args) {
         return Boolean(controller);
       },
       getCachedOrFetch: async () => {
-        const data = await query.getCachedOrFetch(...stableArgs);
-        return nonNil(
-          data.data,
-          typeof data.error === "string" ? data.error : JSON.stringify(data.error)
-        );
+        return await query.getCachedOrFetch(queryKey, ...stableArgs);
+      },
+      getCachedStateOrFetch: async () => {
+        return await query.getCachedStateOrFetch(queryKey, ...stableArgs);
       },
       refetch: () => {
-        return executeQuery(true);
+        return query.refetch(queryKey, ...stableArgs);
       },
       setData: (data, dataUpdatedMs) => {
         query.setData(queryKey, data, dataUpdatedMs);
@@ -589,14 +526,7 @@ function useSharedQuery(query, ...args) {
         query.deleteData(queryKey);
       }
     };
-  }, [
-    executeQuery,
-    lastNonEmptyData,
-    query,
-    queryKey,
-    queryStateValue,
-    stableArgs
-  ]);
+  }, [lastNonEmptyData, query, queryKey, queryStateValue, stableArgs]);
 }
 
 export {