fix(live-preview): clear hasMany relationships

packages/live-preview/src/traverseFields.ts

@@ -125,7 +125,7 @@ export const traverseFields = <T>(args: {
         case 'relationship':
           // Handle `hasMany` relationships
           if (fieldSchema.hasMany && Array.isArray(incomingData[fieldName])) {
-            if (!result[fieldName]) {
+            if (!result[fieldName] || !incomingData[fieldName].length) {
               result[fieldName] = []
             }
 

test/live-preview/collections/Pages.ts

@@ -50,6 +50,79 @@ export const Pages: CollectionConfig = {
             },
           ],
         },
+        {
+          label: 'Test',
+          fields: [
+            {
+              name: 'relationshipInRichText',
+              type: 'richText',
+            },
+            {
+              name: 'relationshipAsUpload',
+              type: 'upload',
+              relationTo: 'media',
+            },
+            {
+              name: 'relationshipMonoHasOne',
+              type: 'relationship',
+              relationTo: 'posts',
+            },
+            {
+              name: 'relationshipMonoHasMany',
+              type: 'relationship',
+              relationTo: 'posts',
+              hasMany: true,
+            },
+            {
+              name: 'relationshipPolyHasOne',
+              type: 'relationship',
+              relationTo: ['posts'],
+            },
+            {
+              name: 'relationshipPolyHasMany',
+              type: 'relationship',
+              relationTo: ['posts'],
+              hasMany: true,
+            },
+            {
+              name: 'arrayOfRelationships',
+              type: 'array',
+              fields: [
+                {
+                  name: 'uploadInArray',
+                  type: 'upload',
+                  relationTo: 'media',
+                },
+                {
+                  name: 'richTextInArray',
+                  type: 'richText',
+                },
+                {
+                  name: 'relationshipInArrayMonoHasOne',
+                  type: 'relationship',
+                  relationTo: 'posts',
+                },
+                {
+                  name: 'relationshipInArrayMonoHasMany',
+                  type: 'relationship',
+                  relationTo: 'posts',
+                  hasMany: true,
+                },
+                {
+                  name: 'relationshipInArrayPolyHasOne',
+                  type: 'relationship',
+                  relationTo: ['posts'],
+                },
+                {
+                  name: 'relationshipInArrayPolyHasMany',
+                  type: 'relationship',
+                  relationTo: ['posts'],
+                  hasMany: true,
+                },
+              ],
+            },
+          ],
+        },
       ],
     },
     {
@@ -71,73 +144,5 @@ export const Pages: CollectionConfig = {
         },
       ],
     },
-    {
-      name: 'relationshipInRichText',
-      type: 'richText',
-    },
-    {
-      name: 'relationshipAsUpload',
-      type: 'upload',
-      relationTo: 'media',
-    },
-    {
-      name: 'relationshipMonoHasOne',
-      type: 'relationship',
-      relationTo: 'posts',
-    },
-    {
-      name: 'relationshipMonoHasMany',
-      type: 'relationship',
-      relationTo: 'posts',
-      hasMany: true,
-    },
-    {
-      name: 'relationshipPolyHasOne',
-      type: 'relationship',
-      relationTo: ['posts'],
-    },
-    {
-      name: 'relationshipPolyHasMany',
-      type: 'relationship',
-      relationTo: ['posts'],
-      hasMany: true,
-    },
-    {
-      name: 'arrayOfRelationships',
-      type: 'array',
-      fields: [
-        {
-          name: 'uploadInArray',
-          type: 'upload',
-          relationTo: 'media',
-        },
-        {
-          name: 'richTextInArray',
-          type: 'richText',
-        },
-        {
-          name: 'relationshipInArrayMonoHasOne',
-          type: 'relationship',
-          relationTo: 'posts',
-        },
-        {
-          name: 'relationshipInArrayMonoHasMany',
-          type: 'relationship',
-          relationTo: 'posts',
-          hasMany: true,
-        },
-        {
-          name: 'relationshipInArrayPolyHasOne',
-          type: 'relationship',
-          relationTo: ['posts'],
-        },
-        {
-          name: 'relationshipInArrayPolyHasMany',
-          type: 'relationship',
-          relationTo: ['posts'],
-          hasMany: true,
-        },
-      ],
-    },
   ],
 }

test/live-preview/int.spec.ts

@@ -220,13 +220,20 @@ describe('Collections - Live Preview', () => {
     expect(merge1.relationshipPolyHasMany).toMatchObject([
       { value: testPost, relationTo: postsSlug },
     ])
+  })
+  it('— relationships - can clear relationships', async () => {
+    const initialData: Partial<Page> = {
+      title: 'Test Page',
+      relationshipMonoHasOne: testPost.id,
+      relationshipMonoHasMany: [testPost.id],
+      relationshipPolyHasOne: { value: testPost.id, relationTo: postsSlug },
+      relationshipPolyHasMany: [{ value: testPost.id, relationTo: postsSlug }],
+    }
 
-    // Clear relationships
     const merge2 = await mergeData({
       depth: 1,
       fieldSchema: schemaJSON,
       incomingData: {
-        ...merge1,
         relationshipMonoHasOne: null,
         relationshipMonoHasMany: [],
         relationshipPolyHasOne: null,
@@ -242,33 +249,6 @@ describe('Collections - Live Preview', () => {
     expect(merge2.relationshipMonoHasMany).toEqual([])
     expect(merge2.relationshipPolyHasOne).toBeFalsy()
     expect(merge2.relationshipPolyHasMany).toEqual([])
-
-    // Now populate the relationships again
-    // This will ensure that the first merge wasn't just initial state
-    const merge3 = await mergeData({
-      depth: 1,
-      fieldSchema: schemaJSON,
-      incomingData: {
-        ...merge2,
-        relationshipMonoHasOne: testPost.id,
-        relationshipMonoHasMany: [testPost.id],
-        relationshipPolyHasOne: { value: testPost.id, relationTo: postsSlug },
-        relationshipPolyHasMany: [{ value: testPost.id, relationTo: postsSlug }],
-      },
-      initialData,
-      serverURL,
-      returnNumberOfRequests: true,
-    })
-
-    expect(merge3._numberOfRequests).toEqual(4)
-    expect(merge3.relationshipMonoHasOne).toMatchObject(testPost)
-    expect(merge3.relationshipMonoHasMany).toMatchObject([testPost])
-
-    expect(merge3.relationshipPolyHasOne).toMatchObject({ value: testPost, relationTo: postsSlug })
-
-    expect(merge3.relationshipPolyHasMany).toMatchObject([
-      { value: testPost, relationTo: postsSlug },
-    ])
   })
 
   it('— relationships - populates within arrays', async () => {

test/live-preview/next-app/app/_blocks/Relationships/index.tsx

@@ -52,8 +52,20 @@ export const RelationshipsBlock: React.FC<RelationshipsBlockProps> = (props) =>
         <p>
           <b>Monomorphic Has Many:</b>
         </p>
-        {data?.relationshipMonoHasMany?.map((item, index) =>
+        {data?.relationshipMonoHasMany ? (
-          item ? <div key={index}>{typeof item === 'string' ? item : item.title}</div> : 'null',
+          <Fragment>
+            {data?.relationshipMonoHasMany.length
+              ? data?.relationshipMonoHasMany?.map((item, index) =>
+                  item ? (
+                    <div key={index}>{typeof item === 'string' ? item : item.title}</div>
+                  ) : (
+                    'null'
+                  ),
+                )
+              : 'None'}
+          </Fragment>
+        ) : (
+          <div>None</div>
         )}
         <p>
           <b>Polymorphic Has One:</b>
@@ -70,12 +82,22 @@ export const RelationshipsBlock: React.FC<RelationshipsBlockProps> = (props) =>
         <p>
           <b>Polymorphic Has Many:</b>
         </p>
-        {data?.relationshipPolyHasMany?.map((item, index) =>
+        {data?.relationshipPolyHasMany ? (
-          item.value ? (
+          <Fragment>
-            <div key={index}>{typeof item.value === 'string' ? item.value : item.value.title}</div>
+            {data?.relationshipPolyHasMany.length
-          ) : (
+              ? data?.relationshipPolyHasMany?.map((item, index) =>
-            'null'
+                  item.value ? (
-          ),
+                    <div key={index}>
+                      {typeof item.value === 'string' ? item.value : item.value.title}
+                    </div>
+                  ) : (
+                    'null'
+                  ),
+                )
+              : 'None'}
+          </Fragment>
+        ) : (
+          <div>None</div>
         )}
         <p>
           <b>Array of Relationships:</b>
@@ -113,8 +135,20 @@ export const RelationshipsBlock: React.FC<RelationshipsBlockProps> = (props) =>
             <p>
               <b>Monomorphic Has Many:</b>
             </p>
-            {item?.relationshipInArrayMonoHasMany?.map((rel, relIndex) =>
+            {item?.relationshipInArrayMonoHasMany ? (
-              rel ? <div key={relIndex}>{typeof rel === 'string' ? rel : rel.title}</div> : 'null',
+              <Fragment>
+                {item?.relationshipInArrayMonoHasMany.length
+                  ? item?.relationshipInArrayMonoHasMany?.map((rel, relIndex) =>
+                      rel ? (
+                        <div key={relIndex}>{typeof rel === 'string' ? rel : rel.title}</div>
+                      ) : (
+                        'null'
+                      ),
+                    )
+                  : 'None'}
+              </Fragment>
+            ) : (
+              <div>None</div>
             )}
             <p>
               <b>Polymorphic Has One:</b>
@@ -131,14 +165,22 @@ export const RelationshipsBlock: React.FC<RelationshipsBlockProps> = (props) =>
             <p>
               <b>Polymorphic Has Many:</b>
             </p>
-            {item?.relationshipInArrayPolyHasMany?.map((rel, relIndex) =>
+            {item?.relationshipInArrayPolyHasMany ? (
-              rel.value ? (
+              <Fragment>
-                <div key={relIndex}>
+                {item?.relationshipInArrayPolyHasMany.length
-                  {typeof rel.value === 'string' ? rel.value : rel.value.title}
+                  ? item?.relationshipInArrayPolyHasMany?.map((rel, relIndex) =>
-                </div>
+                      rel.value ? (
-              ) : (
+                        <div key={relIndex}>
-                'null'
+                          {typeof rel.value === 'string' ? rel.value : rel.value.title}
-              ),
+                        </div>
+                      ) : (
+                        'null'
+                      ),
+                    )
+                  : 'None'}
+              </Fragment>
+            ) : (
+              <div>None</div>
             )}
           </div>
         ))}