How to Call Apex Methods From LWC in Salesforce?

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 have two methods: we can call the Apex methods using the wire property or wire function, or we can call the Apex methods imperatively.

In this Salesforce tutorial, we will learn how to call Apex Methods From LWC in Salesforce using the wire and imperative methods.

Call Apex Methods From LWC in Salesforce Using The @wire Function

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

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

For example, we have a class method that fetches the account record, so the class method will be as follows.

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.

2. Now, in this step, we will navigate to the JS file of the LWC component, which we will call the Apex method. After navigating to the JS file, make the changes below in the file.

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 above code, using the @wire(getAccounts) will call the Apex method and automatically fetch data when the component loads.

“Earlier, we used to have @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.”

3. 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.

4. To define the columns for the lightning-datable, update the code for the HTML file.

columns = [
        { label: 'Account Name', fieldName: 'Name' },
        { label: 'Industry', fieldName: 'Industry' }
    ];

5. To make the LWC component accessible to the Lightning page layouts, enter the code below in the XML file inside the LightningComponentBundle.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

6. To deploy this component on the Lightning page, navigate to the page, click on the settings icon, then select Edit Page.

In the Components section, go to the custom components, then drag and drop the element to the page layout.

Now, according to the defined Apex method, you will see the List of fetched accounts in the LWC component.

This way, we can invoke Apex methods in Salesforce Lightning Web Components using the @wire function.

Call Apex Methods From LWC in Salesforce using Imperative Method

In Salesforce, to call Apex methods in LWC instead of using the @wire method, we can call the Apex methods imperatively by hardcoding the logic to invoke the Apex method.

1. For the imperative method, create another LWC component and execute the code below in the  .js file of the LWC component.

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

export default class ImperativeApexCall extends LightningElement {
    @track accounts;
    @track error;

    columns = [
        { label: 'Account Name', fieldName: 'Name' },
        {label:'Account Id', fieldName: 'Id'}
    ];
    
    handleClick() {
        getAccounts() 
            .then(result => {
                this.accounts = result;
                this.error = undefined;
            })
            .catch(error => {
                this.error = error;
                this.accounts = undefined;
                console.error('Error retrieving accounts:', error);
            });
    }
}

Let’s understand the logic that we have defined in the above  JS file to fetch the account data.

From the LWC, we have imported @track to track the account and errors that will store the list of accounts fetched and any errors that occurred.

The Columns array defines how the data table displays the account information for the Account Name and ID columns. After this, we defined the event handler handleClick(), which calls the Apex method getAccounts. If the call is successful, it will display the fetched account data.

2. Now, enter the code below in the .html file.

<template>
    <lightning-card title="Account List">
        <div class="slds-m-around_medium">
            <lightning-button label="Get Accounts" onclick={handleClick} class="slds-m-left_small"></lightning-button>
        </div>
        <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>

3. After this, we will make the component available to the Lightning page using the code below in the XML file inside the LightningComponentBundle tag.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

4. Now add the Lightning component to the page layout. To add the component, Open Lighting Page > Edit Page > drag and drop the custom LWC component to the page > Click Save.

Now, you will see that the component has been added to the page layout, and when we click the button, it will call the Apex method through the defined event.

This way, we can call the Apex methods in LWC using the imperative method.

Difference between @wire decorator and Imperative Method to Call Apex

When we need to call Salesforce Apex methods in LWC, we can use both @wire-decorated methods and call them imperatively using events. The decision to choose any of them depends on how you retrieve and handle data from Apex methods.

Calling Apex Methods From @wire decorator:

When we use the @wire method in LWC, it provides automatic data binding between the Lightning component and the result of an Apex method call. It is typically used for read-only operations (fetching records) since it cannot be used for DML operations.

The @wire methods keep the data in the cache, and for this, we use the parameter @AuraEnabled(cacheable=true) in the apex class that we call through the @wire decorator.

When we use the @wire method in Apex calling, the data changes are automatically reflected in the component’s rendering.

There are also cons to using the @wire method, like limited control over when the data is retrieved and less flexibility for custom error handling or complex processing.

Calling Apex Methods Imperatively:

When we call the Apex class methods using the imperative method, we define the whole logic by hardcoding, replacing the @wire method with the manual event methods in JavaScript code.

When we need more control over the fetched data and its customization, we should use the imperative method to call Apex. This method is flexible in handling errors and customizing data processing, making it suitable for scenarios where we have to fetch data on demand, such as on a button click.

The cons of using the imperative method are that it involves more manual coding to handle data caching and errors.

Conclusion

In this Salesforce tutorial, we have learned about the two approaches to calling the Apex method in the LWC components. In the above steps, we called the Apex method in the LWC component using the @wire method and the imperative method.

Later, we discussed the differences between the @wire and imperative methods. We should use the @wire method when we have to simply fetch the read-only data, and the imperative method when we need more control over the data modification.

You may also like to read:

• Create and Deploy LWC Components in Salesforce
• Implement Data Table with Inline Editing in LWC
• Add Styling to a Salesforce Lightning Datatable in LWC
• Salesforce Lightning Datatable Sorting in LWC
• addError() Method in Salesforce Apex

Abhijeet

Abhijeet is a skilled Salesforce developer with experience in developing and integrating dashboards, data reports, and Salesforce applications. He is also skilled at optimizing processes and flow automation processes, coding, and executing complex project architecture. Read more about us | LinkedIn Profile.