Call Apex Method From Lightning Web Components

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

Lightning Web Components LWC Salesforce Lightning. Call Apex method from LWC.

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

First we need to import the Apex class and its method.

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

Now we need to make a method available to Lightning Web Component (LWC). Here cacheable=true enable client side caching. Marking a method as cacheable improves our component’s performance by quickly showing 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, We will use this. Here we will bind return data with a property 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. Now if we take same code in wire it to function. NOw we can use this for other processing 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

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

getContactList()
            .then(result => {
                this.contacts = result;
            })
            .catch(error => {
                this.error = error;
            });

Refresh The Cache

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

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

You can check full working example of Wire function here:

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

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

Advertisements

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.