According to LWC docs:
The component’s JavaScript prefaces the value of the objectInfo parameter with $ to indicate that it’s dynamic and reactive. It references a property of the component instance. If its value changes, the template rerenders.
Before understanding dynamic and reactive
variable lets understand reactive
(that is , track).
When track variable is re-assigned/changed in Javascript, LWC will re-render the DOM with updated track variables.
What will happen if dynamic ('$objectInfo')
changes?
Well, the wire functions dependent on this variable is triggered.
So, change in dynamic '$objectInfo' will trigger the Javascript functions which are dependent on it. IMPORTANT: this will not re-render DOM.
objectInfo is made both dynamic and reactive by using it as $objectInfo
and also decorating it with track.
So, below code will work:
@wire(getObjectInfo, { objectApiName: OPP_OBJECT })
objectInfo;
@wire(getPicklistValues, {
recordTypeId: '$objectInfo.data.defaultRecordTypeId',
fieldApiName: STATUS_FIELD
})
pickListValues;
Reason: Here second wire will be triggered ONLY after first wire updates objectInfo
. Thus pickListValues
will be updated after getting objectInfo
Best practice: Do not use '$dynamic' variables in HTML (by decorating as track). Because if you are decorating this dynamic variable as track, 1st it will rerender the DOM
before wire is triggered and again after wire gets the data, DOM is
rerendered again (leading to performance degradation due to twice rerender of DOM). You can verify this with rerenderedCallback.
Important Notes: https://salesforcesas.home.blog/2019/07/23/dynamic-and-reactive-javascript-class-properties-in-lwc-track-wire-and/
You can use pubsub
for sending data across components - whether wire service or any other event.
Below is listener
component:
import { LightningElement, api, track, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import { registerListener, unregisterAllListeners } from 'c/pubsub';
export default class Poc extends LightningElement {
@track myResponse;
@wire(CurrentPageReference) pageRef;
connectedCallback() {
registerListener('wiredResponse', this.getWiredResponse, this);
}
disconnectedCallback() {
unregisterAllListeners(this);
}
getWiredResponse(response) {
this.myResponse = response;
}
}
HTML:
<template>
<template if:true={myResponse}>
<template if:true={myResponse.data}>
<div> data - {myResponse.data} </div>
</template>
<template if:true={myResponse.error}>
<div>error - {myResponse.error}</div>
</template>
</template>
</template>
You should download and save pubsub
module from HERE
Register listener on init (connectCallback) and implement the method to which the response has to be passed. Here its getWiredResponse
in which the response from wire service is assigned to myResponse
.
Also unregister in disconnected callback.
Firing component:
JS:
import { LightningElement, track, wire } from 'lwc';
import check from '@salesforce/apex/poc.check';
import { CurrentPageReference } from 'lightning/navigation';
import { fireEvent } from 'c/pubsub';
export default class PocTable extends LightningElement {
@wire(CurrentPageReference) pageRef;
@track checkResp;
@wire(check)
getcheckResp(result) {
this.checkResp = result;
console.log('poc table wire => ', JSON.stringify(this.checkResp));
fireEvent(this.pageRef, 'wiredResponse', this.checkResp);
}
}
HTML:
<template>
<template if:true={checkResp.data}>
<div> checkResp data - {checkResp.data} </div>
</template>
<template if:true={checkResp.error}>
<div> checkResp error - {checkResp.error}</div>
</template>
</template>
- In this you will need
fireEvent
import and you can fire the event whenever necessary. In this case inside wire service.
In both listener and firing component should have CurrentPageReference
.
@wire(CurrentPageReference) pageRef;
IMPORTANT:
When Wire service is implemented on any standard methods like getRecord
, it uses Lighning data service, so you dont need any custom functionality to optimise code here.
When wire service is used to invoke apex methods, we should be using Cacheable=true
on methods mandatorily. So, even if you use wire service on same method in multiple components, the apex method will return the response only once and the wire service will share the same data resource from client cache. So, it is not really logical/needed to handle the optimisation. If 1 wire output is the input for another wire service in another component, then it makes more sense to implement the same wire service in target component. pubsub
is application event and so it should not really be used in this case.
Component extension will not work on wire service. This is because wire service is already optimised and LWC does not really need it that way.
Best Answer
Define a setter-getter for
tripId
and use it to extract the@wire
configuration value.Here's what that looks like:
This approach with a getter-setter is preferred over other solutions (eg a getter only on tripId) because it'll keep this.tripId up to date whenever this.trip is changed.