reactive-helpers

Appearance

use/objectRelated ​

Interfaces ​

ObjectRelatedProperties ​

The members (state, parentState, stop) contributed by the object related composable.

Properties ​

parentState ​

parentState: object

The parent state.

crud ​

crud: object

The crud handlers.

crud.args ​

args: Reactive<{ } | TargetArgs>

The arguments to be passed to the crud handlers.

crud.create ​

create: CrudCreateFn

The create function.

crud.delete ​

delete: CrudDeleteFn

The delete function.

crud.executeAction ​

executeAction: CrudObjectExecuteActionFn

The executeAction function.

crud.patch ​

patch: CrudPatchFn

The patch function.

crud.retrieve ​

retrieve: CrudRetrieveFn

The retrieve function.

crud.subscribe ​

subscribe: CrudObjectSubscribeFn

The subscribe function.

crud.update ​

update: CrudUpdateFn

The update function.

deleted ​

deleted: boolean

Whether the object was deleted by the delete action or a subscription delete event. Cleared when a later create, retrieve, update, or patch repopulates the object, and by clear().

error ​

error: Error

The error that occurred.

errored ​

errored: boolean

Whether an error has occurred.

intendToRetrieve? ​

optional intendToRetrieve?: boolean

Whether the object intends to retrieve.

intendToSubscribe? ​

optional intendToSubscribe?: boolean

Whether the object intends to subscribe.

loading ​

loading: boolean

Whether the component is loading.

object ​

object: Reactive<CrudObject>

The object.

params ​

params: object

The arguments to be passed to the retrieve function.

Index Signature ​

[key: string]: any

pk ​

pk: string

The pk of the object.

pkKey ​

pkKey: string

The pk key of the object.

subscribed? ​

optional subscribed?: boolean

Whether the object is subscribed.

state ​

state: object

The state of the object related instance.

crud ​

crud: object

The crud handlers.

crud.args ​

args: Reactive<{ } | TargetArgs>

The arguments to be passed to the crud handlers.

crud.create ​

create: CrudCreateFn

The create function.

crud.delete ​

delete: CrudDeleteFn

The delete function.

crud.executeAction ​

executeAction: CrudObjectExecuteActionFn

The executeAction function.

crud.patch ​

patch: CrudPatchFn

The patch function.

crud.retrieve ​

retrieve: CrudRetrieveFn

The retrieve function.

crud.subscribe ​

subscribe: CrudObjectSubscribeFn

The subscribe function.

crud.update ​

update: CrudUpdateFn

The update function.

deleted ​

deleted: boolean

Whether the object was deleted by the delete action or a subscription delete event. Cleared when a later create, retrieve, update, or patch repopulates the object, and by clear().

error ​

error: Error

The error that occurred.

errored ​

errored: boolean

Whether an error has occurred.

intendToRetrieve? ​

optional intendToRetrieve?: boolean

Whether the object intends to retrieve.

intendToSubscribe? ​

optional intendToSubscribe?: boolean

Whether the object intends to subscribe.

loading ​

loading: boolean

Whether the component is loading.

object ​

object: Reactive<CrudObject>

The object.

params ​

params: object

The arguments to be passed to the retrieve function.

Index Signature ​

[key: string]: any

parentStateObjectWatchRunning ​

parentStateObjectWatchRunning: boolean

Whether the parent state object watch is running.

pk ​

pk: string

The pk of the object.

pkKey ​

pkKey: string

The pk key of the object.

relatedObject ​

relatedObject: object

The related objects, by rule name. Each entry is backed by a computed, but it is read through a reactive proxy that unwraps it, so reads yield the related object (or array of related objects) and never carry a .value.

Index Signature ​

[rule: string]: any

relatedObjectRules ​

relatedObjectRules: ObjectRelatedRawRules

The rules for defining relationships for the managed object to other collections of objects.

relatedObjectWatchRunning ​

relatedObjectWatchRunning: boolean

Whether the related object watch is running.

relatedRunning ​

relatedRunning: boolean

Whether the related objects are loading.

running ​

running: boolean

Whether the related objects are loading or the parent state is loading.

subscribed? ​

optional subscribed?: boolean

Whether the object is subscribed.

stop ​

stop: () => void

Stops all effects of the object related instance.

Returns ​

void

ObjectRelatedRawProps ​

Non-parent state options for useObjectRelated.

Properties ​

relatedObjectRules ​

relatedObjectRules: Ref<ObjectRelatedRawRules, ObjectRelatedRawRules>

The rules for defining relationships for the managed object to other collections of objects.

ObjectRelatedRawState ​

The raw reactive state of the object related composable, holding its rules, computed relations, and running flags.

Properties ​

parentStateObjectWatchRunning ​

parentStateObjectWatchRunning: boolean

Whether the parent state object watch is running.

relatedObject ​

relatedObject: object

The related objects, by rule name. Each entry is backed by a computed, but it is read through a reactive proxy that unwraps it, so reads yield the related object (or array of related objects) and never carry a .value.

Index Signature ​

[rule: string]: any

relatedObjectRules ​

relatedObjectRules: ObjectRelatedRawRules

The rules for defining relationships for the managed object to other collections of objects.

relatedObjectWatchRunning ​

relatedObjectWatchRunning: boolean

Whether the related object watch is running.

relatedRunning ​

relatedRunning: boolean

Whether the related objects are loading.

running ​

running: boolean

Whether the related objects are loading or the parent state is loading.

ObjectRelatedRule ​

The rule for defining relationships for the managed object to other collections of objects.

Properties ​

objects ​

objects: ObjectsByPk

The related objects, indexed by the key in the related object.

order? ​

optional order?: string[]

The order of the related objects, if the related objects are an array.

pkKey? ​

optional pkKey?: string

The key in the managed object that corresponds to the key in the related object. Defaults to the rule's own key when omitted.

Type Aliases ​

ObjectRelated ​

ObjectRelated = ObjectRelatedProperties

An instance of an object related reactive object.

Type Parameters ​

ObjectRelatedOptions ​

ObjectRelatedOptions = object & ObjectRelatedRawProps

Options for useObjectRelated.

Type Declaration ​

parentState ​

parentState: ObjectRelatedParentState

Type Parameters ​

ObjectRelatedParentRawState ​

ObjectRelatedParentRawState = ObjectInstanceRawState & Partial<ObjectSubscriptionRawState>

The raw, pre-unwrapped parent state consumed by the object related mixin (object instance plus optional subscription state).

Type Parameters ​

ObjectRelatedParentState ​

ObjectRelatedParentState = UnwrapNestedRefs

The unwrapped reactive parent state consumed by the object related mixin.

Type Parameters ​

ObjectRelatedRawRules ​

ObjectRelatedRawRules = object

The rules for defining relationships for the managed object to other collections of objects.

Type Parameters ​

Index Signature ​

[rule: string]: ObjectRelatedRule

ObjectRelatedState ​

ObjectRelatedState = UnwrapNestedRefs

The unwrapped reactive state of the object related composable, combining the parent state with its own related state.

Type Parameters ​

Functions ​

useObjectRelated() ​

useObjectRelated(options): ObjectRelatedProperties

Creates an object related reactive object.

Parameters ​

options ​

ObjectRelatedOptions

The options for the object related reactive object.

Returns ​

ObjectRelatedProperties

  • The object related reactive object.

Example ​

vue
<script setup>
import { useObjectRelated, useObjectSubscription } from "@arrai-innovations/reactive-helpers";
import { ref, reactive } from "vue";

const someObjectsSource = reactive({
    objects: {
        '1': { id: 1, name: 'one', secondOrderId: 15 },
        '2': { id: 2, name: 'two', secondOrderId: 10 },
        '3': { id: 3, name: 'three', secondOrderId: 5 },
    },
});
const someOtherObjectsSource = reactive({
    objects: {
        '5': { id: 5, name: 'five' },
        '10': { id: 10, name: 'ten' },
        '15': { id: 15, name: 'fifteen' },
    },
});
const objectSubscriptionProps = reactive({
    target: { app: 'foo', model: 'bar'},
    params: {},
    pk: '99',
    pkKey: 'id',
    intendToSubscribe: true,
    intendToRetreive: true,
});
const objectSubscription = useObjectSubscription(objectSubscriptionProps);
// objectSubscription.state.object like:
// {
//     id: '99',
//     some_objects_id: '2',
//     some_objects_list_ids: ['1','2','3'],
// }
const objectRelatedProps = reactive({
    parentState: objectSubscription.state,
    relatedObjectRules: {
        firstOrder: {
            pkKey: 'some_objects_id',
            objects: someObjectsSource.objects,
        },
        some_objects_list_ids: {
            // pkKey defaults to match rule name
            objects: someObjectsSource.objects,
            order: ['3','1','2'],
        },
        secondOrder: {
            pkKey: 'relatedItem.firstOrder.secondOrderId',
            objects: someOtherObjectsSource.objects,
        },
    },
});
const objectRelated = useObjectRelated(objectRelatedProps);
</script>
<template>
<div>
    <p>{{ objectRelated.state.relatedObject.firstOrder }}</p>
    <!-- { id: 2, name: 'two', secondOrderId: 10 } -->

    <p>{{ objectRelated.state.relatedObject.some_objects_list_ids }}</p>
    <!-- [{ id: 3, name: 'three', secondOrderId: 5 }, { id: 1, name: 'one', secondOrderId: 15 }, { id: 2, name: 'two', secondOrderId: 10 }] -->

    <p>{{ objectRelated.state.relatedObject.secondOrder }}</p>
    <!-- { id: 10, name: 'ten' } -->
</div>
</template>

useObjectRelateds() ​

useObjectRelateds(objectRelatedArgs): object

Creates multiple object related instances keyed by name from a map of options.

Parameters ​

objectRelatedArgs ​

The options for the desired object related reactive objects.

Returns ​

object

  • The object related instances, indexed by key.