@objectstack/client-react 17.0.0-rc.1 → 17.0.0-rc.2

package/dist/index.mjs

@@ -25,14 +25,33 @@ function useClient() {
 }
 
 // src/data-hooks.tsx
-import { useState, useEffect, useCallback, useRef as useRef2 } from "react";
+import { useState, useEffect as useEffect2, useCallback as useCallback2, useRef as useRef3 } from "react";
+
+// src/internal-deps.ts
+import { useCallback, useEffect, useRef as useRef2 } from "react";
+function stableKey(input) {
+  if (input === null || typeof input !== "object") return JSON.stringify(input) ?? "undefined";
+  if (Array.isArray(input)) return "[" + input.map(stableKey).join(",") + "]";
+  const obj = input;
+  const keys = Object.keys(obj).sort();
+  return "{" + keys.map((k) => JSON.stringify(k) + ":" + stableKey(obj[k])).join(",") + "}";
+}
+function useEventCallback(fn) {
+  const ref = useRef2(fn);
+  useEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+  return useCallback((...args) => ref.current?.(...args), []);
+}
+
+// src/data-hooks.tsx
 function useQuery(object, options = {}) {
   const client = useClient();
   const [data, setData] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isRefetching, setIsRefetching] = useState(false);
   const [error, setError] = useState(null);
-  const intervalRef = useRef2(void 0);
+  const intervalRef = useRef3(void 0);
   const {
     query,
     // Canonical names take precedence over legacy names
@@ -51,7 +70,17 @@ function useQuery(object, options = {}) {
   const resolvedSort = orderBy;
   const resolvedLimit = limit;
   const resolvedOffset = offset;
-  const fetchData = useCallback(async (isRefetch = false) => {
+  const queryKey = stableKey({
+    query,
+    where: resolvedWhere,
+    fields: resolvedFields,
+    orderBy: resolvedSort,
+    limit: resolvedLimit,
+    offset: resolvedOffset
+  });
+  const handleSuccess = useEventCallback(onSuccess);
+  const handleError = useEventCallback(onError);
+  const fetchData = useCallback2(async (isRefetch = false) => {
     if (!enabled) return;
     try {
       if (isRefetch) {
@@ -73,20 +102,20 @@ function useQuery(object, options = {}) {
         });
       }
       setData(result);
-      onSuccess?.(result);
+      handleSuccess(result);
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Query failed");
       setError(error2);
-      onError?.(error2);
+      handleError(error2);
     } finally {
       setIsLoading(false);
       setIsRefetching(false);
     }
-  }, [client, object, query, resolvedFields, resolvedWhere, resolvedSort, resolvedLimit, resolvedOffset, enabled, onSuccess, onError]);
-  useEffect(() => {
+  }, [client, object, queryKey, enabled, handleSuccess, handleError]);
+  useEffect2(() => {
     fetchData();
   }, [fetchData]);
-  useEffect(() => {
+  useEffect2(() => {
     if (refetchInterval && enabled) {
       intervalRef.current = setInterval(() => {
         fetchData(true);
@@ -99,7 +128,7 @@ function useQuery(object, options = {}) {
     }
     return void 0;
   }, [refetchInterval, enabled, fetchData]);
-  const refetch = useCallback(async () => {
+  const refetch = useCallback2(async () => {
     await fetchData(true);
   }, [fetchData]);
   return {
@@ -116,7 +145,7 @@ function useMutation(object, operation, options = {}) {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   const { onSuccess, onError, onSettled } = options;
-  const mutateAsync = useCallback(async (variables) => {
+  const mutateAsync = useCallback2(async (variables) => {
     setIsLoading(true);
     setError(null);
     try {
@@ -161,12 +190,12 @@ function useMutation(object, operation, options = {}) {
       setIsLoading(false);
     }
   }, [client, object, operation, onSuccess, onError, onSettled]);
-  const mutate = useCallback((variables) => {
+  const mutate = useCallback2((variables) => {
     return mutateAsync(variables).catch(() => {
       return null;
     });
   }, [mutateAsync]);
-  const reset = useCallback(() => {
+  const reset = useCallback2(() => {
     setData(null);
     setError(null);
     setIsLoading(false);
@@ -192,17 +221,17 @@ function usePagination(object, options = {}) {
   const totalPages = Math.ceil(totalCount / pageSize);
   const hasNextPage = page < totalPages;
   const hasPreviousPage = page > 1;
-  const nextPage = useCallback(() => {
+  const nextPage = useCallback2(() => {
     if (hasNextPage) {
       setPage((p) => p + 1);
     }
   }, [hasNextPage]);
-  const previousPage = useCallback(() => {
+  const previousPage = useCallback2(() => {
     if (hasPreviousPage) {
       setPage((p) => p - 1);
     }
   }, [hasPreviousPage]);
-  const goToPage = useCallback((newPage) => {
+  const goToPage = useCallback2((newPage) => {
     const clampedPage = Math.max(1, Math.min(newPage, totalPages));
     setPage(clampedPage);
   }, [totalPages]);
@@ -235,12 +264,21 @@ function useInfiniteQuery(object, options = {}) {
   const resolvedFields = fields;
   const resolvedWhere = where;
   const resolvedSort = orderBy;
+  const queryKey = stableKey({
+    query,
+    where: resolvedWhere,
+    fields: resolvedFields,
+    orderBy: resolvedSort,
+    pageSize
+  });
+  const handleSuccess = useEventCallback(onSuccess);
+  const handleError = useEventCallback(onError);
   const [pages, setPages] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
   const [isFetchingNextPage, setIsFetchingNextPage] = useState(false);
   const [error, setError] = useState(null);
   const [hasNextPage, setHasNextPage] = useState(true);
-  const fetchPage = useCallback(async (skip, isNextPage = false) => {
+  const fetchPage = useCallback2(async (skip, isNextPage = false) => {
     try {
       if (isNextPage) {
         setIsFetchingNextPage(true);
@@ -272,27 +310,27 @@ function useInfiniteQuery(object, options = {}) {
       const fetchedCount = result.records?.length ?? 0;
       const hasMore = fetchedCount === pageSize;
       setHasNextPage(hasMore);
-      onSuccess?.(result);
+      handleSuccess(result);
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Query failed");
       setError(error2);
-      onError?.(error2);
+      handleError(error2);
     } finally {
       setIsLoading(false);
       setIsFetchingNextPage(false);
     }
-  }, [client, object, query, resolvedFields, resolvedWhere, resolvedSort, pageSize, onSuccess, onError]);
-  useEffect(() => {
+  }, [client, object, queryKey, handleSuccess, handleError]);
+  useEffect2(() => {
     if (enabled) {
       fetchPage(0);
     }
   }, [enabled, fetchPage]);
-  const fetchNextPage = useCallback(async () => {
+  const fetchNextPage = useCallback2(async () => {
     if (!hasNextPage || isFetchingNextPage) return;
     const nextSkip = pages.length * pageSize;
     await fetchPage(nextSkip, true);
   }, [hasNextPage, isFetchingNextPage, pages.length, pageSize, fetchPage]);
-  const refetch = useCallback(async () => {
+  const refetch = useCallback2(async () => {
     setPages([]);
     await fetchPage(0);
   }, [fetchPage]);
@@ -310,7 +348,7 @@ function useInfiniteQuery(object, options = {}) {
 }
 
 // src/metadata-hooks.tsx
-import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+import { useState as useState2, useEffect as useEffect3, useCallback as useCallback3, useRef as useRef4 } from "react";
 function useObject(objectName, options = {}) {
   const client = useClient();
   const locale = useObjectStackLocale();
@@ -327,7 +365,15 @@ function useObject(objectName, options = {}) {
     onSuccess,
     onError
   } = options;
-  const fetchMetadata = useCallback2(async () => {
+  const dataRef = useRef4(data);
+  const etagRef = useRef4(etag);
+  useEffect3(() => {
+    dataRef.current = data;
+    etagRef.current = etag;
+  }, [data, etag]);
+  const handleSuccess = useEventCallback(onSuccess);
+  const handleError = useEventCallback(onError);
+  const fetchMetadata = useCallback3(async () => {
     if (!enabled) return;
     try {
       setIsLoading(true);
@@ -335,7 +381,7 @@ function useObject(objectName, options = {}) {
       setFromCache(false);
       if (useCache) {
         const result = await client.meta.getCached(objectName, {
-          ifNoneMatch: ifNoneMatch || etag,
+          ifNoneMatch: ifNoneMatch || etagRef.current,
           ifModifiedSince
         });
         if (result.notModified) {
@@ -346,24 +392,24 @@ function useObject(objectName, options = {}) {
             setEtag(result.etag.value);
           }
         }
-        onSuccess?.(result.data || data);
+        handleSuccess(result.data || dataRef.current);
       } else {
         const result = await client.meta.getItem("object", objectName);
         setData(result);
-        onSuccess?.(result);
+        handleSuccess(result);
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Failed to fetch object metadata");
       setError(error2);
-      onError?.(error2);
+      handleError(error2);
     } finally {
       setIsLoading(false);
     }
-  }, [client, objectName, locale, enabled, useCache, ifNoneMatch, ifModifiedSince, etag, data, onSuccess, onError]);
-  useEffect2(() => {
+  }, [client, objectName, locale, enabled, useCache, ifNoneMatch, ifModifiedSince, handleSuccess, handleError]);
+  useEffect3(() => {
     fetchMetadata();
   }, [fetchMetadata]);
-  const refetch = useCallback2(async () => {
+  const refetch = useCallback3(async () => {
     await fetchMetadata();
   }, [fetchMetadata]);
   return {
@@ -382,26 +428,28 @@ function useView(objectName, viewType = "list", options = {}) {
   const [isLoading, setIsLoading] = useState2(true);
   const [error, setError] = useState2(null);
   const { enabled = true, onSuccess, onError } = options;
-  const fetchView = useCallback2(async () => {
+  const handleSuccess = useEventCallback(onSuccess);
+  const handleError = useEventCallback(onError);
+  const fetchView = useCallback3(async () => {
     if (!enabled) return;
     try {
       setIsLoading(true);
       setError(null);
       const result = await client.meta.getView(objectName, viewType);
       setData(result);
-      onSuccess?.(result);
+      handleSuccess(result);
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Failed to fetch view configuration");
       setError(error2);
-      onError?.(error2);
+      handleError(error2);
     } finally {
       setIsLoading(false);
     }
-  }, [client, objectName, viewType, locale, enabled, onSuccess, onError]);
-  useEffect2(() => {
+  }, [client, objectName, viewType, locale, enabled, handleSuccess, handleError]);
+  useEffect3(() => {
     fetchView();
   }, [fetchView]);
-  const refetch = useCallback2(async () => {
+  const refetch = useCallback3(async () => {
     await fetchView();
   }, [fetchView]);
   return {
@@ -430,26 +478,29 @@ function useMetadata(fetcher, options = {}) {
   const [isLoading, setIsLoading] = useState2(true);
   const [error, setError] = useState2(null);
   const { enabled = true, onSuccess, onError } = options;
-  const fetchMetadata = useCallback2(async () => {
+  const runFetcher = useEventCallback(fetcher);
+  const handleSuccess = useEventCallback(onSuccess);
+  const handleError = useEventCallback(onError);
+  const fetchMetadata = useCallback3(async () => {
     if (!enabled) return;
     try {
       setIsLoading(true);
       setError(null);
-      const result = await fetcher(client);
+      const result = await runFetcher(client);
       setData(result);
-      onSuccess?.(result);
+      handleSuccess(result);
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Failed to fetch metadata");
       setError(error2);
-      onError?.(error2);
+      handleError(error2);
     } finally {
       setIsLoading(false);
     }
-  }, [client, fetcher, locale, enabled, onSuccess, onError]);
-  useEffect2(() => {
+  }, [client, runFetcher, locale, enabled, handleSuccess, handleError]);
+  useEffect3(() => {
     fetchMetadata();
   }, [fetchMetadata]);
-  const refetch = useCallback2(async () => {
+  const refetch = useCallback3(async () => {
     await fetchMetadata();
   }, [fetchMetadata]);
   return {
@@ -462,11 +513,11 @@ function useMetadata(fetcher, options = {}) {
 }
 
 // src/realtime-hooks.tsx
-import { useEffect as useEffect3, useState as useState3, useCallback as useCallback3 } from "react";
+import { useEffect as useEffect4, useState as useState3 } from "react";
 function useMetadataSubscription(type, options) {
   const client = useClient();
   const [event, setEvent] = useState3(null);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!client) return;
     const unsubscribe = client.events.subscribeMetadata(
       type,
@@ -482,7 +533,7 @@ function useMetadataSubscription(type, options) {
 function useDataSubscription(object, options) {
   const client = useClient();
   const [event, setEvent] = useState3(null);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!client) return;
     const unsubscribe = client.events.subscribeData(
       object,
@@ -497,36 +548,61 @@ function useDataSubscription(object, options) {
 }
 function useMetadataSubscriptionCallback(type, callback, options) {
   const client = useClient();
-  useEffect3(() => {
+  const handleEvent = useEventCallback(callback);
+  useEffect4(() => {
     if (!client) return;
     const unsubscribe = client.events.subscribeMetadata(
       type,
-      callback,
+      handleEvent,
       options
     );
     return () => {
       unsubscribe();
     };
-  }, [client, type, callback, options?.packageId]);
+  }, [client, type, handleEvent, options?.packageId]);
 }
 function useDataSubscriptionCallback(object, callback, options) {
   const client = useClient();
-  useEffect3(() => {
+  const handleEvent = useEventCallback(callback);
+  useEffect4(() => {
     if (!client) return;
     const unsubscribe = client.events.subscribeData(
       object,
-      callback,
+      handleEvent,
       options
     );
     return () => {
       unsubscribe();
     };
-  }, [client, object, callback, options?.recordId]);
+  }, [client, object, handleEvent, options?.recordId]);
+}
+function useBulkDataSubscription(object) {
+  const client = useClient();
+  const [event, setEvent] = useState3(null);
+  useEffect4(() => {
+    if (!client) return;
+    const unsubscribe = client.events.subscribeBulkData(object, (e) => setEvent(e));
+    return () => {
+      unsubscribe();
+    };
+  }, [client, object]);
+  return event;
+}
+function useBulkDataSubscriptionCallback(object, callback) {
+  const client = useClient();
+  const handleEvent = useEventCallback(callback);
+  useEffect4(() => {
+    if (!client) return;
+    const unsubscribe = client.events.subscribeBulkData(object, handleEvent);
+    return () => {
+      unsubscribe();
+    };
+  }, [client, object, handleEvent]);
 }
 function useRealtimeConnection() {
   const client = useClient();
   const [connected, setConnected] = useState3(true);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!client) {
       setConnected(false);
       return;
@@ -536,10 +612,8 @@ function useRealtimeConnection() {
   return connected;
 }
 function useAutoRefresh(object, refetch, options) {
-  const handleEvent = useCallback3((_event) => {
-    refetch();
-  }, [refetch]);
-  useDataSubscriptionCallback(object, handleEvent, options);
+  useDataSubscriptionCallback(object, (_event) => refetch(), options);
+  useBulkDataSubscriptionCallback(object, (_event) => refetch());
 }
 
 // src/index.tsx
@@ -550,6 +624,8 @@ export {
   ObjectStackLocaleContext,
   ObjectStackProvider,
   useAutoRefresh,
+  useBulkDataSubscription,
+  useBulkDataSubscriptionCallback,
   useClient,
   useDataSubscription,
   useDataSubscriptionCallback,