@evoke-platform/ui-components 1.13.0-dev.6 → 1.13.0-dev.7

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/DocumentList.js

@@ -1,4 +1,5 @@
 import { useApiServices } from '@evoke-platform/context';
+import { useQuery } from '@tanstack/react-query';
 import prettyBytes from 'pretty-bytes';
 import React, { useEffect, useState } from 'react';
 import { FileWithExtension, LaunchRounded, TrashCan, WarningRounded } from '../../../../../../icons';
@@ -28,7 +29,6 @@ export const DocumentList = (props) => {
     const { fetchedOptions, setFetchedOptions, object, instance } = useFormContext();
     // Determine property type once at component level
     const isFileType = fieldType === 'file';
-    const [hasViewPermission, setHasViewPermission] = useState(fetchedOptions[`${id}ViewPermission`] ?? true);
     // savedDocuments is either FileInstance[] or DocumentType[], never a mix
     const [savedDocuments, setSavedDocuments] = useState(fetchedOptions[`${id}SavedDocuments`]);
     useEffect(() => {
@@ -82,27 +82,23 @@ export const DocumentList = (props) => {
             }
         });
     };
-    useEffect(() => {
-        if (!fetchedOptions[`${id}ViewPermission`]) {
-            checkPermissions();
-        }
-    }, [object, id, fetchedOptions[`${id}ViewPermission`]]);
-    const checkPermissions = () => {
-        if (instance?.[id]?.length) {
+    const { data: hasViewPermission = false } = useQuery({
+        queryKey: ['hasViewPermission', object?.id, instance?.id],
+        queryFn: async () => {
             const endpoint = isFileType
                 ? getPrefixedUrl(`/objects/sys__file/instances/checkAccess?action=read&field=content`)
-                : getPrefixedUrl(`/objects/${object?.id}/instances/${instance?.id}/documents/checkAccess?action=view`);
-            apiServices
-                .get(endpoint)
-                .then((viewPermissionCheck) => {
-                setFetchedOptions({
-                    [`${id}ViewPermission`]: viewPermissionCheck.result,
-                });
-                setHasViewPermission(viewPermissionCheck.result);
-            })
-                .catch(() => setHasViewPermission(false));
-        }
-    };
+                : getPrefixedUrl(`/objects/${object.id}/instances/${instance.id}/documents/checkAccess?action=view`);
+            try {
+                const viewPermissionCheck = await apiServices.get(endpoint);
+                return viewPermissionCheck.result;
+            }
+            catch {
+                return false;
+            }
+        },
+        enabled: !!instance?.id && !!object?.id && !!instance?.[id]?.length,
+        staleTime: Infinity,
+    });
     const isFile = (doc) => doc instanceof File;
     const isUnsavedFile = (doc) => isFile(doc) || !!doc.unsaved;
     const fileExists = (doc) => savedDocuments?.find((d) => d.id === doc.id);

package/dist/published/components/custom/FormV2/components/FormFieldTypes/UserProperty.js

@@ -1,17 +1,17 @@
 import { useApiServices } from '@evoke-platform/context';
 import { Close, ExpandMore } from '@mui/icons-material';
+import { useQuery } from '@tanstack/react-query';
 import React, { useEffect, useState } from 'react';
 import { useFormContext } from '../../../../../theme/hooks';
 import { Autocomplete, IconButton, Paper, TextField, Typography } from '../../../../core';
 import { getPrefixedUrl, isOptionEqualToValue } from '../utils';
 const UserProperty = (props) => {
     const { id, error, value, readOnly, hasDescription } = props;
-    const { fetchedOptions, setFetchedOptions, handleChange, onAutosave: onAutosave, fieldHeight } = useFormContext();
+    const { handleChange, onAutosave: onAutosave, fieldHeight } = useFormContext();
     const [loadingOptions, setLoadingOptions] = useState(false);
     const apiServices = useApiServices();
-    const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
+    const [options, setOptions] = useState([]);
     const [openOptions, setOpenOptions] = useState(false);
-    const [users, setUsers] = useState();
     const [userValue, setUserValue] = useState();
     useEffect(() => {
         if (value && typeof value == 'object' && 'name' in value && 'id' in value) {
@@ -21,25 +21,21 @@ const UserProperty = (props) => {
             setUserValue(undefined);
         }
     }, [value]);
+    const { data: users } = useQuery({
+        queryKey: ['users'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/users`)),
+        staleTime: Infinity,
+        meta: {
+            errorMessage: 'Error fetching users: ',
+        },
+    });
     useEffect(() => {
-        if (!fetchedOptions[`${id}Options`]) {
-            setLoadingOptions(true);
-            apiServices.get(getPrefixedUrl(`/users`), (error, userList) => {
-                setUsers(userList);
-                setOptions((userList ?? []).map((user) => ({
-                    label: user.name,
-                    value: user.id,
-                })));
-                setFetchedOptions({
-                    [`${id}Options`]: (userList ?? []).map((user) => ({
-                        label: user.name,
-                        value: user.id,
-                    })),
-                });
-                setLoadingOptions(false);
-            });
-        }
-    }, [id]);
+        setOptions((users ?? []).map((user) => ({
+            label: user.name,
+            value: user.id,
+        })));
+        setLoadingOptions(false);
+    }, [users]);
     async function handleChangeUserProperty(id, value) {
         const updatedValue = typeof value?.value === 'string' ? { name: value.label, id: value.value } : null;
         try {

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/ObjectPropertyInput.js

@@ -1,53 +1,41 @@
 import { useApiServices, useApp, useNavigate, } from '@evoke-platform/context';
+import { useQuery } from '@tanstack/react-query';
 import cleanDeep from 'clean-deep';
-import { cloneDeep, debounce, isEmpty, isEqual, isNil } from 'lodash';
+import { cloneDeep, debounce, isEmpty, isNil } from 'lodash';
 import Handlebars from 'no-eval-handlebars';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Close } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
 import { Autocomplete, Button, IconButton, Link, ListItem, Paper, Snackbar, TextField, Tooltip, Typography, } from '../../../../../core';
 import { Box } from '../../../../../layout';
-import { getDefaultPages, getPrefixedUrl, transformToWhere } from '../../utils';
+import { getDefaultPages, getPrefixedUrl, transformToWhere, useFormById } from '../../utils';
 import RelatedObjectInstance from './RelatedObjectInstance';
 const ObjectPropertyInput = (props) => {
     const { id, fieldDefinition, readOnly, error, mode, displayOption, filter, defaultValueCriteria, sortBy, orderBy, isModal, initialValue, viewLayout, hasDescription, createActionId, formId, relatedObjectId, } = props;
     const { fetchedOptions, setFetchedOptions, fieldHeight, handleChange: handleChangeObjectField, onAutosave: onAutosave, instance, } = useFormContext();
     const { defaultPages, findDefaultPageSlugFor } = useApp();
+    const [debouncedDropdownInput, setDebouncedDropdownInput] = useState();
     const [selectedInstance, setSelectedInstance] = useState(initialValue || undefined);
     const [openCreateDialog, setOpenCreateDialog] = useState(false);
-    const [loadingOptions, setLoadingOptions] = useState(false);
-    const [navigationSlug, setNavigationSlug] = useState(fetchedOptions[`${id}NavigationSlug`]);
-    const [relatedObject, setRelatedObject] = useState(fetchedOptions[`${id}RelatedObject`]);
     const [dropdownInput, setDropdownInput] = useState();
     const [openOptions, setOpenOptions] = useState(false);
-    const [hasFetched, setHasFetched] = useState(fetchedOptions[`${id}OptionsHaveFetched`] || false);
-    const [options, setOptions] = useState(fetchedOptions[`${id}Options`] || []);
     const [layout, setLayout] = useState(fetchedOptions[`${id}ViewLayout`]);
-    const [form, setForm] = useState();
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
         isError: true,
     });
+    const { data: relatedObject } = useQuery({
+        queryKey: [relatedObjectId, 'sanitized'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/effective?sanitizedVersion=true`)),
+        enabled: !!relatedObjectId,
+        staleTime: Infinity,
+    });
     const action = relatedObject?.actions?.find((action) => action.id === createActionId);
     const apiServices = useApiServices();
     const navigateTo = useNavigate();
-    const updatedCriteria = useMemo(() => {
-        let criteria = filter ? { where: transformToWhere(filter) } : undefined;
-        if (dropdownInput) {
-            const nameQuery = transformToWhere({
-                name: {
-                    like: dropdownInput,
-                    options: 'i',
-                },
-            });
-            criteria = {
-                ...criteria,
-                where: criteria?.where ? { and: [criteria.where, nameQuery] } : nameQuery,
-            };
-        }
-        return criteria;
-    }, [filter, dropdownInput]);
     const listboxRef = useRef(null);
+    const formIdToFetch = formId || action?.defaultFormId;
+    const { data: form } = useFormById(formIdToFetch ?? '', apiServices, 'Error fetching form: ');
     useEffect(() => {
         if (relatedObject) {
             let defaultViewLayout;
@@ -85,143 +73,102 @@ const ObjectPropertyInput = (props) => {
             }
         }
     }, [displayOption, relatedObject, viewLayout]);
+    const debouncedSetDropdownInput = useMemo(() => debounce((value) => {
+        setDebouncedDropdownInput(value);
+    }, 200), []);
     useEffect(() => {
-        // setting the default value when there is default criteria
-        if (!isEmpty(defaultValueCriteria) && !selectedInstance && (!instance || !instance[id])) {
+        debouncedSetDropdownInput(dropdownInput);
+        return () => {
+            debouncedSetDropdownInput.cancel();
+        };
+    }, [dropdownInput, debouncedSetDropdownInput]);
+    const updatedCriteria = useMemo(() => {
+        let criteria = filter ? { where: transformToWhere(filter) } : undefined;
+        if (debouncedDropdownInput) {
+            const nameQuery = transformToWhere({
+                name: {
+                    like: debouncedDropdownInput,
+                    options: 'i',
+                },
+            });
+            criteria = {
+                ...criteria,
+                where: criteria?.where ? { and: [criteria.where, nameQuery] } : nameQuery,
+            };
+        }
+        return criteria;
+    }, [filter, debouncedDropdownInput]);
+    const { data: defaultInstances, isLoading: isLoadingDefaultInstances } = useQuery({
+        queryKey: ['defaultInstances', relatedObjectId, updatedCriteria],
+        queryFn: async () => {
             const updatedFilter = cleanDeep({
                 where: transformToWhere({ $and: [defaultValueCriteria, updatedCriteria?.where ?? {}] }),
                 order: orderBy && sortBy ? encodeURIComponent(sortBy + ' ' + orderBy) : undefined,
                 limit: 1,
             });
             if (updatedFilter.where) {
-                setLoadingOptions(true);
-                apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`), async (error, instances) => {
-                    if (error) {
-                        console.error(error);
-                        setLoadingOptions(false);
-                    }
-                    if (instances && instances.length > 0) {
-                        setSelectedInstance(instances[0]);
-                        try {
-                            handleChangeObjectField && (await handleChangeObjectField(id, instances[0]));
-                        }
-                        catch (error) {
-                            console.error('Failed to update field:', error);
-                            setLoadingOptions(false);
-                            return;
-                        }
-                        try {
-                            await onAutosave?.(id);
-                        }
-                        catch (error) {
-                            console.error('Autosave failed:', error);
-                        }
-                    }
-                    setLoadingOptions(false);
-                });
+                return apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances?filter=${encodeURIComponent(JSON.stringify(updatedFilter))}`));
             }
-        }
-    }, [relatedObjectId, defaultValueCriteria, sortBy, orderBy]);
-    const getDropdownOptions = useCallback(() => {
-        if (((!fetchedOptions?.[`${id}Options`] ||
-            (fetchedOptions?.[`${id}Options`]).length === 0) &&
-            !hasFetched) ||
-            !isEqual(fetchedOptions?.[`${id}UpdatedCriteria`], updatedCriteria)) {
-            setFetchedOptions({ [`${id}UpdatedCriteria`]: updatedCriteria });
-            setLoadingOptions(true);
-            const updatedFilter = cloneDeep(updatedCriteria) || {};
-            updatedFilter.limit = 100;
-            const { propertyId, direction } = layout?.sort ?? {
-                propertyId: 'name',
-                direction: 'asc',
-            };
-            updatedFilter.order = `${propertyId} ${direction}`;
-            apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances?filter=${JSON.stringify(updatedFilter)}`), (error, instances) => {
-                if (error) {
-                    console.error(error);
-                    setLoadingOptions(false);
-                }
-                if (instances) {
-                    setOptions(instances);
-                    setLoadingOptions(false);
-                    // so if you go off a section too quickly and it doesn't fetch it re-fetches but doesn't cause an infinite loop
-                    setHasFetched(true);
-                }
-            });
-        }
-    }, [
-        relatedObjectId,
-        updatedCriteria,
-        layout,
-        fetchedOptions?.[`${id}Options`],
-        fetchedOptions?.[`${id}UpdatedCriteria`],
-        hasFetched,
-        id,
-    ]);
-    const debouncedGetDropdownOptions = useCallback(debounce(getDropdownOptions, 200), [getDropdownOptions]);
-    useEffect(() => {
-        if (displayOption === 'dropdown') {
-            debouncedGetDropdownOptions();
-            return () => debouncedGetDropdownOptions.cancel();
-        }
-    }, [displayOption, debouncedGetDropdownOptions]);
-    useEffect(() => {
-        setSelectedInstance(initialValue);
-    }, [initialValue]);
+        },
+        enabled: !isEmpty(defaultValueCriteria) && !selectedInstance && (!instance || !instance[id]),
+        staleTime: Infinity,
+    });
     useEffect(() => {
-        // Early return if already fetched
-        if (fetchedOptions[`${id}Form`])
-            return;
-        const fetchForm = async () => {
-            try {
-                let evokeForm;
-                if (formId || action?.defaultFormId) {
-                    evokeForm = await apiServices.get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`));
+        if (defaultInstances?.[0]) {
+            setSelectedInstance(defaultInstances[0]);
+            (async () => {
+                try {
+                    handleChangeObjectField && (await handleChangeObjectField(id, defaultInstances[0]));
                 }
-                if (evokeForm) {
-                    setForm(evokeForm);
-                    setFetchedOptions({
-                        [`${id}Form`]: evokeForm,
-                    });
+                catch (error) {
+                    console.error('Failed to update field:', error);
+                    return;
                 }
-            }
-            catch (error) {
-                console.error('Error fetching form:', error);
-            }
-        };
-        fetchForm();
-    }, [action, formId, id, apiServices, fetchedOptions]);
-    useEffect(() => {
-        if (!fetchedOptions[`${id}RelatedObject`]) {
-            apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/effective?sanitizedVersion=true`), (error, object) => {
-                if (error) {
-                    console.error(error);
+                try {
+                    await onAutosave?.(id);
                 }
-                else {
-                    setRelatedObject(object);
+                catch (error) {
+                    console.error('Autosave failed:', error);
                 }
-            });
+            })();
         }
-    }, [relatedObjectId, fetchedOptions, id]);
+    }, [defaultInstances]);
+    // Construct filter from debounced criteria
+    const updatedFilter = useMemo(() => {
+        const filter = cloneDeep(updatedCriteria) || {};
+        filter.limit = 100;
+        const { propertyId, direction } = layout?.sort ?? {
+            propertyId: 'name',
+            direction: 'asc',
+        };
+        filter.order = `${propertyId} ${direction}`;
+        return filter;
+    }, [updatedCriteria, layout]);
+    const { 
+    // Sets the default value of options to an empty array
+    data: options = [], isLoading: isLoadingOptions, } = useQuery({
+        queryKey: ['dropdownOptions', relatedObjectId, updatedFilter],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/objects/${relatedObjectId}/instances?filter=${JSON.stringify(updatedFilter)}`)),
+        staleTime: 300000,
+        // Keep old data while fetching new data
+        placeholderData: (previousData) => previousData,
+    });
     useEffect(() => {
-        (async () => {
-            if (fetchedOptions[`${id}NavigationSlug`] === undefined) {
-                const pages = await getDefaultPages([{ ...fieldDefinition, objectId: relatedObjectId }], defaultPages, findDefaultPageSlugFor);
-                if (relatedObjectId && pages[relatedObjectId]) {
-                    setNavigationSlug(pages[relatedObjectId]);
-                    setFetchedOptions({
-                        [`${id}NavigationSlug`]: pages[relatedObjectId],
-                    });
-                }
-                else {
-                    // setting the nav slug to null if there is no default page for this object to avoid re-fetching
-                    setFetchedOptions({
-                        [`${id}NavigationSlug`]: null,
-                    });
-                }
+        setSelectedInstance(initialValue);
+    }, [initialValue]);
+    const loadingOptions = isLoadingOptions || isLoadingDefaultInstances;
+    const { data: navigationSlug } = useQuery({
+        queryKey: ['navigationSlug', id, relatedObjectId],
+        queryFn: async () => {
+            const pages = await getDefaultPages([{ ...fieldDefinition, objectId: relatedObjectId }], defaultPages, findDefaultPageSlugFor);
+            if (relatedObjectId && pages[relatedObjectId]) {
+                return pages[relatedObjectId];
             }
-        })();
-    }, [id, fieldDefinition, defaultPages, findDefaultPageSlugFor, relatedObjectId, fetchedOptions]);
+            return null;
+        },
+        enabled: !!(relatedObjectId && defaultPages && findDefaultPageSlugFor),
+        staleTime: Infinity,
+    });
     const handleClose = () => {
         setOpenCreateDialog(false);
     };
@@ -229,27 +176,6 @@ const ObjectPropertyInput = (props) => {
         const template = Handlebars.compileAST(expression);
         return instance ? template(instance) : undefined;
     };
-    useEffect(() => {
-        if (relatedObject && !fetchedOptions[`${id}RelatedObject`]) {
-            setFetchedOptions({
-                [`${id}RelatedObject`]: relatedObject,
-            });
-        }
-        if (options &&
-            (!fetchedOptions[`${id}Options`] || fetchedOptions[`${id}Options`].length === 0) &&
-            hasFetched &&
-            !fetchedOptions[`${id}OptionsHaveFetched`]) {
-            setFetchedOptions({
-                [`${id}Options`]: options,
-                [`${id}OptionsHaveFetched`]: hasFetched,
-            });
-        }
-        if (navigationSlug && !fetchedOptions[`${id}NavigationSlug`]) {
-            setFetchedOptions({
-                [`${id}NavigationSlug`]: navigationSlug,
-            });
-        }
-    }, [relatedObject, options, hasFetched, navigationSlug, fetchedOptions, id]);
     const dropdownOptions = [
         ...options.map((o) => ({ label: o.name, value: o.id })),
         ...(mode !== 'existingOnly' && relatedObject?.actions?.some((a) => a.id === createActionId)
@@ -422,7 +348,7 @@ const ObjectPropertyInput = (props) => {
                     }
                 }, selectOnFocus: false, onBlur: () => {
                     if (dropdownInput) {
-                        getDropdownOptions();
+                        setDropdownInput(undefined);
                     }
                 }, renderInput: (params) => (React.createElement(TextField, { ...params, placeholder: selectedInstance?.id || readOnly ? '' : 'Select', readOnly: !loadingOptions && !selectedInstance?.id && readOnly, onChange: (event) => setDropdownInput(event.target.value), sx: {
                         ...(!loadingOptions && selectedInstance?.id
@@ -529,7 +455,7 @@ const ObjectPropertyInput = (props) => {
                     event.stopPropagation();
                     setOpenCreateDialog(true);
                 }, "aria-label": `Add` }, "Add")))),
-        React.createElement(RelatedObjectInstance, { open: openCreateDialog, title: form?.name ?? `Add ${fieldDefinition.name}`, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, setOptions: setOptions, options: options, filter: updatedCriteria, layout: layout, formId: formId ?? form?.id, actionId: createActionId, setSnackbarError: setSnackbarError }),
+        React.createElement(RelatedObjectInstance, { open: openCreateDialog, title: form?.name ?? `Add ${fieldDefinition.name}`, handleClose: handleClose, setSelectedInstance: setSelectedInstance, relatedObject: relatedObject, id: id, mode: mode, displayOption: displayOption, filter: updatedCriteria, layout: layout, formId: formIdToFetch, actionId: createActionId, setSnackbarError: setSnackbarError }),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({
                 isError: snackbarError.isError,
                 showAlert: false,

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.d.ts

@@ -15,8 +15,6 @@ export type RelatedObjectInstanceProps = BaseProps & {
         isError: boolean;
     }>>;
     displayOption?: 'dropdown' | 'dialogBox';
-    setOptions: (options: ObjectInstance[]) => void;
-    options: ObjectInstance[];
     filter?: Record<string, unknown>;
     layout?: TableViewLayout;
     formId?: string;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/relatedObjectFiles/RelatedObjectInstance.js

@@ -1,5 +1,6 @@
 import { useApiServices } from '@evoke-platform/context';
 import { DialogActions } from '@mui/material';
+import { useQueryClient } from '@tanstack/react-query';
 import { isEmpty } from 'lodash';
 import React, { useCallback, useRef, useState } from 'react';
 import { Close } from '../../../../../../icons';
@@ -29,7 +30,7 @@ const styles = {
     },
 };
 const RelatedObjectInstance = (props) => {
-    const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, setSnackbarError, setOptions, options, } = props;
+    const { relatedObject, open, title, id, setSelectedInstance, handleClose, mode, displayOption, filter, layout, formId, actionId, setSnackbarError, } = props;
     const { handleChange: handleChangeObjectField, onAutosave, richTextEditor, fieldHeight, width } = useFormContext();
     const [selectedRow, setSelectedRow] = useState();
     const [relationType, setRelationType] = useState(displayOption === 'dropdown' || mode === 'newOnly' ? 'new' : 'existing');
@@ -40,6 +41,7 @@ const RelatedObjectInstance = (props) => {
         defaultWidth: width,
     });
     const { isXs, isSm } = breakpoints;
+    const queryClient = useQueryClient();
     const linkExistingInstance = async () => {
         if (selectedRow && handleChangeObjectField) {
             setSelectedInstance(selectedRow);
@@ -93,7 +95,11 @@ const RelatedObjectInstance = (props) => {
                 message: 'New instance created',
                 isError: false,
             });
-            setOptions(options.concat([response]));
+            // Clear option cache to then fetch newly created instance
+            queryClient.invalidateQueries({
+                queryKey: ['dropdownOptions', relatedObject.id],
+                exact: false,
+            });
             onClose();
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
         }
@@ -113,14 +119,14 @@ const RelatedObjectInstance = (props) => {
         }
     };
     const shouldShowRadioButtons = displayOption !== 'dropdown' && mode !== 'existingOnly' && mode !== 'newOnly' && actionId;
-    const RadioButtons = () => shouldShowRadioButtons ? (React.createElement(RadioGroup, { row: true, "aria-label": "Relation Type", onChange: (event) => {
+    const RadioButtons = useCallback(() => shouldShowRadioButtons ? (React.createElement(RadioGroup, { row: true, "aria-label": "Relation Type", onChange: (event) => {
             const { value } = event.target;
             if (value === 'new' || value === 'existing') {
                 setRelationType(value);
             }
         }, value: relationType },
         React.createElement(FormControlLabel, { value: "existing", control: React.createElement(Radio, { sx: { '&.Mui-checked': { color: 'primary' } } }), label: "Existing" }),
-        React.createElement(FormControlLabel, { value: "new", control: React.createElement(Radio, { sx: { '&.Mui-checked': { color: 'primary' } } }), label: "New" }))) : null;
+        React.createElement(FormControlLabel, { value: "new", control: React.createElement(Radio, { sx: { '&.Mui-checked': { color: 'primary' } } }), label: "New" }))) : null, [shouldShowRadioButtons, relationType]);
     const DialogForm = useCallback(() => (React.createElement(FormRendererContainer, { formId: formId, display: { fieldHeight: fieldHeight ?? 'medium' }, actionId: actionId, objectId: relatedObject.id, onSubmit: createNewInstance, onDiscardChanges: onClose, onSubmitError: handleSubmitError, richTextEditor: richTextEditor, renderHeader: () => null, renderBody: (bodyProps) => (React.createElement(DialogContent, { sx: styles.dialogContent },
             relationType === 'new' ? (React.createElement("div", { ref: validationErrorsRef }, !isEmpty(bodyProps.errors) && bodyProps.shouldShowValidationErrors ? (React.createElement(FormRenderer.ValidationErrors, { errors: bodyProps.errors, sx: {
                     my: isSm || isXs ? 2 : 3,
@@ -146,7 +152,7 @@ const RelatedObjectInstance = (props) => {
                 maxWidth: '950px',
                 width: '100%',
             },
-        } },
+        } }, open && (React.createElement(React.Fragment, null,
         React.createElement(DialogTitle, { sx: {
                 padding: 3,
                 borderBottom: '1px solid #e9ecef',
@@ -176,6 +182,6 @@ const RelatedObjectInstance = (props) => {
                         marginLeft: '8px',
                         width: '85px',
                         '&:hover': { boxShadow: 'none' },
-                    }, onClick: linkExistingInstance, variant: "contained", disabled: !selectedRow, "aria-label": `Add` }, "Add")))))));
+                    }, onClick: linkExistingInstance, variant: "contained", disabled: !selectedRow, "aria-label": `Add` }, "Add")))))))));
 };
 export default RelatedObjectInstance;

package/dist/published/components/custom/FormV2/components/RecursiveEntryRenderer.d.ts

@@ -1,2 +1,3 @@
+import React from 'react';
 import { EntryRendererProps } from './types';
-export declare function RecursiveEntryRenderer(props: EntryRendererProps): any;
+export declare function RecursiveEntryRenderer(props: EntryRendererProps): React.JSX.Element | null;

package/dist/published/components/custom/FormV2/components/RecursiveEntryRenderer.js

@@ -1,10 +1,11 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
 import { WarningRounded } from '@mui/icons-material';
+import { useQuery } from '@tanstack/react-query';
 import DOMPurify from 'dompurify';
 import { isEmpty } from 'lodash';
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
-import { TextField, Typography } from '../../../core';
+import { Skeleton, TextField, Typography } from '../../../core';
 import { Box } from '../../../layout';
 import FormField from '../../FormField';
 import AccordionSections from './AccordionSections';
@@ -18,7 +19,7 @@ import { Image } from './FormFieldTypes/Image';
 import ObjectPropertyInput from './FormFieldTypes/relatedObjectFiles/ObjectPropertyInput';
 import UserProperty from './FormFieldTypes/UserProperty';
 import FormSections from './FormSections';
-import { entryIsVisible, fetchCollectionData, filterEmptySections, getEntryId, getFieldDefinition, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
+import { entryIsVisible, fetchInitialMiddleObjectInstances, fetchMiddleObject, filterEmptySections, getEntryId, getFieldDefinition, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
 function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors, validation) {
     return {
         inputId: entryId,
@@ -38,7 +39,7 @@ function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, displ
 }
 export function RecursiveEntryRenderer(props) {
     const { entry } = props;
-    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor: RichTextEditor, parameters, handleChange, onAutosave, fieldHeight, triggerFieldReset, associatedObject, width, } = useFormContext();
+    const { object, getValues, errors, instance, richTextEditor: RichTextEditor, parameters, handleChange, onAutosave, fieldHeight, triggerFieldReset, associatedObject, width, } = useFormContext();
     const { isBelow, breakpoints } = useWidgetSize({
         scroll: false,
         defaultWidth: width,
@@ -50,19 +51,41 @@ export function RecursiveEntryRenderer(props) {
     const entryId = getEntryId(entry) || 'defaultId';
     const display = 'display' in entry ? entry.display : undefined;
     const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues ? getValues(entryId) : undefined;
-    const initialMiddleObjectInstances = fetchedOptions[`${entryId}InitialMiddleObjectInstances`];
-    const middleObject = fetchedOptions[`${entryId}MiddleObject`];
     const fieldDefinition = useMemo(() => {
         if (!object)
             return undefined;
         return getFieldDefinition(entry, object, parameters);
     }, [entry, parameters, object]);
     const validation = fieldDefinition?.validation || {};
-    useEffect(() => {
-        if (fieldDefinition?.type === 'collection' && fieldDefinition?.manyToManyPropertyId && instance) {
-            fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instance.id, fetchedOptions, initialMiddleObjectInstances);
-        }
-    }, [fieldDefinition, instance]);
+    const { data: middleObject } = useQuery({
+        queryKey: [fieldDefinition?.objectId, 'MiddleObject'],
+        queryFn: () => fetchMiddleObject(fieldDefinition, apiServices),
+        staleTime: Infinity,
+        enabled: !!(fieldDefinition?.objectId &&
+            fieldDefinition?.type === 'collection' &&
+            fieldDefinition?.manyToManyPropertyId),
+        meta: {
+            errorMessage: 'Failed to fetch middle object: ',
+        },
+    });
+    const { data: initialMiddleObjectInstances = [], isLoading: isLoadingInstances } = useQuery({
+        queryKey: [
+            fieldDefinition?.objectId,
+            instance?.id,
+            fieldDefinition?.relatedPropertyId,
+            'InitialMiddleObjectInstances',
+        ],
+        queryFn: () => fetchInitialMiddleObjectInstances(apiServices, fieldDefinition, instance?.id),
+        staleTime: Infinity,
+        enabled: !!(fieldDefinition?.objectId &&
+            instance?.id &&
+            fieldDefinition?.type === 'collection' &&
+            fieldDefinition?.manyToManyPropertyId &&
+            fieldDefinition?.relatedPropertyId),
+        meta: {
+            errorMessage: 'Failed to fetch middle object instances: ',
+        },
+    });
     if (associatedObject?.propertyId === entryId)
         return null;
     // If the entry is hidden, clear its value and any nested values, and skip rendering
@@ -103,12 +126,11 @@ export function RecursiveEntryRenderer(props) {
         }
         else if (fieldDefinition.type === 'collection') {
             if (fieldDefinition?.manyToManyPropertyId) {
-                if (middleObject && !isEmpty(middleObject)) {
-                    return (initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                        React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] ||
-                                initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: 'criteria' in validation && validation.criteria
+                if (!isEmpty(middleObject)) {
+                    return isLoadingInstances ? (React.createElement(Skeleton, null)) : (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                        React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: 'criteria' in validation && validation.criteria
                                 ? updateCriteriaInputs(validation.criteria, getValues(), userAccount, instance)
-                                : undefined, hasDescription: !!display?.description }))));
+                                : undefined, hasDescription: !!display?.description })));
                 }
                 else {
                     // when in the builder preview, the middle object won't be fetched so instead show an empty field