wire decorator info to showToastEvent

Question

Hi everybody I am creating a LWC form component I am only asking to the user a String and then I pass his information to a apex class through the wire decorator. the info that the apex class returns me is the Id of the created record because I want to use the NavigationMixin.GenerateUrl and ShowToastEvent to show the url of the new record. But when I am going to use the form in Salesforce in the google console shows me that the variable where I am storing the info from the wire does not exist when I have declared it.

My apex class .cls

    public with sharing class UAN_MiEntregable {
    //@AuraEnabled permite especificar que este metodo se va a llamar desde un componente LWC
    @AuraEnabled(cacheable=true)
public static Id createNewRecord(string nombreDeCompanero){
    Mi_entregable__c nuevoEntregable = new Mi_entregable__c();
    List<Mi_entregable__c> lista = new List<Mi_entregable__c>();

    nuevoEntregable.NombreCompanero__c = nombreDeCompanero;
    lista.add(nuevoEntregable);

    try{
        insert lista;
        return nuevoEntregable.Id;
    }catch(Exception ex) {
        throw new AuraHandledException(ex.getMessage());
    }

}

My .js

    idEntregable;
        @wire(createNewRecord, {nombreDeCompanero: '$nombreCompanero'})
    wiredInfo({ error, data }) {
        if (data) {
            this.idEntregable = data;
        }
    }

createNewRecord(){
    console.log(idEntregable.id);
    this[NavigationMixin.GenerateUrl]({
        type: 'standard__recordPage',
        attributes: {
            recordId: idEntregable.id ,
            actionName: 'view',
        },
    }).then( url =>{
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: 'Actividad creada con éxito accede a ella desde aquí -->: {0}',
                messageData: [{
                    url,
                    label: 'here'
                },]
            })
        );
    })

}

I don´t know where is my mistake. Could anybody tell me? Thanks

Answer 1

The problem you have in your component is:-

• You have defined @AuraEnabled(cacheable=true) in your apex method named createNewRecord. The createNewRecord method is inserting a record and hence it will throw Too many dml statement error.

• You can catch this error in your lwc using below piece of code:-

   @wire(createNewRecord, {nombreDeCompanero: '$nombreCompanero'})
    wiredInfo({ error, data }) {
       if (data) {
           this.idEntregable = data;
       }else if(error){
           console.log(error);
       }
   }
  

• To fix the issue, use imperative way of calling the apex method. Make sure apex method is without cacheable=true as wire will always require @auraEnabled(cacheable=true). check this example:-Imperative way of calling apex

You can get more info here

EDIT

• Another issue is you are using below line in your code:-

  console.log(idEntregable.id);

which is wrong as it should be console.log(this.idEntregable);

• So basically, You need to reference the properties using this. Also, you are returning an Id, so this.idEntregable will have the id by default, so need to use this.idEntregable.Id.

So your code should be like this:-

createNewRecord(){
    console.log(this.idEntregable);
    this[NavigationMixin.GenerateUrl]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.idEntregable ,
            actionName: 'view',
        },
    }).then( url =>{
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: 'Actividad creada con éxito accede a ella desde aquí -->: {0}',
                messageData: [{
                    url,
                    label: 'here'
                },]
            })
        );
    })

}