What would be the best way to share @wire
between two lightning web components?
I went through this article but I figured that @wire
is not going to work outside of a LWC. At least I couldn't trigger the method.
In this case would it make sense to make a new "helper" LWC just so that it can perform the wire work. Then load that "helper" LWC in my other 2 components and pass the data from @wire
to them?
Best Answer
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';
HTML:
You should download and save
pubsub
module from HERERegister 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 tomyResponse
.Also unregister in disconnected callback.
Firing component:
JS:
HTML:
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
.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.