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–