LWC showToast not working after apex callout

Question

Hope all you are really well! (have just signup here)

I have LWC which is nested in an Aura component. I'm calling imperatively an apex method which executes a REST call:

       createClientOnMoloni({ //imperative Apex call
            clientId: this.recordId,
            clientRelative: this.value
        })
            .then(result => {         
                const event= new ShowToastEvent({
                    title: 'Sucess!',
                    message: 'Client created on Moloni.',
                    variant: 'success',
                    mode: 'sticky'
                });
                this.dispatchEvent(event);
            }

The Toast is not be showing. I'm sure that is because there is a http callout on apex. (commenting the callout in apex results in toast showing correctly)

What is wrong in my approach and how can I fix this?

Thanks in advance!

---

Thanks for your fast reply, but I'm sure that apex is returning successful (I checked on Developer console and on target system; I had a console.log as well before the ShowToastEvent).

I have an Aura component on a custom object and nested in I have my LWC with this controller:

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';

//Import apex method "clone" from class "RCG_CloneSerie"
import createClientOnMoloni from '@salesforce/apex/RCG_ClientMoloni.createClient';
//extends from NavigationMixin(LightningElement)
export default class LECC_CloneSerie extends NavigationMixin(LightningElement) {
    //receive record Id (serie id in context) from interface (lightning record page)
    @api recordId;
    
    value = 0;
    get options() {
        return [
            { label: 'Cliente Principal',   value: 0 },
            { label: 'Familiar Principal',  value: 1 },
            { label: 'Familiar Secundário', value: 2 }
        ];
    }
    
    handleCancel() {                          
        //'close' on constructor is required to evoke onclose on component instanciation onclose="{!c.closeParentComponent}"
        const closeParentComponent = new CustomEvent('close');
        // Dispatches the event.
        this.dispatchEvent(closeParentComponent);
    }    
    
    //event handle of clicking confirmation button 
    handleExecute() {
        createClientOnMoloni({ //imperative Apex call
            clientId: this.recordId,
            clientRelative: this.value
        })
            .then(result => {
                console.log(result);//IS EXECUTING ON BROWSER CONSOLE          
                const event= new ShowToastEvent({
                    title: 'Sucesso!',
                    message: 'Cliente criado no Moloni.',
                    variant: 'success',
                    mode: 'sticky'
                });
                this.dispatchEvent(event);
                /*
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: this.recordId,
                        //objectApiName: 'Serie__c', // objectApiName is optional
                        actionName: 'view'
                    }
                });
                */                
            })
            .catch(error => {
                console.log(error);
                //cos apex returns "{\"error\":\"invalid_request\",\"error_description\":\"Invalid access token.\"}"
                let errorFormatted;
                errorFormatted = error.body.message.replaceAll('{','');
                errorFormatted = errorFormatted.replaceAll('}','');                
                errorFormatted = errorFormatted.replaceAll('"','');
                console.log(errorFormatted);
                const event = new ShowToastEvent({
                    title: error.statusText,
                    message: errorFormatted,
                    variant: 'error',
                    mode: 'sticky'
                });
                this.dispatchEvent(event);                
            });
            //'close' on constructor is required to evoke onclose on component instanciation onclose="{!c.closeParentComponent}"
            const closeParentComponent = new CustomEvent('close');
            // Dispatches the event.
            this.dispatchEvent(closeParentComponent);
    }    
}

I have spent hours trying to find out what is going on without success. I just would like to add that SOMETIMES (rarely (10%) and randomly) the damn toast is shown. (make me crazy these things :) ).

Could be something related with the apex callout duration, once with a callout error the toast shows more times (30%)?

Thanks very much for your help!!!

Answer 1

Assuming the callout is successful, you'd get the toast, so it's most likely an error.

Try this:

createClientOnMoloni({
//imperative Apex call
clientId: this.recordId,
clientRelative: this.value,
})
.then((result) => {
    const event = new ShowToastEvent({
    title: "Sucess!",
    message: "Client created on Moloni.",
    variant: "success",
    mode: "sticky",
    });
    this.dispatchEvent(event);
})
.catch((error) => {
    alert(JSON.stringify(error));
});

Answer 2

Launching ShowToastEvent as the last event on transaction fixes the issue! (I was launching an event to close the parent Aura component after launching toast. It was working fine except when apex has a callout. Inverting the order, fixes the problem.)