Passed parameters to wired property in LWC do not work when data changes and tracked parameter changes

Question

I have a @wire that works well in most cases.

@track searchTerm = '';
@track searchType = 'All';
@track selectEvent = '' ; 
@track registrations;
@wire(searchRegistrations, {searchTerm: '$searchTerm', searchType: '$searchType', selectEvent: '$selectEvent'})
loadRegistrations(result) {
    console.log("loadRegist at work");
    this.registrations = result;
    }
} 

Changing searchTerm, searchType, selectEvent work as expected.

When changing searchType via a Button on the screen it brings up the resulting data by changing the '$searchTerm' wire parameter except if the key search fields use by the class is changed. The field is the assigned room. if we are

handleToggleClick() {
    // retrieve the classList from the specific element

    if (this.toggleIconName === 'utility:preview') {
        this.toggleIconName = 'utility:hide';
        this.toggleButtonLabel = 'View All Registrations';
        this.searchType = "NoRoomAssign";
    } else {
        this.toggleIconName = 'utility:preview';
        this.toggleButtonLabel = 'View not assigned Rooms ';
        this.searchType = 'All';
    }
}

I assign a room and save the record. Now if I click on the button and cause this.searchType = "NoRoomAssign"; If does not fire off the wire. I do not get the console.log in the loadRegistrations method.

Is this because the result is pulling from cache only even though the data is changed? How do I fix that?

Interesting blog about @wire but i'm unclear how to update the cache if that is what is needed. https://developer.salesforce.com/blogs/2019/09/caching-and-synchronizing-component-data-with-lightning-data-service.html

Answer 1

Your bolded question is almost certainly the issue - if the specific set of parameter values have previously been used to invoke a wire and the results are still in the client-side cache then LWC automatically optimizes the interaction with the server and does not cause any call to be made. You can observe this using the browser's network inspector.

If you need to guarantee that a call is made to your Apex method you need to change from using a wire to using an imperative call and make sure that the Apex method is not cacheable.

This means writing more code in the LWC in order to handle changes to the properties that are the parameters. You no longer use tracking, but instead keep these as private properties. You then need to ensure that every piece of code that can change the values of these parameters invokes a function that in turn performs the imperative call.

Thus you might have:

_searchTerm = "";
_searchType = "All";
etc.

handleToggleClick() {
    // retrieve the classList from the specific element

    if (this._toggleIconName === 'utility:preview') {
        this._toggleIconName = 'utility:hide';
        this._toggleButtonLabel = 'View All Registrations';
        this._searchType = "NoRoomAssign";
    } else {
        this._toggleIconName = 'utility:preview';
        this._toggleButtonLabel = 'View not assigned Rooms ';
        this._searchType = 'All';
    }

    this.callSearchRegistrations();
}

callSearchRegistrations() {
    searchRegistrations({searchTerm: this._searchTerm, searchType: this._searchType, selectEvent: this._selectEvent})
        .then(result => {
            // Handle the success response
        })
        .catch(error => {
            // Handle the error response
        });
}

Note that it is possible to stick with a wire/cached AuraEnabled method and to force clear the cache using refreshApex each time one of the parameters for the wire changes (you must store the "result" value received in the wire handler for that call) though to me this is an abuse of the wire feature. The correct approach is to use an imperative call to a non-cached method.