Hello friends, today we are going to discuss Chain Wire methods in LWC(Lightning Web Component). Many times we face issues when there are multiple Wire methods but they start randomly. So We have a solution for this type of issue.
Also, check this: Upload Image by HTTP Callout in LWC
The value set by one wire method may be dependent on the value set by another wire method. Using chaining, we can arrange the wire methods accordingly. If we pass parameters of the Wire method, that parameters values are set in another Wire method then they run orderly. So first parameters values set in Wire method so it calls first, then another method will call which have parameters.
Key Highlights :
- We can track the Wire method.
- We can handle the execution of wire methods
Code :
Here I create 2 Wire methods in which one method depends on another Wire method.
AccountDataController.cls :
public class AccountDataController {
@AuraEnabled (cacheable=true)
public static List<Account> fetchAccounts(){
return [SELECT Id, Name, BillingPostalCode, BillingCountry
FROM Account LIMIT 10];
}
@AuraEnabled (cacheable=true)
public static List<Opportunity> fetchOpportunity(String accountId){
return [SELECT Id, Name, Account.Name, AccountId, StageName, Amount, CloseDate
FROM Opportunity WHERE AccountId =:accountId LIMIT 10];
}
}
chainWireMethodLWC.HTML :
<template>
<!------Header------->
<div class="slds-tabs_card">
<div class="slds-page-header">
<div class="slds-page-header__row">
<div class="slds-page-header__col-title">
<div class="slds-media">
<div class="slds-media__figure">
<span class="slds-icon_container slds-icon-standard-opportunity">
<lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
</span>
</div>
<div class="slds-media__body">
<div class="slds-page-header__name">
<div class="slds-page-header__name-title">
<h1>
<span>Chain Wire methods in LWC Salesforce </span>
<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <br/>
<!------/Header------->
<lightning-card title="Chain Wire methods in LWC Salesforce" icon-name="standard:opportunity">
<div class="slds-var-p-around_small">
<b>Retrive Account Id : {accountId}</b>
</div>
<template if:true={opportunityList}>
<lightning-datatable key-field="Id"
data={opportunityList}
columns={columns}
hide-checkbox-column
show-row-number-column>
</lightning-datatable>
</template>
</lightning-card>
</template>
chainWireMethodLWC.JS :
import { LightningElement, wire, track } from 'lwc';
import fetchAccounts from "@salesforce/apex/AccountDataController.fetchAccounts";
import fetchOpportunity from "@salesforce/apex/AccountDataController.fetchOpportunity";
//columns
const columns = [
{
label: 'Name',
fieldName: 'Name',
type: 'text',
}, {
label: 'Stage Name',
fieldName: 'StageName',
type: 'text'
}, {
label: 'Amount',
fieldName: 'Amount',
type: 'currency'
}
];
export default class ChainWireMethodLWC extends LightningElement {
@track accountId;
@track opportunityList;
columns = columns;
@wire(fetchAccounts, {})
wiredAccount( { error, data } ) {
if(data) {
this.accountId = data[0].Id;
} else if (error) {
console.log(error);
}
}
@wire(fetchOpportunity, {accountId : '$accountId'})
wiredOpportunity( { error, data } ) {
if(data) {
this.opportunityList = data;
} else if (error) {
console.log(error);
}
}
}
chainWireMethodLWC.js-meta.xml :
<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
Output :
Total views : 1113427