Call Apex Methods from LWC Using @AuraEnabled in Salesforce

As a Salesforce developer, we often need to retrieve or update data in Lightning Web Components (LWC). Since LWC runs on the client side, it can’t access the Salesforce database directly.

I was building a Salesforce app where users needed to see account details on a custom Lightning Web Component. I wanted the LWC to fetch account data from Salesforce using an Apex method whenever the component loaded.

We need a way to call server-side Apex methods from LWC. For this, we can use @AuraEnabled in Apex, which allows LWC to call the method and get the data easily.

In this article, we will learn about @AuraEnabled in Salesforce Apex. In that, I will explain how to call Apex methods from Lightning Web Component (LWC) using @AuraEnabled in Salesforce.

What is @AuraEnabled in Salesforce Apex?

In Salesforce Apex, the @AuraEnabled annotation is used to make an Apex method or variable available to Lightning components, including both Aura Components and Lightning Web Components (LWC). It acts as a bridge, allowing the LWC component to communicate with Apex (the server-side code).

Lightning Web Components run on the client side, which means they can’t directly access Salesforce data stored on the server. To work with that data, we use Apex methods.

However, not all Apex methods are automatically visible to LWC; therefore, we must use the @AuraEnabled annotation to expose them safely.

When we mark a method with @AuraEnabled, LWC can call that method using JavaScript. The method runs on the Salesforce server and returns the result, such as account or contact data, back to the component.

For example, we can create an Apex method called getAccountList() with the @AuraEnabled annotation. Then, the LWC can call this method to fetch all account records and display them on the page. This helps us to build dynamic, data-driven Lightning components.

Call Apex Methods from LWC Using @AuraEnabled in Salesforce

In the steps below, I will explain how to call Apex methods from LWC using the @AuraEnabled annotation in Salesforce, allowing you to fetch or update Salesforce data directly from your Lightning Web Component.

1. Call Apex Methods from LWC Without @AuraEnabled

First, let’s understand what happens if we don’t use the @AuraEnabled annotation in an Apex class and still try to call that method from a Lightning Web Component.

If we call it without @AuraEnabled, the method won’t be accessible to LWC, and it will throw an error or fail to run.

In the example below, you can see that we created an Apex class that contains a method to fetch Account records from Salesforce, but we haven’t used the @AuraEnabled annotation yet.

But this Apex class doesn’t show any error because the code itself is correct. However, it cannot be accessed from the Lightning Web Component since we didn’t use the @AuraEnabled annotation.

In the image below, you can see the LWC file where we call the Apex method to fetch Account records from Salesforce using the @wire decorator.

If you don’t use @AuraEnabled in an Apex class and still try to call its method from a Lightning Web Component, the method will not be accessible, and you will get a runtime error when the component runs in Salesforce.

2. Call Apex Methods from LWC Using @AuraEnabled

Now I will explain how we can resolve this error and make the Apex class methods and variables accessible to Lightning Web Components using the @AuraEnabled annotation.

This time, in the Apex class, I will use the @AuraEnabled annotation to make the methods and variables accessible to Lightning Web Components.

public with sharing class AccountController {

    // Expose this method to LWC
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id, Name, Industry FROM Account LIMIT 5];
    }
}

Now, let’s invoke the Apex class method in the LWC component to fetch Account records from Salesforce and display them dynamically on the Lightning Web Component.

This time, you will not see any error, and the reason is that we have added the @AuraEnabled annotation in the Apex class, which allows the Lightning Web Component to access the method safely.

Next, save the Apex class and LWC components, and then deploy them to the Salesforce org along with the HTML and meta.xml files.

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

export default class AccountList extends LightningElement {
    accounts;
    error;

    // Call Apex method using @wire
    @wire(getAccounts)
    wiredAccounts({ error, data }) {
        if (data) {
            this.accounts = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.accounts = undefined;
        }
    }
}

As you navigate to your Salesforce org, the first step is to add the deployed Lightning Web Component (LWC) to the record page.

To do this, open the object where you want to place the LWC component, for example, Account or Contact. Once the object record page is open, click the gear icon in the top-right corner and select ‘Edit Page‘ to open the Lightning App Builder.

In the Lightning App Builder, you will see a list of standard and custom components on the left side. Look for your deployed LWC component, then drag and drop the component onto the desired section of the record page layout.

Next, click ‘Save‘ and then ‘Activate‘ to make the changes live. Finally, return to the record page to view your LWC component displaying the data retrieved from the Apex method.

This way, we can call the Apex methods from Lightning Web Component (LWC) using @AuraEnabled in Salesforce.

Conclusion

I hope you have got an idea about @AuraEnabled in Salesforce Apex. In this article, I have explained how to call the Apex methods from Lightning Web Component (LWC) using @AuraEnabled in Salesforce.

We have also seen what happens if we don’t add the @AuraEnabled annotation in the Apex class and try to access its methods from a Lightning Web Component.

In such cases, a runtime error occurs because the LWC cannot access the Apex method. We also learned how to resolve this error by adding the @AuraEnabled annotation to the methods and variables in the Apex class.

You may like to read:

• Render Multiple Templates in Salesforce Lightning Web Components
• Component Composition in Salesforce Lightning Web Components
• Call Apex Method With Parameters in Lightning Web Component
• Create Modal Popup in Salesforce Lightning Web Component
• Use Visualforce with Lightning Web Components in Salesforce

Shubham

Shubham is a Certified Salesforce Developer with technical skills for Building applications using custom objects, approval processes, validation rule salesforce flows, and UI customization. He is proficient in writing Apex classes, triggers, controllers, Apex Batches, and bulk load APIs. I am also familiar with Visualforce Pages and Lighting Web Components. Read more | LinkedIn Profile