To call apex from Lightning Web Component, you need to
import the apex method in JavaScript class.
There are three ways by which we can call an apex from LWC-
·
Wire a property
·
Wire a function
·
Call apex imperatively
The syntax of importing apex class in JavaScript is like-
import apexMethodName
from ‘@salesforce/apex/Namespace.ClassName.apexMethodName’;
@AuraEnabled annotation must be use to expose an apex class
to LWC. The apex method must be static global/public
Wire a Property:
The apex class must be declared with @AuraEnabled(cacheable=true) when using wire service to call apex.
Making a method cacheable improved the component performance by showing the
client side cached data instead of invoking server side controller.
Scenario: calling apex method without parameter
In this scenario, the syntax to call apex is
@wire (<METHOD_NAME>)<WIRE_PROPERTY>
@wire indicates that you are using wire service to call Apex
and to call the method before you use @wire decorator, import the method like-
import getAccountList from '@salesforce/apex/AccountSearchLwcController.getAccountList';
WIRE_PROPERTY is the private property of the component which received the returned result of the wire service. There are two properties within the wire property. The data property stores the returned result and error property return in case any error.
import { LightningElement,wire} from 'lwc'; import getAccountList from '@salesforce/apex/AccountSearchLwcController.getAccountList'; export default class AccountSearchLwc extends LightningElement { @wire(getAccountList) accounts; }
Apex Class:
public with sharing class AccountSearchLwcController { @AuraEnabled(cacheable=true) public static List<Account> getAccountList() { string queryStr = 'select id,name,Phone,Email__c, Accountnumber from Account'; List<Account> listofAccounts =Database.query(queryStr); return listofAccounts; }
<template> <div class="slds-var-m-around_medium"> <template if:true={accounts.data}> <template for:each={accounts.data} for:item="account"> <p key={account.Id}>{account.Name}</p> </template> </template> <template if:true={accounts.error}> <p>SOME ERROR OCCURS </p> </template> </div> </template>
Scenario: Call apex with parameter
Here the apex method takes an input and returned the list of
account where account name contains the input parameter.
To call the apex method with parameter using @wire service,
the syntax is:
@wire(<METHOD_NAME>,{<Apex_Class_Paramerter>:<INPUT_PARAMETER_FROM_LWC>})
<WIRE_PROPERTY>
Here we need to use ‘$’ symbol with the JavaScript parameter
to indicate that its dynamic and reactive which means if value of the searchKey
parameter changes in LWC then the template will be rendered in html.
import { LightningElement,wire} from 'lwc'; import getAccountList from '@salesforce/apex/AccountSearchLwcController.getAccountList'; export default class AccountSearchLwc extends LightningElement { searchKey='Josh'; @wire(getAccountList,{searchKey:'$searchKey'}) accounts; }
public with sharing class AccountSearchLwcController { @AuraEnabled(cacheable=true) public static List<Account> getAccountList(String searchKey) { string searchStr = ''; if (searchKey!='') { searchStr = ' where name LIKE \'%'+searchKey+'%\''; } string queryStr = 'select id,name,Phone,Email__c, Accountnumber from Account'; queryStr = queryStr+searchStr; List<Account> listofAccounts =Database.query(queryStr); return listofAccounts; } }
Wire a function:
Use wire a function when you want to operate on return data.
This @wire service as function retuned the result as an object with either data
property or error property. If data property is there then it is assigned to
this.accounts and for error it is assigned to this.error. If the value of this
property changes, then the template rerenders.
import { LightningElement,track,wire} from 'lwc'; import getAccountList from '@salesforce/apex/AccountSearchLwcController.getAccountList'; export default class AccountSearchLwc extends LightningElement { searchKey='Josh'; accounts; error; @wire(getAccountList,{searchKey:'$searchKey'}) Wiredaccounts({error,data}){ If(data){ this.accounts= data; this.error = undefined; }else if(error){ this.error = error; this.data = undefined; } } }
Call Apex
Imperatively:
Apex needs to call imperatively when you need to control
when the invocation needs to be there for example, on-change event or button
click event. Here in this example, the getListOppty() JS method gets called on click of a button which in turn
call the getOpptyList() apex method and return list of opportunity.
import { LightningElement,track,wire} from 'lwc'; import getAccountList from '@salesforce/apex/AccountSearchLwcController.getAccountList'; export default class AccountSearchLwc extends LightningElement { opptyList; error; getListOfOppty(){ getOpptyList() //getOpptyList() is the apex Method Name .then(result=>{ this.opptyList = result; this.error = undefined; }) .catch(error=>{ this.opptyList = undefined; this.error = error; }); } }
