Call Apex Method From Lightning Web Components

Today we will check How we can call Apex Method from Lightning Web Components controller. When we start learning any new programming language or framework, the First questions comes is How we can get data from server. In my other post I have already cover this topic but I think I should write a dedicate post for this one.

So today we will check in how many way we can call Apex method from Lightning Web Components (LWC).

Firstly, we need to import the Apex class and its method.

import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference';

Secondly, we need to make a method available to Lightning Web Component (LWC). Here cacheable=true enable client side caching. So marking a method as cacheable improves our component’s performance. Because it can quickly show cached data from client-side storage without waiting for a server trip.
To use @wire to call an Apex method, we must set cacheable=true. But once we have used cacheable we cannot use DML in that.

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

Now we have three method in which we can call Apex method from Lightning Web Components.

• Wire a property
• Wire a function
• Call a method imperatively

Wire a Property

If we don’t want to operate on returned data and just want to show that on UI. Then we can wire a property. Here we will bind return data with a variable and later will use that in UI.

@track searchKey = '';

@wire(findContacts, { searchKey: '$searchKey' })
contacts;

<template if:true={contacts.data}>
    <template for:each={contacts.data} for:item="contact">
        <p key={contact.Id}>{contact.Name}</p>
    </template>
</template>

Wire a function

In this approach the results are provisioned to a function, so the JavaScript can operate on the results. Also, the template accesses the data a bit differently than if results were provisioned to a property. So if we take same code and wire it to function. Then we can use this for other processing (make changes in controller) as well

@wire(getContactList)
    wiredContacts({ error, data }) {
        if (data) {
            this.contacts = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }

Call a method imperatively

For Instance, if we want to perform DML operations we need to call method imperatively. If an Apex method is annotated with cacheable=true, then we can invoke it via the wire service or call it imperatively. So now we are calling same method imperatively

getContactList({'paramA': this.valueA, 'paramB': this.valueB})
            .then(result => {
                this.contacts = result;
            })
            .catch(error => {
                this.error = error;
            });

Refresh The Cache

To Refresh the cache, we need to call `refreshApex` and after that need to pass WiredProperty Name. So from the first method we can pass contacts in refreshApex

import { refreshApex } from '@salesforce/apex';
refreshApex(wiredProperty)

In addition, you can check full working example of Wire function here:

• Lightning Web Components: Datatable with LDS and Apex

And the example of Call a method imperatively, you can check here:

• Lightning Web Components: Datatable with Lazy loading, Inline Edit and Dynamic Row Action

Apex Limits

Apex limits are applied per invocation of an Apex method. If our JavaScript code invokes multiple Apex methods via @wire or imperatively, then the Apex limits are applied separately to each method call.

Like our Facebook page for more updates.

So did you like the post or have any questions, let me know in comments. Happy Programming 🙂