LWC: Does @AuraEnabled(cacheable=true) cache the result individually or combined?

Question

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?

Answer 1

1. 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.

2. 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.