lwc with list view needs to be updated when separate lwc creates new record

Question

I have an LWC that displays a list of custom object records. In a separate LWC I can create a new record that will show on the list LWC if I do a browser refresh.

How can the list LWC get updated without doing a browser refresh when a new record is created in LWC #2.

The list lwc is under a lightning component tab while the record create happens under a NavigationMixin record page with the create record LWC on it.

I apologize if this isn't worded correctly, but I'm hoping someone can point me in the right direction.

Answer 1

Check out the DOM events for this.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.events

The LWC that needs to refresh subscribes for an event. When that event is received, it can refresh itself.
The event that it subscribes to should be published whenever a new record of your custom object is created via a trigger on that object.

Example code: (I've stripped a lot of code out of my actual LWC component, but hopefully this helps you understand. The trigger fires on the FeedItem object which is the community questions. The Question_Posted__e object is a custom event object.)

Trigger:

trigger FeedItem_MasterTrigger on FeedItem ( before delete, before insert, before update, after delete, after undelete, after insert, after update ) {
    if (trigger.isBefore) {
    } else {
        if ( trigger.isInsert ) {
            FeedItem_MasterClass.afterIns(trigger.new);
        }
    }
}

Trigger Class:

public without sharing class FeedItem_MasterClass {
public static void afterIns (List<FeedItem> TriggerNew) {
    system.debug('FeedItem_MasterClass.afterIns');
    
    List<Question_Posted__e> lstQuestionsPosted = new List<Question_Posted__e>();

    // Initialize/Set System Fields
    for ( FeedItem fi : TriggerNew ) {

        if ( fi.Type == 'QuestionPost' && fi.NetworkScope != null ) {
            lstQuestionsPosted.add(new Question_Posted__e(
                RecordId__c = fi.Id
                , Title__c = fi.Title
            ));
        }

    }//fi

    if ( lstQuestionsPosted.size() > 0 ) {
        EventBus.publish(lstQuestionsPosted);
    }

}//afterIns
}//FeedItem_MasterClass

LWC JS:

export default class AgentQuestions extends NavigationMixin(LightningElement) {

    ...

    channelName = '/event/Question_Posted__e';
    subscription = {};

    eventSubscribe() {
        subscribe(this.channelName, -1, this.eventReceiveMessage.bind(this)).then(response => {
            console.log('agentQuestions.subscribe', response);
            this.subscription = response;
        });
    }
    
    eventUnsubscribe() {
        unsubscribe(this.subscription, response => {
            console.log('agentQuestions.unsubscribe', response);
        });
    }

    eventReceiveMessage(response) {
        console.log('agentQuestions.eventReceiveMessage', response.data.payload);

        this.refreshQuestions(); // this would be where you refresh
    }//eventReceiveMessage

    connectedCallback() {
        console.log('agentQuestions.connectedCallback', this.version);
        window.addEventListener("beforeunload", this.beforeUnloadHandler.bind(this));

        // Register "Question Posted" Event listener
        this.registerErrorListener();
        this.eventSubscribe();
    }
    
    beforeUnloadHandler(event) {
        console.log('agentQuestions.beforeUnloadHandler');

        // Unregister Change Event listener
        this.eventUnsubscribe();

    }//beforeUnloadHandler

    disconnectedCallback() {
        console.log('agentQuestions.disconnectedCallback');
        window.removeEventListener("beforeunload", this.beforeUnloadHandler);

        // Unregister "Question Posted" Event listener       
        this.eventUnsubscribe();

    }//disconnectedCallback

    ...

}