September 20, 2023

Call Apex Class from LWC – wire & imperative method

1. Wire a property

Apex Class

public class AccountHelper {
     @AuraEnabled(cacheable=true)
     public static List<Account> getAccountList() {
        List<Account> accountList= [SELECT Id, Name, Phone, Email FROM Account LIMIT 10];
        return accountList;
     }
}

accountListLWC.html

<template>
    <lightning-card title="Call Apex Class using Wire">
        <div class="slds-m-around_medium">
            <template if:true={accounts}>
                <template for:each={accounts} for:item="acc">
                    <p key={acc.Id}>{acc.Name}</p>
                    <p key={acc.Id}>{acc.Email}</p>
                </template>
            </template>
        </div>
    </lightning-card>
</template>

import { LightningElement, wire } from 'lwc';
import getAccountList from '@salesforce/apex/AccountHelper.getAccountList';
  
export default class AccountListLWC extends LightningElement {
    @wire(getAccountList) accounts;
}

2. Wire a function

• It take care of the entire life cycle of an attribute when it changes, including fetching data by calling the method, updating the attribute and refreshing the UI, all in often a single line of code.
• Apex class must have to be cacheable = true.
• On change of a attribute you can call @wire method, you need to use ‘$’ sign before the attribute

Apex Class:

public class AccountHelper {
     @AuraEnabled(cacheable=true)
     public static List<Account> getAccountList(String accountName) {
        List<Account> accountList= [SELECT Id, Name, Phone, Email FROM Account WHERE Name like '%'+accountName+'%' LIMIT 10];
        return accountList;
     }
}

accountListLWC.html

<template>
       <lightning-card title="Wire Method With Parameters">            
              <lightning-input label="Enter Account Name" type="search"  onchange={searchAccount} value={searchKey}></lightning-input>
              <br/>
              <div class="slds-m-around_medium">
                     <template if:true={accounts}>
                            <template for:each={accounts} for:item="acc">
                                   <p key={acc.Id}>{acc.Name}</p>
                                   <p key={acc.Id}>{acc.Email}</p>
                            </template>
                     </template>
              </div>
       </lightning-card>
</template>

accountListLWC.js

import { LightningElement, wire,track } from 'lwc';
import getAccountList from '@salesforce/apex/AccountHelper.getAccountList';

export default class AccountListLWC extends LightningElement {
    @track searchKey = '';
    @track accounts;
    @track error;      
 
    searchAccount(event){        
        this.searchKey = event.target.value;        
    }
 
    @wire(getAccountList, {accountName:'$searchKey'})
    wiredAccounts({data, error}){
        if(data){
            this.accounts = data;
            this.error = undefined;
        }
        else if (error) {
            this.error = error;
            this.accounts = undefined;
        }
    }
}

3- Call a method imperatively >>> call an Apex method on demand

• To call a method that is not annotated with cacheable=true, which includes any method that inserts, updates, or deletes data.
• To control when the invocation occurs.
• To work with objects that are not supported by User Interface API, like Task and Event.
• To call a method from an ES6 module that doesn’t extend LightningElement

Apex Class:

public class AccountHelper {
     @AuraEnabled
     public static List<Account> getAccountList(String accountName) {
        List<Account> accountList= [SELECT Id, Name, Phone, Email FROM Account WHERE Name like '%'+accountName+'%' LIMIT 10];
        return accountList;
     }
}

accountListLWC.html

<template>
       <lightning-card title="Imperative Method With Parameters">            
              <lightning-input label="Enter Account Name" type="search" onchange={handleChange} value={searchKey}></lightning-input>
              <lightning-button label="Search" onclick={searchAccount} ></lightning-button>
              <br/>
              <div class="slds-m-around_medium">
                     <template if:true={accounts}>
                            <template for:each={accounts} for:item="acc">
                                   <p key={acc.Id}>{acc.Name}</p>
                                   <p key={acc.Id}>{acc.Email}</p>
                            </template>
                     </template>
              </div>
       </lightning-card>
</template>

accountListLWC.js

import { LightningElement, track } from 'lwc';
import getAccountList from '@salesforce/apex/AccountHelper.getAccountList';
export default class AccountListLWC extends LightningElement {
    @track accounts;
    @track error;
    @track searchKey;
       
    handleChange(event){
       this.searchKey=event.target.value;
    }
       
    searchAccount() {
        getAccountList({ accountName: this.searchKey })
            .then(result => {
                this.accounts = result;
            })
            .catch(error => {
                this.error = error;
            });
            .finally(() => {
                console.log('Finally');
            });
    }
}

HTML Template Directives in LWC

refreshApex in LWC

5 2 votes

Article Rating

Subscribe

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments