Error : Value provided is invalid for action parameter 'recordId' of type 'Id' in LWC imperative call to Apex

Question

I have a simple LWC component that shows Contacts of a selected Account, i am calling the Apex method imperatively from my JS code while passing the Account recordId.

Here is the Apex method signature :

@AuraEnabled
public static List<Contact> getRelatedContacts(Id recordId)

And my JS code snippet for the imperative call :

import getRelatedContacts from '@salesforce/apex/AccountService.getRelatedContacts';
...
@api
get recordId() {
    return this._recordId;
}
set recordId(value) {
   this._recordId = value;
   this.setAttribute('recordId', value);
}
...
console.log('In getRelatedContacts : '+typeof(this._recordId)+' | '+this._recordId); => this returns string & the recordId on the client side
        getRelatedContacts({
            recordId: '$_recordId'
        })
            .then(result => {
                this.relatedContacts = result;
            })
            .catch(error => {
                this.error = error.body.message;
                console.log('Error : '+this.error);
            })
            .finally(() => {
                this.isLoading = false; 
           });;

But i am receiving this error message on the client side:

Value provided is invalid for action parameter 'recordId' of type 'Id'

I tried to change the Apex method signature to the following, and both passing '$_recordId' or '$recordId' but with no luck :

@AuraEnabled
public static List<Contact> getRelatedContacts(String recordId)

And i get the following print with a System.debug on the server side after changing the parameter type to String :

DEBUG|boatId: $_recordId or DEBUG|boatId: $recordId

Which is strange because i am using the same syntax used here

I found this document talking about the error message, but nothing about the types 'Id' and 'String'.

Please tell what i am missing and the correct way to pass a recordId to call Apex imperatively. Thank you.

Answer 1

I have few queries on your use case.

1. Are you using your LWC component in a record context ?

   If yes : Then the recordId is automatically set, the attribute should have @api decorator. And your implementation should work, the syntax is correct

   If No : Which means you are setting the value of the recordId, to be sent to your apex. In this case the standard attribute $recordId will not be set, since this is not a record context. Use the following syntax :

        getRelatedContacts({
        recordId: this.recordId
        })
   

Answer 2

Wires use '$recordId', imperative calls use this.recordId

getRelatedContacts({
    recordId: this.recordId
})

Answer 3

If you want to use '$recordId' you need to mark apex method as cacheable=true

Apex: @AuraEnabled(cacheable=true) public static getObjs(Id recordId){ return [SELECT Id FROM obj WHERE Id = :recordId]; }

js:

@wire(getObjs, {recordId : '$recordId'}) fetchResult({data, error}){ if({data}){ doSomething(); }else if({error}){ handleError(); } }

Calling Apex imperatively: @AuraEnabled public static getObjs(Id recordId){ return [SELECT Id FROM obj WHERE Id = :recordId]; }

getObjs({recordId : this.recordId}) .then({data} => { doSomething(); }) .catch({error} => { handleError(); })