I have a LWC, which has a number of child LWC, some of which have child LWC on their own etc. Somewhere in a child-child-child... LWC I need a couple of picklists and other data from Salesforce, which I get via @wire, e.g.
import { LightningElement, wire } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import ACCOUNTSOURCE from '@salesforce/schema/Account.AccountSource';
[...]
accountSources;
@wire(getPicklistValues, { recordTypeId: '012000000000000AAA', fieldApiName: ACCOUNTSOURCE })
paymentTermsOptions({err, data}) {
if(data) {
this.accountSources = data.values;
} else if(err) {
console.error('Can not get account picklist: ' + err);
}
}
(There are a bunch of these, and some of the data requires logic inside if(data)
.)
However these picklists and some of the other 'wire data' are needed in the top level component for validation purposes too. What is the right thing to do?
Move all these @wire to the top level LWC and pass the retrieved data through to the child-child-child, making use of a getter like...
get picklists() {
return {
picklistA: this.accountSources,
picklistB: this.picklistB
[...]
}
}
Or use the same @wire in grand parent and grand child (and trust the first call is cached) with significant code duplication? (Or is there some way to include the same @wire library on two levels of the hierarchy without code duplication?)
Is there a neater alternative? Something I can access both from parent and child, like a "service component (library)"? (I have tried to move decorators outside of LightningElements and not surprisingly failed.)