How to Pass the Data from One LWC to Another LWC during Navigation when using Lightning Messaging Service

Question

Requirement:

I want to pass the data from One LWC to another LWC. Both LWC are not on the same page but added in Different Tab. So, when I pass the Data from LWC lmsNavComA, I should expect to see the data in another LWC lmsNavCompSuB.

Note: In Real, I want to Navigate from LWC to VF Page but I am facing same issue there so for POC purpose, I have added the code of 2 LWCs

Below is the code that I have tried & I am not able to see the data when I navigate to LWC lmsNavCompSuB from lmsNavComA.

LMS xml:

<?xml version="1.0" encoding="UTF-8" ?>
<LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
    <masterLabel>SampleMessageChannel</masterLabel>
    <isExposed>true</isExposed>
    <description>Message Channel to pass data</description>
    <lightningMessageFields>
        <fieldName>lmsData</fieldName>
        <description>This is the field to pass data</description>
    </lightningMessageFields>
</LightningMessageChannel>

lmsNavComA(Publishing Component):

HTML:

<template>
    <lightning-card title="LWC LMS Publish Component A">
        <div class="slds-m-around_medium">
            <lightning-input type="text" label="Enter message to publish" 
            onkeyup={inputHandler}></lightning-input>
        </div>
        <div class="slds-m-around_medium">
            <lightning-button label="Publish" onclick={publishMessage}></lightning-button>
        </div>
    </lightning-card>
</template>

JS:

import { LightningElement,wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import SAMPLEMC from "@salesforce/messageChannel/SampleMessageChannel__c"
import {MessageContext, publish} from 'lightning/messageService'
export default class LmsNavComA extends NavigationMixin(LightningElement) {
    inputValue

    @wire(MessageContext)
    context

    inputHandler(event){
        this.inputValue = event.target.value
    }

    publishMessage(){
        const message={
            lmsData:{
                value:this.inputValue
            }
        }
        //publish(messageContext, messageChannel, message)
        publish(this.context, SAMPLEMC, message);
        //After Publishing, I'm Navigating to another LWC Tab where I can not see the data
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                apiName: 'SubScribeLWCCompB'
            },
        });
    }
}

lmsNavCompSuB(Subscribing Component):

HTML:

<template>
    <lightning-card title="LWC LMS Component NavB">
        <div class="slds-m-around_medium">
            Message Received <strong>{recievedMessage}</strong>
        </div>

    </lightning-card>
</template>

JS:

import { LightningElement,wire } from 'lwc';
import SAMPLEMC from "@salesforce/messageChannel/SampleMessageChannel__c"
import {subscribe, MessageContext, APPLICATION_SCOPE, unsubscribe} from 'lightning/messageService';
export default class LmsNavCompSuB extends LightningElement {
    recievedMessage
    subscription
    @wire(MessageContext)
    context

    connectedCallback(){
        this.subscribeMessage()
    }

    subscribeMessage(){
        console.log('subscribeMessage');
        //I get above Console Log but handleMessage is not executing
        subscribe(this.context, SAMPLEMC, (message)=>{this.handleMessage(message)}, {scope:APPLICATION_SCOPE})
    }

    handleMessage(message){
        console.log('handleMessage');
        this.recievedMessage = message.lmsData.value? message.lmsData.value :'NO Message published'
    }

}

Can someone please help me what I am doing wrong here? Does LMS or PubSub events not work during Navigation?

Answer 1

Try async await, my syntax might be wrong but here's what it would look like :

publishMessage(){
    const message={
        lmsData: this.inputValue
        
    }
    this.publishedMessage(message);
    
}

async publishedMessage(message){
    await  publish(this.context, SAMPLEMC, message);
    try{
        console.log('successfully published');
        await this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                apiName: 'subscriberComp'
            },
        });
    }catch(err){
        console.log('Error :'+err);
    }
}

Basically we are waiting for publish to finish and because we are using async the function will automatically return a promise and execute navigation mixin if not, it will go to catch block.

I also wrote this fiddle if you want to play around with it,