How To Call Apex Method In Lightning Web Components In Salesforce

One of the most important parts of development is fetching data from the server, so as in Lighting Web Component development in order to fetch data from the server we need to call our Apex classes sometimes. In this blog, we will learn how to call Apex in LWC.

We can do this in multiple ways.

• 1. Using wire service to receive data stream
• 2. Call a method imperatively

First of all in order to expose any apex method in the lightning web component we have to follow the below steps.

• 1. Annotate the method with @AuraEnabled . Use it on method level
• 2. The Method should be static
• 3. Should be public or global

Also Read: How to Implement Salesforce SSO Using OAuth

After creating this apex class import it in the javascript file of your component using the below line
import your Method from ‘@salesforce/apex/Namespace.Classname.yourMethod’;
Now let’s understand one by one with example.
Ex :
@AuraEnabled(cacheable=true)
public static List getRecord() {
//return records;
}


Using Wire service

Syntax is:
import apexMethod from '@salesforce/apex/Namespace.Classname.apexMethod';
@wire(apexMethod, { apexMethodParams })
propertyOrFunction;


Let’s understand this with an example where we want to fetch contact list in LWC

In Component js file we can have
import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactHelper.getContactList ';

export default class ContactListLWC extends LightningElement {
@wire(getContactList) contacts;
}

Learn More: How To Connect Pipedrive and Salesforce Integration?

Here –
ContactHelper- Apex class name
getContactList – Method Name
In the Component HTML file
<template>
<lightning-card title="Contacts From Apex" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<template if:true={contacts.data}>
<template for:each={contacts.data} for:item="con">
<p key={con.Id}>{con.Name}</p>
</template>
</template>
<template if:true={contacts.error}>
{contacts.error}
</template>
</div>
</lightning-card>
</template>
Here in line <template if:true={contacts.data}> contacts is a variable that you have declared in your js file and bind with the data stream. It can have 2 index. One is data in case of success from apex call and second is an error in case of an error in Apex call.

Similarly, you can wire a function too and your function can return data and error as well.

Call a Method Imperatively

In your component js file:
import { LightningElement, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactHelper.getContactList';
export default class ContactListLWC extends LightningElement {
@track contacts;
@track error;
handleLoad() {
getContactList()
.then(result => {
this.contacts = result;
})
.catch(error => {
this.error = error;
});
}
}

Here getContactList is a method written in apex class.

In your HTML file use, this contacts variable.
<template>
<lightning-card title="Contact List ImperativeCall" icon-name="custom:custom63">
<div class="slds-m-around_medium">
<p class="slds-m-bottom_small">
<lightning-button label="Load Contacts" onchange={handleLoad}></lightning-button>
</p>
<template if:true={contacts}>
<template for:each={contacts} for:item="con">
<p key={con.Id}>{con.Name}</p>
</template>
</template>
<template if:true={error}>
{error}
</template>
</div>
</lightning-card>
</template>

This is all about calling Apex in Lightning Web Components.

Emizentech is a reliable salesforce consulting company and our experienced salesforce developers can provide you professional assistance for your next salesforce project.

Also Read: How to Create a Salesforce Lightning Map Component?

Author Bio:

With a decade of experience in eCommerce technologies and CRM solutions, Virendra has been assisting businesses across the globe to harness the capabilities of information technology by developing, maintaining, and improving clients’ IT infra structure and applications. A leader in his own rights his teammates see him as an avid researcher and a tech evangelist. To know how the team Virendra can assist your business to adopt modern technologies to simplify business process and enhance productivity. Let’s Talk.