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

package/dist/index.js

@@ -35,6 +35,8 @@ __export(index_exports, {
   ObjectStackLocaleContext: () => ObjectStackLocaleContext,
   ObjectStackProvider: () => ObjectStackProvider,
   useAutoRefresh: () => useAutoRefresh,
+  useBulkDataSubscription: () => useBulkDataSubscription,
+  useBulkDataSubscriptionCallback: () => useBulkDataSubscriptionCallback,
   useClient: () => useClient,
   useDataSubscription: () => useDataSubscription,
   useDataSubscriptionCallback: () => useDataSubscriptionCallback,
@@ -80,14 +82,33 @@ function useClient() {
 }
 
 // src/data-hooks.tsx
+var import_react3 = require("react");
+
+// src/internal-deps.ts
 var import_react2 = require("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 = (0, import_react2.useRef)(fn);
+  (0, import_react2.useEffect)(() => {
+    ref.current = fn;
+  }, [fn]);
+  return (0, import_react2.useCallback)((...args) => ref.current?.(...args), []);
+}
+
+// src/data-hooks.tsx
 function useQuery(object, options = {}) {
   const client = useClient();
-  const [data, setData] = (0, import_react2.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
-  const [isRefetching, setIsRefetching] = (0, import_react2.useState)(false);
-  const [error, setError] = (0, import_react2.useState)(null);
-  const intervalRef = (0, import_react2.useRef)(void 0);
+  const [data, setData] = (0, import_react3.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
+  const [isRefetching, setIsRefetching] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const intervalRef = (0, import_react3.useRef)(void 0);
   const {
     query,
     // Canonical names take precedence over legacy names
@@ -106,7 +127,17 @@ function useQuery(object, options = {}) {
   const resolvedSort = orderBy;
   const resolvedLimit = limit;
   const resolvedOffset = offset;
-  const fetchData = (0, import_react2.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 = (0, import_react3.useCallback)(async (isRefetch = false) => {
     if (!enabled) return;
     try {
       if (isRefetch) {
@@ -128,20 +159,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]);
-  (0, import_react2.useEffect)(() => {
+  }, [client, object, queryKey, enabled, handleSuccess, handleError]);
+  (0, import_react3.useEffect)(() => {
     fetchData();
   }, [fetchData]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (refetchInterval && enabled) {
       intervalRef.current = setInterval(() => {
         fetchData(true);
@@ -154,7 +185,7 @@ function useQuery(object, options = {}) {
     }
     return void 0;
   }, [refetchInterval, enabled, fetchData]);
-  const refetch = (0, import_react2.useCallback)(async () => {
+  const refetch = (0, import_react3.useCallback)(async () => {
     await fetchData(true);
   }, [fetchData]);
   return {
@@ -167,11 +198,11 @@ function useQuery(object, options = {}) {
 }
 function useMutation(object, operation, options = {}) {
   const client = useClient();
-  const [data, setData] = (0, import_react2.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
-  const [error, setError] = (0, import_react2.useState)(null);
+  const [data, setData] = (0, import_react3.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
   const { onSuccess, onError, onSettled } = options;
-  const mutateAsync = (0, import_react2.useCallback)(async (variables) => {
+  const mutateAsync = (0, import_react3.useCallback)(async (variables) => {
     setIsLoading(true);
     setError(null);
     try {
@@ -216,12 +247,12 @@ function useMutation(object, operation, options = {}) {
       setIsLoading(false);
     }
   }, [client, object, operation, onSuccess, onError, onSettled]);
-  const mutate = (0, import_react2.useCallback)((variables) => {
+  const mutate = (0, import_react3.useCallback)((variables) => {
     return mutateAsync(variables).catch(() => {
       return null;
     });
   }, [mutateAsync]);
-  const reset = (0, import_react2.useCallback)(() => {
+  const reset = (0, import_react3.useCallback)(() => {
     setData(null);
     setError(null);
     setIsLoading(false);
@@ -237,7 +268,7 @@ function useMutation(object, operation, options = {}) {
 }
 function usePagination(object, options = {}) {
   const { pageSize = 20, initialPage = 1, ...queryOptions } = options;
-  const [page, setPage] = (0, import_react2.useState)(initialPage);
+  const [page, setPage] = (0, import_react3.useState)(initialPage);
   const queryResult = useQuery(object, {
     ...queryOptions,
     limit: pageSize,
@@ -247,17 +278,17 @@ function usePagination(object, options = {}) {
   const totalPages = Math.ceil(totalCount / pageSize);
   const hasNextPage = page < totalPages;
   const hasPreviousPage = page > 1;
-  const nextPage = (0, import_react2.useCallback)(() => {
+  const nextPage = (0, import_react3.useCallback)(() => {
     if (hasNextPage) {
       setPage((p) => p + 1);
     }
   }, [hasNextPage]);
-  const previousPage = (0, import_react2.useCallback)(() => {
+  const previousPage = (0, import_react3.useCallback)(() => {
     if (hasPreviousPage) {
       setPage((p) => p - 1);
     }
   }, [hasPreviousPage]);
-  const goToPage = (0, import_react2.useCallback)((newPage) => {
+  const goToPage = (0, import_react3.useCallback)((newPage) => {
     const clampedPage = Math.max(1, Math.min(newPage, totalPages));
     setPage(clampedPage);
   }, [totalPages]);
@@ -290,12 +321,21 @@ function useInfiniteQuery(object, options = {}) {
   const resolvedFields = fields;
   const resolvedWhere = where;
   const resolvedSort = orderBy;
-  const [pages, setPages] = (0, import_react2.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
-  const [isFetchingNextPage, setIsFetchingNextPage] = (0, import_react2.useState)(false);
-  const [error, setError] = (0, import_react2.useState)(null);
-  const [hasNextPage, setHasNextPage] = (0, import_react2.useState)(true);
-  const fetchPage = (0, import_react2.useCallback)(async (skip, isNextPage = false) => {
+  const queryKey = stableKey({
+    query,
+    where: resolvedWhere,
+    fields: resolvedFields,
+    orderBy: resolvedSort,
+    pageSize
+  });
+  const handleSuccess = useEventCallback(onSuccess);
+  const handleError = useEventCallback(onError);
+  const [pages, setPages] = (0, import_react3.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
+  const [isFetchingNextPage, setIsFetchingNextPage] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const [hasNextPage, setHasNextPage] = (0, import_react3.useState)(true);
+  const fetchPage = (0, import_react3.useCallback)(async (skip, isNextPage = false) => {
     try {
       if (isNextPage) {
         setIsFetchingNextPage(true);
@@ -327,27 +367,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]);
-  (0, import_react2.useEffect)(() => {
+  }, [client, object, queryKey, handleSuccess, handleError]);
+  (0, import_react3.useEffect)(() => {
     if (enabled) {
       fetchPage(0);
     }
   }, [enabled, fetchPage]);
-  const fetchNextPage = (0, import_react2.useCallback)(async () => {
+  const fetchNextPage = (0, import_react3.useCallback)(async () => {
     if (!hasNextPage || isFetchingNextPage) return;
     const nextSkip = pages.length * pageSize;
     await fetchPage(nextSkip, true);
   }, [hasNextPage, isFetchingNextPage, pages.length, pageSize, fetchPage]);
-  const refetch = (0, import_react2.useCallback)(async () => {
+  const refetch = (0, import_react3.useCallback)(async () => {
     setPages([]);
     await fetchPage(0);
   }, [fetchPage]);
@@ -365,15 +405,15 @@ function useInfiniteQuery(object, options = {}) {
 }
 
 // src/metadata-hooks.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useObject(objectName, options = {}) {
   const client = useClient();
   const locale = useObjectStackLocale();
-  const [data, setData] = (0, import_react3.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
-  const [error, setError] = (0, import_react3.useState)(null);
-  const [etag, setEtag] = (0, import_react3.useState)();
-  const [fromCache, setFromCache] = (0, import_react3.useState)(false);
+  const [data, setData] = (0, import_react4.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(true);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const [etag, setEtag] = (0, import_react4.useState)();
+  const [fromCache, setFromCache] = (0, import_react4.useState)(false);
   const {
     enabled = true,
     useCache = true,
@@ -382,7 +422,15 @@ function useObject(objectName, options = {}) {
     onSuccess,
     onError
   } = options;
-  const fetchMetadata = (0, import_react3.useCallback)(async () => {
+  const dataRef = (0, import_react4.useRef)(data);
+  const etagRef = (0, import_react4.useRef)(etag);
+  (0, import_react4.useEffect)(() => {
+    dataRef.current = data;
+    etagRef.current = etag;
+  }, [data, etag]);
+  const handleSuccess = useEventCallback(onSuccess);
+  const handleError = useEventCallback(onError);
+  const fetchMetadata = (0, import_react4.useCallback)(async () => {
     if (!enabled) return;
     try {
       setIsLoading(true);
@@ -390,7 +438,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) {
@@ -401,24 +449,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]);
-  (0, import_react3.useEffect)(() => {
+  }, [client, objectName, locale, enabled, useCache, ifNoneMatch, ifModifiedSince, handleSuccess, handleError]);
+  (0, import_react4.useEffect)(() => {
     fetchMetadata();
   }, [fetchMetadata]);
-  const refetch = (0, import_react3.useCallback)(async () => {
+  const refetch = (0, import_react4.useCallback)(async () => {
     await fetchMetadata();
   }, [fetchMetadata]);
   return {
@@ -433,30 +481,32 @@ function useObject(objectName, options = {}) {
 function useView(objectName, viewType = "list", options = {}) {
   const client = useClient();
   const locale = useObjectStackLocale();
-  const [data, setData] = (0, import_react3.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
-  const [error, setError] = (0, import_react3.useState)(null);
+  const [data, setData] = (0, import_react4.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(true);
+  const [error, setError] = (0, import_react4.useState)(null);
   const { enabled = true, onSuccess, onError } = options;
-  const fetchView = (0, import_react3.useCallback)(async () => {
+  const handleSuccess = useEventCallback(onSuccess);
+  const handleError = useEventCallback(onError);
+  const fetchView = (0, import_react4.useCallback)(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]);
-  (0, import_react3.useEffect)(() => {
+  }, [client, objectName, viewType, locale, enabled, handleSuccess, handleError]);
+  (0, import_react4.useEffect)(() => {
     fetchView();
   }, [fetchView]);
-  const refetch = (0, import_react3.useCallback)(async () => {
+  const refetch = (0, import_react4.useCallback)(async () => {
     await fetchView();
   }, [fetchView]);
   return {
@@ -481,30 +531,33 @@ function useFields(objectName, options = {}) {
 function useMetadata(fetcher, options = {}) {
   const client = useClient();
   const locale = useObjectStackLocale();
-  const [data, setData] = (0, import_react3.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
-  const [error, setError] = (0, import_react3.useState)(null);
+  const [data, setData] = (0, import_react4.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react4.useState)(true);
+  const [error, setError] = (0, import_react4.useState)(null);
   const { enabled = true, onSuccess, onError } = options;
-  const fetchMetadata = (0, import_react3.useCallback)(async () => {
+  const runFetcher = useEventCallback(fetcher);
+  const handleSuccess = useEventCallback(onSuccess);
+  const handleError = useEventCallback(onError);
+  const fetchMetadata = (0, import_react4.useCallback)(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]);
-  (0, import_react3.useEffect)(() => {
+  }, [client, runFetcher, locale, enabled, handleSuccess, handleError]);
+  (0, import_react4.useEffect)(() => {
     fetchMetadata();
   }, [fetchMetadata]);
-  const refetch = (0, import_react3.useCallback)(async () => {
+  const refetch = (0, import_react4.useCallback)(async () => {
     await fetchMetadata();
   }, [fetchMetadata]);
   return {
@@ -517,11 +570,11 @@ function useMetadata(fetcher, options = {}) {
 }
 
 // src/realtime-hooks.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useMetadataSubscription(type, options) {
   const client = useClient();
-  const [event, setEvent] = (0, import_react4.useState)(null);
-  (0, import_react4.useEffect)(() => {
+  const [event, setEvent] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
     if (!client) return;
     const unsubscribe = client.events.subscribeMetadata(
       type,
@@ -536,8 +589,8 @@ function useMetadataSubscription(type, options) {
 }
 function useDataSubscription(object, options) {
   const client = useClient();
-  const [event, setEvent] = (0, import_react4.useState)(null);
-  (0, import_react4.useEffect)(() => {
+  const [event, setEvent] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
     if (!client) return;
     const unsubscribe = client.events.subscribeData(
       object,
@@ -552,36 +605,61 @@ function useDataSubscription(object, options) {
 }
 function useMetadataSubscriptionCallback(type, callback, options) {
   const client = useClient();
-  (0, import_react4.useEffect)(() => {
+  const handleEvent = useEventCallback(callback);
+  (0, import_react5.useEffect)(() => {
     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();
-  (0, import_react4.useEffect)(() => {
+  const handleEvent = useEventCallback(callback);
+  (0, import_react5.useEffect)(() => {
     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] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
+    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);
+  (0, import_react5.useEffect)(() => {
+    if (!client) return;
+    const unsubscribe = client.events.subscribeBulkData(object, handleEvent);
+    return () => {
+      unsubscribe();
+    };
+  }, [client, object, handleEvent]);
 }
 function useRealtimeConnection() {
   const client = useClient();
-  const [connected, setConnected] = (0, import_react4.useState)(true);
-  (0, import_react4.useEffect)(() => {
+  const [connected, setConnected] = (0, import_react5.useState)(true);
+  (0, import_react5.useEffect)(() => {
     if (!client) {
       setConnected(false);
       return;
@@ -591,10 +669,8 @@ function useRealtimeConnection() {
   return connected;
 }
 function useAutoRefresh(object, refetch, options) {
-  const handleEvent = (0, import_react4.useCallback)((_event) => {
-    refetch();
-  }, [refetch]);
-  useDataSubscriptionCallback(object, handleEvent, options);
+  useDataSubscriptionCallback(object, (_event) => refetch(), options);
+  useBulkDataSubscriptionCallback(object, (_event) => refetch());
 }
 
 // src/index.tsx
@@ -606,6 +682,8 @@ var import_client = require("@objectstack/client");
   ObjectStackLocaleContext,
   ObjectStackProvider,
   useAutoRefresh,
+  useBulkDataSubscription,
+  useBulkDataSubscriptionCallback,
   useClient,
   useDataSubscription,
   useDataSubscriptionCallback,