How to refresh one component from another component that saves the record in lwc

Question

I have Component A that Shows the details of the record. The Details are coming from apex Controller.

I have Component B that has a lightining-button which on click shows a Modal for editing the same record that is displayed in Component A.

When I click on Save the record from Component B's Modal, it is updated at the backend, but the updatations are not immediately visible on ComponentA.

How can I Refresh the Component A , after the record is updated by Component B?

Component A has the following code that fetches the data from the controller

wiredFetchData({ error, data }) {
        if (data) {
            console.log('result:: ' + JSON.stringify(data));
            this.data = data;
            console.log('data:: ' + JSON.stringify(this.data));
            this.error = undefined;
            this.recordid = String(this.data[0].Id);
            this.name = this.data[0].Name;
            this.sourceObj = this.data[0].DYNMPR__SourceObject__c;
            this.targetObj = this.data[0].DYNMPR__TargetObject__c;
            this.description = this.data[0].DYNMPR__Description__c;
            this.active = this.data[0].DYNMPR__Active__c;
        } else if (error) {
            this.error = error;
            this.data = undefined;
        }
    }

    handleClick() {
        refreshApex(this.data);
    }

component B has the following code that handles record edit

handleSubmit(){
        var dataList = {};
        dataList.Id = this.data[0].Id;
        dataList.Name = this.name;
        dataList.DYNMPR__Active__c = this.active;
        dataList.DYNMPR__SourceObject__c = this.sourceObj;
        dataList.DYNMPR__TargetObject__c = this.targetObj;
        dataList.DYNMPR__Description__c = this.description;;
        this.newData = dataList;
        this.newData = dataList;
        console.log("this.EditData:: " + JSON.stringify(this.newData));
        updateData({mapObjData : this.newData});
        this.closeModal();
      //  return refreshApex(this.newData);

    }

How do I displatch the refreshApex event from component b after the save is handled as shown. I checked the guide but couldn't understand. Please help.

Answer 1

You can use the new Lightning Message Service, this is the alternative to the pub-sub model. You can publish a message from Component B post your operation and make Component A as a subscriber and then refresh the component.

Please refer to the below link for more details https://developer.salesforce.com/docs/component-library/bundle/lightning-message-service/documentation

Answer 2

One trick I found for this is to import the same apex method and implement it as a wire method in component B as well.

So let's say Component A had

@wire(getData)
wiredFetchData...

Implement the following in component B

 @wire(getData)
 wireForRefreshPurposes

Calling refreshApex(this.wireForRefreshPurposes) in component B would refresh wiredFetchData in component A as well.

Answer 3

Use Wire to get the record

You can make use of wire service to get the record in component A and once the updates get finished in component B, fire a custom event from Component B and listen to it on Component A. The event handler will make use of refreshApex() method.

Sometimes, you know that the cache is stale. If the cache is stale, the component needs fresh data. To query the server for updated data and refresh the cache, import and call the refreshApex() function. Invoke refreshApex() only when necessary because it incurs a network trip to query the server.

   @wire(getOpptyOverAmount)
   opptiesOverAmount;

   handleClick() {
       refreshApex(this.opptiesOverAmount);
   }

To know how you can create and dispatch an event, refer here:- Communicate with Events To know more about apex method in LWC: - Call Apex Methods