Set dynamic map parameter of @wire method (LWC)

Question

I have a method in my Apex controller that takes two parameters, a String and a Map< String, String>. For the plain String it evaluates correctly for me to pass a variable ‘$myVariable’ and the Apex controller receives the value, but when it is embedded as a value in a map, it doesn’t evaluate it – it just passes the string ‘$myVariable’

LWC JS controller snippet:

// strToPass is received from the parent component, ex. "test value"
@api strToPass;

@wire(myApexMethod, {strParam: '$strToPass', mapStringParam:{‘key’: '$strToPass'}})
        wiredInitData({ error, data }){
        if(data){
            this.data = data;
        }
        else if(error){
            this.error = error;
        }
    }

Apex controller:

public static void myApexMethod(String strParam, Map<String, String> mapStringParam){
    System.debug(‘strParam: ‘ + strParam);
    System.debug(‘mapStringParam: ‘ + mapStringParam);
}

Results of debug statements:

strParam: test value
mapStringParam: '$strToPass'

Things I've tried that haven't worked:

// This produced the same results as above:
@wire(myApexMethod, {strParam: '$strToPass', mapStringParam:{key:'myKey', value:'$strToPass'}})

// The Apex method received null here for the map parameter:
mapValues = [{key: 'myKey', value: 'myValue' }];
@wire(myApexMethod, {strParam: '$strToPass', mapStringParam: '$mapValues'})

Seems like it's just got to be a syntax issue here, but I can't figure it out...

Answer 1

Added based on comments

You need to modify the dynamic property mapStringParam in change handler of strToPass so that wire service is invoked whenever dynamic property is changed. Below is code:

@api
get strToPass() {
    return this._strToPass;
}
set strToPass(value) {
    this._strToPass = value;
    this.mapStringParam = { key: this.strToPass };
}

@wire(myApexMethod, { mapStringParam: '$mapStringParam' })
wiredInitData({ error, data }) {
    if (data) {
        this.data = data;
    } else if (error) {
        this.error = error;
    }
}

---

OLD Answer

When you say strParam: '$strToPass' that means strToPass is dynamic property but when you say mapStringParam:{key:'myKey', value:'$strToPass'}, strToPass is deeply located inside object which will no more be dynamic and it will just consider it as string.

When you want wire service to be dependent on any dynamic property like myDynamicProp, it should be directly mentioned with $ at 1st level:

myApexParam: '$myDynamicProp'

So, you can change your JS as follows:

@track mapStringParam = { key: 'test value' };
@track strToPass = 'test value';

@wire(myApexMethod, {strParam: '$strToPass', mapStringParam: '$mapStringParam'})
    wiredInitData({ error, data }){
    if(data){
        this.data = data;
    }

Whenever you change mapStringParam.key, it will re-invoke this wire service. else if(error){ this.error = error; } }