You need to pass the return from the wire to a @track
ed property and then use this property to the child component, so something like:
@track picklistOptions;
@wire(getPicklistValues, {
recordTypeId: '$myObjectInfo.data.defaultRecordTypeId',
fieldApiName: 'My_Object__c.My_Picklist_Field__c'
})
wiredOptions({ error, data }) {
if (data) {
this.picklistOptions = data;
}
}
Wire service caching depends on the apex method parameters. For same parameters' values, the same apex method invoked from multiple
components will have only 1 apex call.
For same apex method but different parameters values, there will be a separate server call to get response.
It will be better understood when explained with example. Consider a parent component:
HTML:
<template>
<div>POC:</div>
<lightning-button label="SHOW" onclick={showcomps}></lightning-button>
<template if:true={show}>
<c-child1></c-child1>
<c-child2></c-child2>
</template>
</template>
JS:
@track show = false;
showcomps() {
this.show = !this.show;
}
When you render the components by clicking on button, here will be only 1 apex server call:
child1.JS:
@wire(searchAccounts, { str: 'test' })
search(result) {
console.log('1 result => ', JSON.stringify(result));
}
child2.JS:
@wire(searchAccounts, { str: 'test' })
search(result) {
console.log('2 result => ', JSON.stringify(result));
}
Here will be 2 server calls: (Since the str
value is different although same apex method)
child1.JS:
@wire(searchAccounts, { str: 'united' })
search(result) {
console.log('result => ', JSON.stringify(result));
}
child.JS:
@wire(searchAccounts, { str: 'test' })
search(result) {
console.log('result => ', JSON.stringify(result));
}
Additional question: If I have multiple components importing the user
ID import USER_ID from '@salesforce/user/Id'; is that being cached
after the first component imports it and then the value gets imported
from the client-side for the rest of the components?
There is no concept of caching for imports.
Imports are retrieved directly along with components. There will be no separate server calls. This can be verified using same above approach.
Best Answer
The wire method is going to cache the result based on the input parameters. As such, if you want the wire method to always return the correct result, you need to use a reactive parameter:
Otherwise, you might want to use a backing variable so you can detect changes: