Lightning datatable not updating records

Question

I am trying to inline edit and update related opportunity records of an account, but the update is not happening. Console.log(event.detail.draftValues) returns undefined and getting Uncaught in Promise in console.

Apex:

public with sharing class oppRelatedAcc {
   

    @AuraEnabled(cacheable = true)
    public static List<Opportunity> getOppRecords( String id ){
        try {
                return [Select Id,Name, StageName, Amount, AccountId from Opportunity where AccountId =:id]; 

            
        } catch (Exception e) {
            throw new AuraHandledException(e.getMessage());
        }
    }

    @AuraEnabled

    public static string updateOppRecords(Object OppData)

    {
        List<Opportunity> oppsForUpdate = (List<Opportunity>) JSON.deserialize(
         JSON.serialize(OppData),
         List<Opportunity>.class);

         update oppsForUpdate;
        return 'Success: contacts updated successfully';
        //update oppList;
    }
   
    }

JS:

import { LightningElement, wire, track, api } from 'lwc';
import getOppRecords from '@salesforce/apex/oppRelatedAcc.getOppRecords'
import updateOppRecords from '@salesforce/apex/oppRelatedAcc.updateOppRecords'
import { refreshApex } from '@salesforce/apex';


import NAME_FIELD from '@salesforce/schema/Opportunity.Name';
import STAGENAME_FIELD from '@salesforce/schema/Opportunity.StageName';
import AMOUNT_FIELD from '@salesforce/schema/Opportunity.Amount';

const COLS = [
    {
        label: 'Opp Name',
        fieldName: NAME_FIELD.fieldApiName,
        editable: false
    },
    {
        label: 'Stage Name',
        fieldName: STAGENAME_FIELD.fieldApiName,
        editable: false
    },
    
    {
        label: 'Amount',
        fieldName: AMOUNT_FIELD.fieldApiName,
        
        editable: true
    }
];

// const columns=
// [

//     {label: "Opp Name", fieldName: "Name"},
//     {label: "Stage Name", fieldName: "StageName"},
//     {label: "Amount", fieldName:"Amount"}

// ];

export default class Datatable_relatedOpp extends LightningElement {

    columns = COLS;
    opps=[];
    draftValues = [];
    @api recordId;

    @wire(getOppRecords, {id: '$recordId'}) 
    wiredOpps({data, error})
    {
        if(data)
        {
            this.opps= data;
            //console.log(data);
            console.log(this.opps)
        }
    }


  async  handleSave(event)
    {
        const updatedFields = event.detail.draftvalues;
        console.log(JSON.stringify(event.detail.draftvalues))  //return undefined
        console.log(JSON.stringify(updatedFields ))  //return undefined
        //console.log(this.draftValues )

        updateOppRecords({OppData: updatedFields })
        .then( result => 
            {console.log(JSON.stringify(result))})

        .catch( error=>
            {console.log(error)})

        //this.draftValues = [];
        // Display fresh data in the datatable
        return refreshApex(this.wiredOpps);
        //refreshApex(this.opps);

    };

}

HTML:

<template>
    <lightning-card title="Practise Datatable">

        <lightning-datatable
        
        key-field="Id"
        data={opps}
        columns={columns}
        onsave={handleSave}
        draft-values={draftValues}>

           

        </lightning-datatable>


    </lightning-card>
</template>

Answer 1

JavaScript is cAsE-sEnSiTiVe. It's draftValues, not draftvalues. Notice the capital V.

Further, you don't need the JSON.serialize/deserialize bits, just use Opportunity directly:

@AuraEnabled public static void updateOppRecords(Opportunity[] OppData) {
  update OppData;
}

In addition, there's no error you can catch from a query, so you can omit the try-catch handler:

@AuraEnabled(cacheable = true)
public static List<Opportunity> getOppRecords( String id ){
    return [Select Id,Name, StageName, Amount, AccountId from Opportunity where AccountId =:id]; 
}