@arrai-innovations/reactive-helpers 9.0.3 → 10.0.1

package/use/listSort.js

@@ -1,14 +1,29 @@
 import { assignReactiveObject, keyDiff } from "../utils/index.js";
+import { listCalculatedStateKeys } from "./listCalculated.js";
+import { listFilterStateKeys } from "./listFilter.js";
+import { listInstanceStateKeys } from "./listInstance.js";
+import { listRelatedStateKeys } from "./listRelated.js";
+import { listSubscriptionStateKeys } from "./listSubscription.js";
 import cloneDeep from "lodash-es/cloneDeep.js";
 import get from "lodash-es/get.js";
 import identity from "lodash-es/identity.js";
 import isEmpty from "lodash-es/isEmpty.js";
 import isNull from "lodash-es/isNull.js";
 import isUndefined from "lodash-es/isUndefined.js";
-import partial from "lodash-es/partial.js";
 import throttle from "lodash-es/throttle.js";
 import zip from "lodash-es/zip.js";
-import { effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
+import { effectScope, reactive, toRef, unref, watch } from "vue";
+
+export const listSortStateKeys = [
+    "orderByRules",
+    // "order",
+    // "objectsInOrder",
+    "sortCriteria",
+    "sortCriteriaEffectScopes",
+    "orderByDesc",
+];
+
+export const listSortFunctions = [];
 
 const collator = new Intl.Collator(undefined, { numeric: true });
 
@@ -39,42 +54,43 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
         order: [],
         objectsInOrder: [],
         sortCriteria: {},
-        sortCriteriaWatches: {},
+        sortCriteriaEffectScopes: {},
         orderByDesc: [],
     });
     const es = effectScope();
 
     function removeSortCriteria(removedKey) {
-        const stopWatches = state.sortCriteriaWatches[removedKey] || [];
-        let stopWatch = stopWatches.pop();
-        while (stopWatch) {
-            stopWatch();
-            stopWatch = stopWatches.pop();
+        const oldScope = state.sortCriteriaEffectScopes[removedKey];
+        if (oldScope) {
+            oldScope.stop();
+            delete state.sortCriteriaEffectScopes[removedKey];
         }
-        delete state.sortCriteriaWatches[removedKey];
         delete state.sortCriteria[removedKey];
     }
 
     function addSortCriteria(object, key) {
-        const oldStopWatches = state.sortCriteriaWatches[key] || [];
-        let stopWatch = oldStopWatches.pop();
-        while (stopWatch) {
-            stopWatch();
-            stopWatch = oldStopWatches.pop();
+        const oldScope = state.sortCriteriaEffectScopes[key];
+        if (oldScope) {
+            oldScope.stop();
         }
-        const stopWatches = [];
-        if (!state.sortCriteria[key]) {
-            state.sortCriteria[key] = [];
-        }
-        stopWatches.push(
+        const newScope = effectScope();
+        newScope.run(() => {
+            if (!state.sortCriteria[key]) {
+                state.sortCriteria[key] = [];
+            }
             watch(
-                [object, state.orderByRules],
+                [object, toRef(state, "orderByRules")],
                 () => {
+                    const obj = unref(object);
                     const newSearchCriteria = [];
                     for (const orderByObj of state.orderByRules.filter(identity)) {
-                        const obo = unref(orderByObj);
-                        const getter = obo.keyFn ? obo.keyFn : partial(get, partial.placeholder, obo.key);
-                        newSearchCriteria.push(getter(object));
+                        let newItem;
+                        if (orderByObj.keyFn) {
+                            newItem = orderByObj.keyFn(obj, state);
+                        } else {
+                            newItem = get(obj, orderByObj.key);
+                        }
+                        newSearchCriteria.push(newItem);
                     }
                     assignReactiveObject(state.sortCriteria[key], newSearchCriteria);
                 },
@@ -82,9 +98,9 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
                     deep: true,
                     immediate: true,
                 }
-            )
-        );
-        state.sortCriteriaWatches[key] = stopWatches;
+            );
+        });
+        state.sortCriteriaEffectScopes[key] = newScope;
     }
 
     function sortCriteriaWatch() {
@@ -101,10 +117,12 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
             removeSortCriteria(removedKey);
         }
 
-        for (const addedKey of addedKeys) {
-            const object = parentState.objects[addedKey];
-            addSortCriteria(object, addedKey);
-        }
+        es.run(() => {
+            for (const addedKey of addedKeys) {
+                const object = toRef(() => parentState.objects[addedKey]);
+                addSortCriteria(object, addedKey);
+            }
+        });
         assignReactiveObject(
             state.orderByDesc,
             state.orderByRules.filter(identity).map((e) => e.desc || false)
@@ -113,8 +131,9 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
 
     function sortWatch() {
         if (!state.orderByRules || !state.orderByRules.length) {
-            assignReactiveObject(state.order, Object.keys(parentState.objects));
-            assignReactiveObject(state.objectsInOrder, Object.values(parentState.objects));
+            console.log("sortWatch no orderByRules");
+            assignReactiveObject(state.order, cloneDeep(parentState.order));
+            assignReactiveObject(state.objectsInOrder, cloneDeep(parentState.objectsInOrder));
             return;
         }
 
@@ -161,23 +180,34 @@ export function useListSort({ parentState, orderByRules, sortThrottleWait = defa
     const throttledSortWatch = throttle(sortWatch, sortThrottleWait);
 
     es.run(() => {
-        state.objects = toRef(parentState, "objects");
+        for (const key of listInstanceStateKeys) {
+            if (["order", "objectsInOrder"].includes(key)) {
+                continue;
+            }
+            state[key] = toRef(parentState, key);
+        }
+        for (const key of listSubscriptionStateKeys) {
+            state[key] = toRef(parentState, key);
+        }
+        for (const key of listRelatedStateKeys) {
+            state[key] = toRef(parentState, key);
+        }
+        for (const key of listCalculatedStateKeys) {
+            state[key] = toRef(parentState, key);
+        }
+        for (const key of listFilterStateKeys) {
+            state[key] = toRef(parentState, key);
+        }
         // we do not need two immediate watches to the same function.
         watch(() => Object.keys(parentState.objects), sortCriteriaWatch);
-        watch(() => cloneDeep(state.orderByRules), sortCriteriaWatch, {
+        watch(toRef(state, "orderByRules"), sortCriteriaWatch, {
             deep: true,
             immediate: true,
         });
 
-        // watching parentState.order triggers some out of order `computed`s, now that listInstance.order is a computed.
-        watch([toRef(state, "orderByDesc"), () => state.sortCriteria], throttledSortWatch, {
+        watch([toRef(state, "orderByDesc"), toRef(state, "sortCriteria")], throttledSortWatch, {
             deep: true,
         });
-        onScopeDispose(() => {
-            Object.keys(state.sortCriteriaWatches).forEach((key) => {
-                removeSortCriteria(key);
-            });
-        });
     });
 
     return {

package/use/listSubscription.js

@@ -14,10 +14,6 @@ export class ListSubscriptionError extends Error {
     }
 }
 
-const defaultCrud = {
-    subscribe: undefined,
-};
-
 export const listSubscriptionStateKeys = [
     "subscriptionLoading",
     "subscriptionErrored",
@@ -27,10 +23,25 @@ export const listSubscriptionStateKeys = [
     "subscribed",
 ];
 
-export function setListSubscriptionCrud({ subscribe }) {
-    defaultCrud.subscribe = subscribe;
-}
+export const listSubscriptionFunctions = ["subscribe", "unsubscribe", "clearError"];
 
+/**
+ * The configuration options used to create a list subscription.
+ * @typedef {object} ListSubscriptionOptions
+ * @property {object} props - passed on to a created list instance if one is not provided
+ * @property {object} functions - passed on to a created list instance if one is not provided
+ * @property {ListInstance} listInstance - a list instance to use instead of creating one
+ * @property {boolean} keepOldPages - if true, pages will not be cleared when defaultPageCallback is called. default is false.
+ */
+
+/* eslint-disable jsdoc/check-types */
+// types valid for jsdoc-to-markdown, which uses the strict jsdoc.app. Object shorthand syntax doesn't work.
+/**
+ * A Vue composition function that creates multiple list instances, and returns them as an object.
+ * @param {Object.<string, ListInstanceOptions>} listInstanceArgs - each desired list instance options, keyed by an instance name.
+ * @returns {Object.<string, ListInstance>} - each list instance, keyed by the instance name.
+ */
+/* eslint-enable jsdoc/check-types */
 export function useListSubscriptions(args, listInstances = {}) {
     const subscriptions = {};
     for (const [key, value] of Object.entries(args)) {
@@ -39,13 +50,43 @@ export function useListSubscriptions(args, listInstances = {}) {
     return subscriptions;
 }
 
-export function useListSubscription({ listInstance, props, functions }) {
+/**
+ * A reactive object that manages a list of objects, as returned by `useListInstance`.
+ * @typedef {object} ListSubscriptionState
+ * @augments ListInstanceState
+ * @property {boolean} subscriptionLoading - true if the subscription is loading
+ * @property {boolean} subscriptionErrored - true if the subscription errored
+ * @property {Error} subscriptionError - the error that caused the subscription to error
+ * @property {boolean} intendToList - true if the list should be fetched, or refetched when args change
+ * @property {boolean} intendToSubscribe - true if the list should subscribe for updates
+ * @property {boolean} subscribed - true if the subscription is active
+ */
+
+/**
+ * @typedef {object} ListSubscription
+ * @property {ListSubscriptionState} state - the reactive state of the list subscription
+ * @property {ListInstance} listInstance - the list instance used by the subscription
+ * @property {object} listIntent - the useCancelleableIntent object managing if the list should be (re)fetched
+ * @property {object} subscriptionIntent - the useCancelleableIntent object managing if the subscription should be (un)subscribed
+ * @property {Function} subscribe - subscribe to the list
+ * @property {Function} unsubscribe - unsubscribe from the list
+ * @property {Function} clearError - clear the subscription error
+ * @property {object} effectScope - a Vue effect scope
+ */
+
+/**
+ * `useListSubscription` creates a reactive object that manages a list of objects, as returned by `useListInstance`,
+ *  causing the list to be re-fetched as needed and listening for updates to the list.
+ * @param {ListSubscriptionOptions} options
+ * @returns ListSubscription
+ */
+export function useListSubscription({ listInstance, props, functions, keepOldPages = false }) {
     if (!listInstance && !props) {
-        throw new ListSubscriptionError("useListSubscription should be passed listInstance or props and crudArgs.");
+        throw new ListSubscriptionError("useListSubscription should be passed listInstance or props and functions.");
     }
     if (listInstance && props) {
         throw new ListSubscriptionError(
-            "useListSubscription should be passed listInstance or props and crudArgs, not both."
+            "useListSubscription should be passed listInstance or props and functions, not both."
         );
     }
     if (!listInstance) {
@@ -55,10 +96,11 @@ export function useListSubscription({ listInstance, props, functions }) {
         if (!("retrieveArgs" in props)) {
             console.error("retrieveArgs not set, must be true for intendToList or intendToSubscribe to work.");
         }
-        listInstance = useListInstance({ props, functions });
-    }
-    if (!listInstance.state.crud.subscribe) {
-        listInstance.state.crud.subscribe = defaultCrud.subscribe;
+        listInstance = useListInstance({ props, functions, keepOldPages });
+    } else {
+        if (functions) {
+            console.error("functions passed to useListSubscription, but listInstance was passed. functions ignored.");
+        }
     }
     const parentState = listInstance.state;
 
@@ -188,7 +230,7 @@ export function useListSubscription({ listInstance, props, functions }) {
                     state.subscriptionErrored = true;
                     state.subscriptionError = err;
                 });
-                catchPromise.cancel = subscribePromise.cancel;
+                catchPromise.cancel = subscribePromise.cancel.bind(subscribePromise);
                 return catchPromise;
             },
             watchArguments: reactive({

package/use/object.js

@@ -1,7 +1,7 @@
-import { useObjectCalculated } from "./objectCalculated.js";
-import { useObjectInstance } from "./objectInstance.js";
-import { useObjectRelated } from "./objectRelated.js";
-import { useObjectSubscription } from "./objectSubscription.js";
+import { useObjectCalculated, objectCalculatedFunctions } from "./objectCalculated.js";
+import { useObjectInstance, objectInstanceFunctions } from "./objectInstance.js";
+import { useObjectRelated, objectRelatedFunctions } from "./objectRelated.js";
+import { useObjectSubscription, objectSubscriptionFunctions } from "./objectSubscription.js";
 import { effectScope, reactive, shallowReadonly, toRef } from "vue";
 
 // Manages a chain of useObject* functions
@@ -49,7 +49,7 @@ export const useObject = ({ props, functions }) => {
         // objectInstance.clear also does objectInstance.clearError
         managed.objectInstance.clear();
     };
-    return reactive({
+    const returnObject = reactive({
         managed: shallowReadonly(managed),
         state: managed.objectCalculated.state,
         retrieve: managed.objectInstance.retrieve,
@@ -64,4 +64,25 @@ export const useObject = ({ props, functions }) => {
         clear,
         effectScope: es,
     });
+    const handledDuplicateFunctions = {
+        clearError,
+        clear,
+    };
+    for (const [source, fnNames] of [
+        [managed.objectInstance, objectInstanceFunctions],
+        [managed.objectSubscription, objectSubscriptionFunctions],
+        [managed.objectRelated, objectRelatedFunctions],
+        [managed.objectCalculated, objectCalculatedFunctions],
+    ]) {
+        for (const fnName of fnNames) {
+            if (handledDuplicateFunctions[fnName]) {
+                continue;
+            }
+            returnObject[fnName] = source[fnName];
+        }
+    }
+    for (const [fnName, fn] of Object.entries(handledDuplicateFunctions)) {
+        returnObject[fnName] = fn;
+    }
+    return returnObject;
 };

package/use/objectCalculated.js

@@ -1,8 +1,21 @@
-import { keyDiff, loadingCombine } from "../utils/index.js";
+import { keyDiff } from "../utils/keyDiff.js";
+import { loadingCombine } from "../utils/loadingCombine.js";
+import { objectInstanceStateKeys } from "./objectInstance.js";
+import { objectRelatedStateKeys } from "./objectRelated.js";
+import { objectSubscriptionStateKeys } from "./objectSubscription.js";
 import { useWatchesRunning } from "./watchesRunning.js";
 import isEmpty from "lodash-es/isEmpty.js";
 import { computed, effectScope, onScopeDispose, reactive, toRef, watch } from "vue";
 
+export const objectCalculatedStateKeys = [
+    "calculatedObject",
+    "calculatedObjectRules",
+    "calculatedObjectWatchRunning",
+    "parentStateObjectWatchRunning",
+];
+
+export const objectCalculatedFunctions = [];
+
 export function useObjectCalculateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
         useObjectCalculated({
@@ -13,54 +26,28 @@ export function useObjectCalculateds(instances, args) {
 }
 
 // the single object version of useListCalculated
-export function useObjectCalculated({
-    parentState,
-    calculatedObjectRules,
-    calculatedObjectPropertyName = "calculatedObject", // NOT REACTIVE
-    passThroughPropertyNames = [
-        // instance
-        "crud",
-        "deleted",
-        "error",
-        "errored",
-        "id",
-        "loading",
-        "object",
-        "retrieveArgs",
-        // subscription
-        "intendToRetrieve",
-        "intendToSubscribe",
-        "subscribed",
-        "subscriptionError",
-        "subscriptionErrored",
-        "subscriptionLoading",
-        // related
-        "relatedObject",
-        "relatedObjectObjects",
-        "relatedObjectRules",
-        "relatedObjectWatchRunning",
-        "relatedRunning",
-    ], // NOT REACTIVE
-}) {
+export function useObjectCalculated({ parentState, calculatedObjectRules }) {
     const state = reactive({
         calculatedObjectRules,
-        calculatedObjectObjects: {},
+        calculatedObject: {},
         parentStateObjectWatchRunning: false,
         calculatedObjectWatchRunning: false,
     });
     const calculatedObjectEffectScopes = {};
     const calculatedObjectOriginalFunctions = {};
 
-    // don't change calculatedObjectPropertyName on us or it will break
-    const copn = calculatedObjectPropertyName + "";
-
     let watchesRunning = null;
 
     const es = effectScope();
 
     es.run(() => {
-        state[copn] = toRef(state, "calculatedObjectObjects");
-        for (let key of passThroughPropertyNames) {
+        for (const key of objectInstanceStateKeys) {
+            state[key] = toRef(parentState, key);
+        }
+        for (const key of objectSubscriptionStateKeys) {
+            state[key] = toRef(parentState, key);
+        }
+        for (const key of objectRelatedStateKeys) {
             state[key] = toRef(parentState, key);
         }
 
@@ -84,7 +71,7 @@ export function useObjectCalculated({
             }
             for (const removedKey of removedKeys) {
                 delete calculatedObjectOriginalFunctions[removedKey];
-                delete state.calculatedObjectObjects[removedKey];
+                delete state.calculatedObject[removedKey];
                 if (calculatedObjectEffectScopes[removedKey]) {
                     calculatedObjectEffectScopes[removedKey].stop();
                     delete calculatedObjectEffectScopes[removedKey];
@@ -94,7 +81,7 @@ export function useObjectCalculated({
                 calculatedObjectOriginalFunctions[addedKey] = state.calculatedObjectRules[addedKey];
                 calculatedObjectEffectScopes[addedKey] = effectScope();
                 calculatedObjectEffectScopes[addedKey].run(() => {
-                    state.calculatedObjectObjects[addedKey] = computed(() =>
+                    state.calculatedObject[addedKey] = computed(() =>
                         calculatedObjectOriginalFunctions[addedKey](state.object)
                     );
                 });
@@ -110,7 +97,7 @@ export function useObjectCalculated({
         });
 
         state.calculatedRunning = toRef(watchesRunning.state, "running");
-        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.relatedRunning));
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
 
         onScopeDispose(() => {
             for (const key in calculatedObjectEffectScopes) {

package/use/objectInstance.js

@@ -1,6 +1,5 @@
-import { addOrUpdateReactiveObject, assignReactiveObject } from "../utils/index.js";
-import cloneDeep from "lodash-es/cloneDeep.js";
-import isFunction from "lodash-es/isFunction.js";
+import { getObjectCrud } from "../config/objectCrud.js";
+import { assignReactiveObject } from "../utils/assignReactiveObject.js";
 import { reactive, toRef } from "vue";
 
 export class ObjectError extends Error {
@@ -10,23 +9,18 @@ export class ObjectError extends Error {
     }
 }
 
-const defaultCrud = {
-    args: {},
-    retrieve: undefined,
-    create: undefined,
-    update: undefined,
-    patch: undefined,
-    delete: undefined,
-};
+export const objectInstanceStateKeys = [
+    "crud",
+    "id",
+    "retrieveArgs",
+    "object",
+    "loading",
+    "errored",
+    "error",
+    "deleted",
+];
 
-export function setObjectInstanceCrud({ retrieve, create, update, patch, delete: deleteFn, args = {} }) {
-    defaultCrud.retrieve = retrieve;
-    defaultCrud.create = create;
-    defaultCrud.update = update;
-    defaultCrud.patch = patch;
-    defaultCrud.delete = deleteFn;
-    Object.assign(defaultCrud.args, args);
-}
+export const objectInstanceFunctions = ["create", "retrieve", "update", "delete", "patch", "clearError", "clear"];
 
 export function useObjectInstances(instanceArgs) {
     const instances = {};
@@ -40,11 +34,11 @@ export function useObjectInstance({ props, functions = {} }) {
     const state = reactive({
         crud: {
             args: {},
-            retrieve: undefined,
             create: undefined,
+            retrieve: undefined,
             update: undefined,
-            patch: undefined,
             delete: undefined,
+            patch: undefined,
         },
         object: {},
         id: toRef(props, "id"),
@@ -54,18 +48,8 @@ export function useObjectInstance({ props, functions = {} }) {
         error: null,
         deleted: false,
     });
-    // prevent linking of all instances to the same default .args object
-    Object.assign(state.crud, cloneDeep(defaultCrud));
-    if (props.crudArgs) {
-        addOrUpdateReactiveObject(state.crud.args, props.crudArgs);
-    }
-    for (const [key, value] of Object.entries(functions)) {
-        if (isFunction(value) && key in state.crud) {
-            state[key] = value;
-        } else {
-            throw ObjectError(`Invalid function "${key}" for useObjectInstance: invalid key or not a function.`);
-        }
-    }
+
+    getObjectCrud(state.crud, { props, functions });
 
     // due to retrieve being called by `useCancelleableIntent`, if called manually then by the watch,
     //  it will run into the loading check. Instead, return the current retrieve promise if it exists.
@@ -229,11 +213,11 @@ export function useObjectInstance({ props, functions = {} }) {
 
     return reactive({
         state,
-        retrieve,
         create,
+        retrieve,
         update,
-        patch,
         delete: deleteFn,
+        patch,
         clearError,
         clear,
     });

package/use/objectRelated.js

@@ -1,4 +1,7 @@
-import { keyDiff } from "../utils/index.js";
+import { loadingCombine } from "../utils/index.js";
+import { keyDiff } from "../utils/keyDiff.js";
+import { objectInstanceStateKeys } from "./objectInstance.js";
+import { objectSubscriptionStateKeys } from "./objectSubscription.js";
 import { useWatchesRunning } from "./watchesRunning.js";
 import get from "lodash-es/get.js";
 import isArray from "lodash-es/isArray.js";
@@ -6,6 +9,15 @@ import isEmpty from "lodash-es/isEmpty.js";
 import isUndefined from "lodash-es/isUndefined.js";
 import { computed, effectScope, onScopeDispose, reactive, toRef, unref, watch } from "vue";
 
+export const objectRelatedStateKeys = [
+    "relatedObject",
+    "relatedObjectRules",
+    "relatedObjectWatchRunning",
+    "parentStateObjectWatchRunning",
+];
+
+export const objectRelatedFunctions = [];
+
 export function useObjectRelateds(instances, args) {
     for (const [key, value] of Object.entries(args)) {
         useObjectRelated({
@@ -16,47 +28,24 @@ export function useObjectRelateds(instances, args) {
 }
 
 // the single object version of useListRelated
-export function useObjectRelated({
-    parentState,
-    relatedObjectRules,
-    relatedObjectPropertyName = "relatedObject", // NOT REACTIVE
-    passThroughPropertyNames = [
-        // instance
-        "crud",
-        "deleted",
-        "error",
-        "errored",
-        "id",
-        "loading",
-        "object",
-        "retrieveArgs",
-        // subscription
-        "intendToRetrieve",
-        "intendToSubscribe",
-        "subscribed",
-        "subscriptionError",
-        "subscriptionErrored",
-        "subscriptionLoading",
-    ], // NOT REACTIVE
-}) {
+export function useObjectRelated({ parentState, relatedObjectRules }) {
     const state = reactive({
         relatedObjectRules,
-        relatedObjectObjects: {},
+        relatedObject: {},
         parentStateObjectWatchRunning: false,
         relatedObjectWatchRunning: false,
     });
     const relatedObjectEffectScopes = {};
 
-    // don't change relatedObjectPropertyName on us or it will break
-    const ropn = relatedObjectPropertyName + "";
-
     let watchesRunning = null;
 
     const es = effectScope();
 
     es.run(() => {
-        state[ropn] = toRef(state, "relatedObjectObjects");
-        for (let key of passThroughPropertyNames) {
+        for (const key of objectInstanceStateKeys) {
+            state[key] = toRef(parentState, key);
+        }
+        for (const key of objectSubscriptionStateKeys) {
             state[key] = toRef(parentState, key);
         }
 
@@ -64,16 +53,16 @@ export function useObjectRelated({
             let addedRuleKeys = [],
                 removedRuleKeys = [];
             if (!state.relatedObjectRules) {
-                removedRuleKeys = Object.keys(state.relatedObjectObjects);
+                removedRuleKeys = Object.keys(state.relatedObject);
             } else {
                 ({ addedKeys: addedRuleKeys, removedKeys: removedRuleKeys } = keyDiff(
                     Object.keys(state.relatedObjectRules),
-                    Object.keys(state.relatedObjectObjects)
+                    Object.keys(state.relatedObject)
                 ));
             }
 
             for (const removedRuleKey of removedRuleKeys) {
-                delete state.relatedObjectObjects[removedRuleKey];
+                delete state.relatedObject[removedRuleKey];
                 if (relatedObjectEffectScopes[removedRuleKey]) {
                     relatedObjectEffectScopes[removedRuleKey].stop();
                     delete relatedObjectEffectScopes[removedRuleKey];
@@ -82,7 +71,7 @@ export function useObjectRelated({
             for (const addedRuleKey of addedRuleKeys) {
                 relatedObjectEffectScopes[addedRuleKey] = effectScope();
                 relatedObjectEffectScopes[addedRuleKey].run(() => {
-                    state.relatedObjectObjects[addedRuleKey] = computed(() => {
+                    state.relatedObject[addedRuleKey] = computed(() => {
                         // deal with computed objects being passed.
                         const ruleObjects = unref(state.relatedObjectRules?.[addedRuleKey]?.objects);
                         const rulePkKey = state.relatedObjectRules?.[addedRuleKey]?.pkKey || addedRuleKey;
@@ -111,6 +100,7 @@ export function useObjectRelated({
         });
 
         state.relatedRunning = toRef(watchesRunning.state, "running");
+        state.running = computed(() => loadingCombine(watchesRunning.state.running, parentState.running));
 
         onScopeDispose(() => {
             for (const key in relatedObjectEffectScopes) {