fix(live-preview): re-populates externally updated relationships

packages/live-preview/src/handleMessage.ts

@@ -39,6 +39,7 @@ export const handleMessage = async <T>(args: {
       const mergedData = await mergeData<T>({
         apiRoute,
         depth,
+        externallyUpdatedRelationship: eventData.externallyUpdatedRelationship,
         fieldSchema: payloadLivePreviewFieldSchema,
         incomingData: eventData.data,
         initialData: payloadLivePreviewPreviousData || initialData,

packages/live-preview/src/mergeData.ts

@@ -1,13 +1,14 @@
 import type { PaginatedDocs } from 'payload/database'
 import type { fieldSchemaToJSON } from 'payload/utilities'
 
-import type { PopulationsByCollection } from './types'
+import type { PopulationsByCollection, RecentUpdate } from './types'
 
 import { traverseFields } from './traverseFields'
 
 export const mergeData = async <T>(args: {
   apiRoute?: string
   depth?: number
+  externallyUpdatedRelationship?: RecentUpdate
   fieldSchema: ReturnType<typeof fieldSchemaToJSON>
   incomingData: Partial<T>
   initialData: T
@@ -21,6 +22,7 @@ export const mergeData = async <T>(args: {
   const {
     apiRoute,
     depth,
+    externallyUpdatedRelationship,
     fieldSchema,
     incomingData,
     initialData,
@@ -33,6 +35,7 @@ export const mergeData = async <T>(args: {
   const populationsByCollection: PopulationsByCollection = {}
 
   traverseFields({
+    externallyUpdatedRelationship,
     fieldSchema,
     incomingData,
     populationsByCollection,

packages/live-preview/src/traverseFields.ts

@@ -1,16 +1,23 @@
 import type { fieldSchemaToJSON } from 'payload/utilities'
 
-import type { PopulationsByCollection } from './types'
+import type { PopulationsByCollection, RecentUpdate } from './types'
 
 import { traverseRichText } from './traverseRichText'
 
 export const traverseFields = <T>(args: {
+  externallyUpdatedRelationship?: RecentUpdate
   fieldSchema: ReturnType<typeof fieldSchemaToJSON>
   incomingData: T
   populationsByCollection: PopulationsByCollection
   result: T
 }): void => {
-  const { fieldSchema: fieldSchemas, incomingData, populationsByCollection, result } = args
+  const {
+    externallyUpdatedRelationship,
+    fieldSchema: fieldSchemas,
+    incomingData,
+    populationsByCollection,
+    result,
+  } = args
 
   fieldSchemas.forEach((fieldSchema) => {
     if ('name' in fieldSchema && typeof fieldSchema.name === 'string') {
@@ -19,6 +26,7 @@ export const traverseFields = <T>(args: {
       switch (fieldSchema.type) {
         case 'richText':
           result[fieldName] = traverseRichText({
+            externallyUpdatedRelationship,
             incomingData: incomingData[fieldName],
             populationsByCollection,
             result: result[fieldName],
@@ -38,6 +46,7 @@ export const traverseFields = <T>(args: {
               }
 
               traverseFields({
+                externallyUpdatedRelationship,
                 fieldSchema: fieldSchema.fields,
                 incomingData: incomingRow,
                 populationsByCollection,
@@ -70,6 +79,7 @@ export const traverseFields = <T>(args: {
               }
 
               traverseFields({
+                externallyUpdatedRelationship,
                 fieldSchema: incomingBlockJSON.fields,
                 incomingData: incomingBlock,
                 populationsByCollection,
@@ -91,6 +101,7 @@ export const traverseFields = <T>(args: {
           }
 
           traverseFields({
+            externallyUpdatedRelationship,
             fieldSchema: fieldSchema.fields,
             incomingData: incomingData[fieldName] || {},
             populationsByCollection,
@@ -123,7 +134,12 @@ export const traverseFields = <T>(args: {
                 const newID = incomingRelation.value
                 const newRelation = incomingRelation.relationTo
 
-                if (oldID !== newID || oldRelation !== newRelation) {
+                const hasChanged = newID !== oldID || newRelation !== oldRelation
+                const hasUpdated =
+                  newRelation === externallyUpdatedRelationship?.entitySlug &&
+                  newID === externallyUpdatedRelationship?.id
+
+                if (hasChanged || hasUpdated) {
                   if (!populationsByCollection[newRelation]) {
                     populationsByCollection[newRelation] = []
                   }
@@ -136,7 +152,12 @@ export const traverseFields = <T>(args: {
                 }
               } else {
                 // Handle `hasMany` monomorphic
-                if (result[fieldName][i]?.id !== incomingRelation) {
+                const hasChanged = incomingRelation !== result[fieldName][i]?.id
+                const hasUpdated =
+                  fieldSchema.relationTo === externallyUpdatedRelationship?.entitySlug &&
+                  incomingRelation === externallyUpdatedRelationship?.id
+
+                if (hasChanged || hasUpdated) {
                   if (!populationsByCollection[fieldSchema.relationTo]) {
                     populationsByCollection[fieldSchema.relationTo] = []
                   }
@@ -185,9 +206,14 @@ export const traverseFields = <T>(args: {
               const newRelation = hasNewValue ? incomingData[fieldName].relationTo : ''
               const oldRelation = hasOldValue ? result[fieldName].relationTo : ''
 
+              const hasChanged = newID !== oldID || newRelation !== oldRelation
+              const hasUpdated =
+                newRelation === externallyUpdatedRelationship?.entitySlug &&
+                newID === externallyUpdatedRelationship?.id
+
               // if the new value/relation is different from the old value/relation
               // populate the new value, otherwise leave it alone
-              if (newID !== oldID || newRelation !== oldRelation) {
+              if (hasChanged || hasUpdated) {
                 // if the new value is not empty, populate it
                 // otherwise set the value to null
                 if (newID) {
@@ -218,9 +244,14 @@ export const traverseFields = <T>(args: {
                   result[fieldName].id) ||
                 result[fieldName]
 
+              const hasChanged = newID !== oldID
+              const hasUpdated =
+                fieldSchema.relationTo === externallyUpdatedRelationship?.entitySlug &&
+                newID === externallyUpdatedRelationship?.id
+
               // if the new value is different from the old value
               // populate the new value, otherwise leave it alone
-              if (newID !== oldID) {
+              if (hasChanged || hasUpdated) {
                 // if the new value is not empty, populate it
                 // otherwise set the value to null
                 if (newID) {

packages/live-preview/src/traverseRichText.ts

@@ -1,10 +1,12 @@
-import type { PopulationsByCollection } from './types'
+import type { PopulationsByCollection, RecentUpdate } from './types'
 
 export const traverseRichText = ({
+  externallyUpdatedRelationship,
   incomingData,
   populationsByCollection,
   result,
 }: {
+  externallyUpdatedRelationship?: RecentUpdate
   incomingData: any
   populationsByCollection: PopulationsByCollection
   result: any
@@ -20,6 +22,7 @@ export const traverseRichText = ({
       }
 
       return traverseRichText({
+        externallyUpdatedRelationship,
         incomingData: item,
         populationsByCollection,
         result: result[index],
@@ -57,8 +60,12 @@ export const traverseRichText = ({
 
       if (isRelationship) {
         const needsPopulation = !result.value || typeof result.value !== 'object'
+        const hasChanged =
+          result &&
+          typeof result === 'object' &&
+          result.value.id === externallyUpdatedRelationship?.id
 
-        if (needsPopulation) {
+        if (needsPopulation || hasChanged) {
           if (!populationsByCollection[incomingData.relationTo]) {
             populationsByCollection[incomingData.relationTo] = []
           }
@@ -71,6 +78,7 @@ export const traverseRichText = ({
         }
       } else {
         result[key] = traverseRichText({
+          externallyUpdatedRelationship,
           incomingData: incomingData[key],
           populationsByCollection,
           result: result[key],

packages/live-preview/src/types.ts

@@ -9,3 +9,10 @@ export type PopulationsByCollection = {
     ref: Record<string, unknown>
   }>
 }
+
+// TODO: import this from `payload/utilities`
+export type RecentUpdate = {
+  entitySlug: string
+  id?: string
+  updatedAt: string
+}

packages/payload/src/admin/components/views/LivePreview/Preview/index.tsx

@@ -4,6 +4,7 @@ import type { EditViewProps } from '../../types'
 
 import { useAllFormFields } from '../../../forms/Form/context'
 import reduceFieldsToValues from '../../../forms/Form/reduceFieldsToValues'
+import { useDocumentEvents } from '../../../utilities/DocumentEvents'
 import { useLivePreviewContext } from '../Context/context'
 import { DeviceContainer } from '../Device'
 import { IFrame } from '../IFrame'
@@ -23,6 +24,8 @@ export const LivePreview: React.FC<EditViewProps> = (props) => {
     url,
   } = useLivePreviewContext()
 
+  const { mostRecentUpdate } = useDocumentEvents()
+
   const { breakpoint, fieldSchemaJSON } = useLivePreviewContext()
 
   const prevWindowType =
@@ -49,6 +52,7 @@ export const LivePreview: React.FC<EditViewProps> = (props) => {
 
       const message = JSON.stringify({
         data: values,
+        externallyUpdatedRelationship: mostRecentUpdate,
         fieldSchemaJSON: shouldSendSchema ? fieldSchemaJSON : undefined,
         type: 'payload-live-preview',
       })
@@ -73,6 +77,7 @@ export const LivePreview: React.FC<EditViewProps> = (props) => {
     iframeRef,
     setIframeHasLoaded,
     fieldSchemaJSON,
+    mostRecentUpdate,
   ])
 
   if (previewWindowType === 'iframe') {