How to Call the Apex Method Imperatively in Lightning Web Component?

When we want to control when a method should be invoked (for instance, in response to a button click), we use an imperative method call. 

We only get one response when we call a method imperatively. 

With @wire, on the other hand, it cedes authority to the framework and causes the provisioning of a stream of values. 

Annotate the Apex method with @AuraEnabled(cacheable=true) if you want to utilize @wire to call it. Before making a network call to the server to call the Apex method, a client-side Lightning Data Service cache is checked. 

The following situations require you to contact an Apex method directly, rather than through @wire. 

• To invoke any method that inserts, modifies, or deletes data and isn't tagged with cacheable=true. 
• To regulate when the invocation takes place. 
• To work with objects like Task and Event that User Interface API does not provide. 
• Using an ES6 module's method call that does not extend LightningElement 

Don't forget to check out: Learn All About the Batch Apex in 2023

Before making a network request to the server to call an Apex method tagged with @AuraEnabled(cacheable=true), the client-side Lightning Data Service cache is examined. However, Apex-provisioned data is not managed by Lightning Data Service. As a result, to update the Lightning Data, execute getRecordNotifyChange() after calling the Apex method. 

Let us understand with a simple example- 

ImperativeMethod.html 

<template> 
    <lightning-card title="Imprerative Demo"> 
        <div style="height: 200px"> 
            <lightning-datatable 
            key-field="Id" 
            data={data} 
            columns={columns}> 
        </lightning-datatable> 
        </div> 
    </lightning-card>   
</template>

ImperativeMethod.js 

import { LightningElement,track } from 'lwc'; 
import  getCntDetails from '@salesforce/apex/ImperativeMethods.getCntDetails'; 
const columns=[ 
    {label:"Contact Id",fieldName:"Id"}, 
    {label:"Contact Name",fieldName:"Name"}, 
    {label:"Account Name",fieldName:"AccountId"}, 
]; 
export default class ImperativeMethod extends LightningElement { 
    @track columns=columns; 
    @track data=[]; 
    connectedCallback(){ 
        getCntDetails() 
        .then(result =>{ 
            this.data=result; 
        } 
            ) 
            .catch(error =>{ 
                console.log("error occurd"); 
            }) 
    }

Check out another amazing blog by Narendra Kumar here: Navigation Service in Lightning Web Component | All You Need to Know

ImperativeMethod.xml 

<?xml version="1.0" encoding="UTF-8"?> 
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> 
    <apiVersion>55.0</apiVersion> 
    <isExposed>true</isExposed> 
    <targets> 
        <target>lightning__HomePage</target> 
    </targets> 
</LightningComponentBundle>

ImperativeMethod.cls 

public with sharing class ImperativeMethods { 
    @AuraEnabled(cacheable=true) 
    public static list<Contact> getCntDetails() { 
        list<Contact>contactDetails=[select Id,Name,AccountId from Contact]; 
        return contactDetails; 
}
}

OUTPUT-