Prequel: I have several methods in need of the same @wire operations. The approach I initially took was to make a new utilities
component just for the wire operations and then use the pubsub
library to fire the data that was retrieved.
However I noticed inconsistency in the results. Sometimes that component would fire the event before the consumer components were to register their listeners.
Actual question:
So I remembered that there's cacheable
on the APEX side when using @wire. So I wonder if the results will be cached for all components that use @wire to connect to the same apex method or do the results only cache per component?
The documentation states:
Marking a method as cacheable improves your component’s performance by
quickly showing cached data from client-side storage without waiting
for a server trip.
But it's not clear to me whether the cache is for all components or is it individual per component.
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?
Best Answer
It will be better understood when explained with example. Consider a parent component:
HTML:
JS:
When you render the components by clicking on button, here will be only 1 apex server call:
child1.JS:
child2.JS:
Here will be 2 server calls: (Since the
str
value is different although same apex method)child1.JS:
child.JS:
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.