Salesforce: Call Apex From Lightning Web Components (LWC)

In Salesforce LWC (Lightning Web Component), we need to call Apex to access and manipulate data on the Salesforce backend, performing complex business logic operations that cannot be handled solely within the LWC.

To call an Apex method from LWC in Salesforce, we can use the wire property or the wire function, or call it imperatively.

In this Salesforce tutorial, we will learn how to call Apex from Lightning Web Components (LWC) using the wire and imperative methods.

Call Apex From Lightning Web Components (LWC)

Below, I will explain how to call an Apex class and its methods from Lightning web components to access their functionality.

Call Apex Using @wire Decorator in LWC

In the steps below, we will call an Apex method from Lightning Web Components (LWC) using the @wire function.

First, we will create an Apex class that contains the method that we will call from LWC. The class method must be static, either global or public, and annotated with @AuraEnabled.

For example, we have a class method that fetches the account record; it will look like this.

public with sharing class AccountController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id, Name, Industry FROM Account LIMIT 10];
    }
}

Using the @AuraEnabled(cacheable=true) allows LWC to call this method and cache the response.

In this step, we will navigate to the LWC component’s JS file and call the Apex method. After navigating to the JS file, make the changes listed below.

After creating the apex class, we will import it into the JavaScript file using the code below.

import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class AccountList extends LightningElement {    
    accounts;
    error;

    @wire(getAccounts)
    wiredAccounts({ data, error }) {
        if (data) {
            this.accounts = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.accounts = undefined;
        }
    }
   handleKeyChange(event){
		this.searchKey = event.target.value;
}
}

In the code above, using @wire(getAccounts) will call the Apex method and automatically fetch data when the component loads.

“Earlier, we used to have the @track decorator to monitor the changes in the values of object and array properties. After the Salesforce Spring ’20 release, using the @track decorator in LWC is no longer required.”

To display the fetched account data, enter the code below in the HTML file.

<template>
    <lightning-card title="Account List">
        <template if:true={accounts}>
            <lightning-datatable
                key-field="Id"
                data={accounts}
                columns={columns}>
            </lightning-datatable>
        </template>
        <template if:true={error}>
            <p>{error}</p>
        </template>
    </lightning-card>
</template>

We have used <lightning-datatable> in this HTML template to display the Account records data.

To define the columns for the lightning-datable