How To Call Apex Method In Lightning Web Components

How To Call Apex Method In Lightning Web Components – Salesforce

Fetching data from the server is one of the most crucial steps in any software development. Therefore, while creating a Lighting Web Component, we may need to connect our Apex classes. We will discover how to call Apex in LWC in this article.

We have several options for doing this.

1. Receiving data streams via wire services
2. Use the imperative method call.

Initially, we must take the procedures listed below to expose any Apex method in the Lightning Web Component.

1. Add the annotation @AuraEnabled to the method. Put it to use on level 2 of the method, which should be static.
2. Must be public or international

After building this apex class, import it using the code in your component’s javascript file.

@AuraEnabled(cacheable=true)
public static List getRecord() {
//return records;
}

Call Apex Method Using Wire Service

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

To further understand this, consider the scenario where we wish to retrieve the contact list in LWC.

Given below is what we have in In Component js file

import { LightningE1ement,
import getContactLis± from
wire from 'Iwc';
ales force/ apex/ContactAssist. get Contac±List
export default class ContactListLWC extends LightningElement {
contacts;

Here –
ContactAssist- Apex class name
getContactList – Method Name

What we have 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>

This line begins with the template if:true=”contacts.data”>. You’ve declared a variable called contacts in your js file and bound it to the data stream. It has two index options. One is data if the apex call is successful, while the other is an error. Similar to how you wire a variable, a function can return both data and an error.

Call Apex Methods Imperatively

In your HTML file use, this contacts variable.

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>

By looking at the aforementioned classes and code, you may get a quick notion of calling the apex function in the lightning web component. We may quickly contact the apex method and obtain the information needed to complete the specific tasks by using the ways to do so.