2-way LMS approach

Question

Requirement: I have a custom subtab (Parent) on my console. It has a web link, upon clicking it opens a new subtab (Child). This Child subtab needs some data from the Parent subtab, so I am implementing a 2-way LMS approach to get the data: Clicking on the web link will publish an LMS channel with keyId (connectedCallback on the LWC), which then subscribed by the Parent subtab's component which in turn Publishes another LMS (DataChannel) with necessary data on it. I need to subscribe to this newly published DataChannel on the Child subtab's component.

Ask: How can I access this DataChannel on the Child component? Is it via renderedCallback()? Or, directly within connectedCallback() right after the initial LMS channel publish?

Child LWC:

connectedCallback() {
  //some code
  this.publishFirstLMSChannel(); //First LMS publishing
  //more code
}

Parent Aura:

CMP:

<lightning:messageChannel type="firstLMSfromChildLWC__c" scope="APPLICATION"
    onMessage="{!c.handleFirstLMS}"/> 

<lightning:messageChannel type="secondLMSDataChannel__c" scope="APPLICATION"
    aura:id ="secondLMSDataChannel"/> 

JS:

handleFirstLMS: function(component,message){
    //get Parent's data and constructor 'dataMessage'
    component.find("secondLMSDataChannel").publish(dataMessage);
   }

I was able to verify the LMS: secondLMSDataChannel and can confirm the availability of the data in it. All I need is to access it in the Child LWC.

Answer 1

You can subscribe as soon as connectedCallback, but you should not publish until the initial life cycle is done. You could easily do that in connectedCallback, though:

async connectedCallback() { // async converts this method to a Promise.
  this.subscribeToChannel(); // You can subscribe here.
  await Promise.resolve(); // Wait one render cycle.
  this.publishFirstLMSChannel();
}