This.template.querySelector(…).handleUpdateCase().then is not a function

apilightning-web-componentspromises

Hello,

I develop a parent LWC which calls a method from a child LWC.

Unfortunately, I get this error message:

this.template.querySelector(…).handleUpdateCase().then is not a function

This is the parent LWC:

this.template.querySelector('c-ricba_-q-m_-send-s-m-s').handleUpdateCase()
            .then((data) => {
                
            })
            .catch(error => {
                
            })
            .finally(() => {
                
            })

The child LWC (ricba_QM_SendSMS):

@api
handleUpdateCase() {
    console.log('Hello');
    return {
        ticketId: this.ticketId,
        message: this.message
    };
}

I would like to understand why the method "then" is not a function please (the child LWC is in the HTML file in the parent LWC)?
Maybe the error is from something else?
I know the child method is called because if I can read the "console.log" in the developer console of the browser.

Thanks

Best Answer

@api
handleUpdateCase() {
    return {
        ticketId: this.ticketId,
        message: this.message
    };
}

You didn't return a Promise or use async, so then isn't a function of the return value. As written, it's just a normal function, so you can write:

let result = this.template.querySelector('c-ricba_-q-m_-send-s-m-s').handleUpdateCase();

Related Solutions

[SalesForce] LWC not recognizing PageRefrence changes and not displaying updated values

Found one solution -

In the component with lightning:isUrlAddressable simply add a change handler for the pageReference state.

Component:

<aura:handler name="change" value="{!v.pageReference}" action="{!c.reInit}" />

Controller.js:

reInit : function(component, event, helper) {
        $A.get('e.force:refreshView').fire();
    }

Handle a Javascript event inside .then method of a Promise ? LWC

Seems like the event DOM property is not directly accessible when promise is resolved i.e. inside .then.

You need to create a local property [named target in this example] to hold event.target, doing so target is accessible inside .then-

handleSaveUniqueRecord (event) {
    let target = event.target;

    saveUniqueFieldData ({
        // your properties here
    })
    .then(result => {
        console.log('access reference event inside THEN ' + target.name);
    }
}

Psuedo working example on https://webcomponents.dev/

OR Another alternative would be to use async/await pattern.

Note: I think event represent DOM which is accessible in sync call inside a function, when you call a promise; its executed in a separate microtask where DOM is not accessible anymore.

Best Answer

Related Solutions

[SalesForce] LWC not recognizing PageRefrence changes and not displaying updated values

Handle a Javascript event inside .then method of a Promise ? LWC

Related Topic