Chain Wire methods in LWC

by Rijwan Mohmmed
chain-wire-methods-in-lwc-techdicer

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.

chain-wire-methods-in-lwc-output-techdicer
chain-wire-methods-in-lwc-output-techdicer

Key Highlights :

  1. We can track the Wire method.
  2. 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 :

chain-wire-methods-in-lwc-output-techdicer
chain-wire-methods-in-lwc-output-techdicer

Reference :

  1. Wire Property in LWC
What’s your Reaction?
+1
3
+1
0
+1
0
+1
0
+1
2
+1
2

You may also like

Leave a Comment