Today we will check How we can call Apex Method from Lightning Web Components controller. When we start learning any new programming language or framework, the First questions comes is How we can get data from server. In my other post I have already cover this topic but I think I should write a dedicate post for this one.

So today we will check in how many way we can call Apex method from Lightning Web Components (LWC).
Firstly, we need to import the Apex class and its method.
import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference';
Secondly, we need to make a method available to Lightning Web Component (LWC). Here cacheable=true
enable client side caching. So marking a method as cacheable
improves our component’s performance. Because it can quickly show cached data from client-side storage without waiting for a server trip.
To use @wire
to call an Apex method, we must set cacheable=true
. But once we have used cacheable we cannot use DML in that.
@AuraEnabled(cacheable=true)
public static List<sObject> getRecord() {
//return records;
}
Now we have three method in which we can call Apex method from Lightning Web Components.
- Wire a property
- Wire a function
- Call a method imperatively
Wire a Property
If we don’t want to operate on returned data and just want to show that on UI. Then we can wire a property. Here we will bind return data with a variable and later will use that in UI.
@track searchKey = '';
@wire(findContacts, { searchKey: '$searchKey' })
contacts;
<template if:true={contacts.data}>
<template for:each={contacts.data} for:item="contact">
<p key={contact.Id}>{contact.Name}</p>
</template>
</template>
Wire a function
In this approach the results are provisioned to a function, so the JavaScript can operate on the results. Also, the template accesses the data a bit differently than if results were provisioned to a property. So if we take same code and wire it to function. Then we can use this for other processing (make changes in controller) as well
@wire(getContactList)
wiredContacts({ error, data }) {
if (data) {
this.contacts = data;
this.error = undefined;
} else if (error) {
this.error = error;
this.contacts = undefined;
}
}
Call a method imperatively
For Instance, if we want to perform DML operations we need to call method imperatively. If an Apex method is annotated with cacheable=true
, then we can invoke it via the wire service or call it imperatively. So now we are calling same method imperatively
getContactList({'paramA': this.valueA, 'paramB': this.valueB})
.then(result => {
this.contacts = result;
})
.catch(error => {
this.error = error;
});
Refresh The Cache
To Refresh the cache, we need to call `refreshApex` and after that need to pass WiredProperty Name. So from the first method we can pass contacts in refreshApex
import { refreshApex } from '@salesforce/apex';
refreshApex(wiredProperty)
In addition, you can check full working example of Wire function here:
And the example of Call a method imperatively, you can check here:
Apex Limits
Apex limits are applied per invocation of an Apex method. If our JavaScript code invokes multiple Apex methods via @wire
or imperatively, then the Apex limits are applied separately to each method call.
Like our Facebook page for more updates.
So did you like the post or have any questions, let me know in comments. Happy Programming 🙂
How would you write a Test class for the Apex class?
Eric, its like normal test classes which we write.