fix: fields with relationTo[] correctly load returned data from form submission (#3317)

Author: JarrodMFlesch

src/admin/components/elements/DocumentDrawer/DrawerContent.tsx

@@ -90,7 +90,7 @@ const Content: React.FC<DocumentDrawerProps> = ({
 
   const isEditing = Boolean(id);
   const apiURL = id ? `${serverURL}${api}/${collectionSlug}/${id}?locale=${locale}` : null;
-  const action = `${serverURL}${api}/${collectionSlug}${id ? `/${id}` : ''}?locale=${locale}&depth=0&fallback-locale=null`;
+  const action = `${serverURL}${api}/${collectionSlug}${id ? `/${id}` : ''}?locale=${locale}&fallback-locale=null`;
   const hasSavePermission = (isEditing && docPermissions?.update?.permission) || (!isEditing && (docPermissions as CollectionPermission)?.create?.permission);
   const isLoading = !internalState || !docPermissions || isLoadingDocument;
 

src/admin/components/elements/Status/index.tsx

@@ -66,11 +66,11 @@ const Status: React.FC = () => {
     }
 
     if (collection) {
-      url = `${serverURL}${api}/${collection.slug}/${id}?depth=0&locale=${locale}&fallback-locale=null`;
+      url = `${serverURL}${api}/${collection.slug}/${id}?locale=${locale}&fallback-locale=null`;
       method = 'patch';
     }
     if (global) {
-      url = `${serverURL}${api}/globals/${global.slug}?depth=0&locale=${locale}&fallback-locale=null`;
+      url = `${serverURL}${api}/globals/${global.slug}?locale=${locale}&fallback-locale=null`;
       method = 'post';
     }
 

src/admin/components/forms/Form/buildStateFromSchema/addFieldStatePromise.ts

@@ -248,6 +248,12 @@ export const addFieldStatePromise = async ({
       case 'relationship': {
         if (field.hasMany) {
           const relationshipValue = Array.isArray(valueWithDefault) ? valueWithDefault.map((relationship) => {
+            if (Array.isArray(field.relationTo)) {
+              return {
+                relationTo: relationship.relationTo,
+                value: typeof relationship.value === 'string' ? relationship.value : relationship.value?.id,
+              };
+            }
             if (typeof relationship === 'object' && relationship !== null) {
               return relationship.id;
             }
@@ -256,16 +262,24 @@ export const addFieldStatePromise = async ({
 
           fieldState.value = relationshipValue;
           fieldState.initialValue = relationshipValue;
-
-          state[`${path}${field.name}`] = fieldState;
+        } else if (Array.isArray(field.relationTo)) {
+          if (valueWithDefault && typeof valueWithDefault === 'object' && 'relationTo' in valueWithDefault && 'value' in valueWithDefault) {
+            const value = typeof valueWithDefault?.value === 'object' && 'id' in valueWithDefault.value ? valueWithDefault.value.id : valueWithDefault.value;
+            const relationshipValue = {
+              relationTo: valueWithDefault?.relationTo,
+              value,
+            };
+            fieldState.value = relationshipValue;
+            fieldState.initialValue = relationshipValue;
+          }
         } else {
           const relationshipValue = valueWithDefault && typeof valueWithDefault === 'object' && 'id' in valueWithDefault ? valueWithDefault.id : valueWithDefault;
           fieldState.value = relationshipValue;
           fieldState.initialValue = relationshipValue;
-
-          state[`${path}${field.name}`] = fieldState;
         }
 
+        state[`${path}${field.name}`] = fieldState;
+
         break;
       }
 

src/admin/components/views/Account/index.tsx

@@ -59,7 +59,7 @@ const AccountView: React.FC = () => {
   const dataToRender = locationState?.data || data;
   const apiURL = `${serverURL}${api}/${slug}/${data?.id}?locale=${locale}`;
 
-  const action = `${serverURL}${api}/${slug}/${data?.id}?locale=${locale}&depth=0`;
+  const action = `${serverURL}${api}/${slug}/${data?.id}?locale=${locale}`;
 
   const onSave = React.useCallback(async (json: any) => {
     getDocPermissions();

test/fields-relationship/e2e.spec.ts

@@ -123,6 +123,34 @@ describe('fields - relationship', () => {
     await expect(field).toContainText(relationOneDoc.id);
 
     await saveDocAndAssert(page);
+    await wait(200);
+    await expect(field).toContainText(relationOneDoc.id);
+  });
+
+  test('should create relations to multiple collections', async () => {
+    await page.goto(url.create);
+
+    const field = page.locator('#field-relationshipMultiple');
+    const value = page.locator('#field-relationshipMultiple .relationship--single-value__text');
+
+    await field.click({ delay: 100 });
+
+    const options = page.locator('.rs__option');
+
+    await expect(options).toHaveCount(3); // 3 docs
+
+    // Add one relationship
+    await options.locator(`text=${relationOneDoc.id}`).click();
+    await expect(value).toContainText(relationOneDoc.id);
+
+    // Add relationship of different collection
+    await field.click({ delay: 100 });
+    await options.locator(`text=${relationTwoDoc.id}`).click();
+    await expect(value).toContainText(relationTwoDoc.id);
+
+    await saveDocAndAssert(page);
+    await wait(200);
+    await expect(value).toContainText(relationTwoDoc.id);
   });
 
   test('should create hasMany relationship', async () => {
@@ -152,30 +180,33 @@ describe('fields - relationship', () => {
     await expect(page.locator('.rs__menu')).toHaveText('No options');
 
     await saveDocAndAssert(page);
+    await wait(200);
+    await expect(values).toHaveText([relationOneDoc.id, anotherRelationOneDoc.id]);
   });
 
-  test('should create relations to multiple collections', async () => {
+  test('should create many relations to multiple collections', async () => {
     await page.goto(url.create);
 
-    const field = page.locator('#field-relationshipMultiple');
-    const value = page.locator('#field-relationshipMultiple .relationship--single-value__text');
-
+    const field = page.locator('#field-relationshipHasManyMultiple');
     await field.click({ delay: 100 });
 
     const options = page.locator('.rs__option');
+    await expect(options).toHaveCount(3);
 
-    await expect(options).toHaveCount(3); // 3 docs
+    const values = page.locator('#field-relationshipHasManyMultiple .relationship--multi-value-label__text');
 
     // Add one relationship
     await options.locator(`text=${relationOneDoc.id}`).click();
-    await expect(value).toContainText(relationOneDoc.id);
+    await expect(values).toHaveText([relationOneDoc.id]);
 
-    // Add relationship of different collection
+    // Add second relationship
     await field.click({ delay: 100 });
     await options.locator(`text=${relationTwoDoc.id}`).click();
-    await expect(value).toContainText(relationTwoDoc.id);
+    await expect(values).toHaveText([relationOneDoc.id, relationTwoDoc.id]);
 
     await saveDocAndAssert(page);
+    await wait(200);
+    await expect(values).toHaveText([relationOneDoc.id, relationTwoDoc.id]);
   });
 
   test('should duplicate document with relationships', async () => {