Update records in LWC using Apex

Question

I have LWC to show contact records and modal to edit the records, I'm able to fetch records and editing also showing but don't know how to run query to update records, please look into my code, it will be great help.

//html

<template>
    <lightning-card title="Contact Records">
    
        <lightning-datatable data={wireContact.data} columns={columns} key-field="id" hide-checkbox-column="true"  onrowaction={handleRowAction} draft-values={saveDraftValues}></lightning-datatable>
        
        <template if:true={modalContainer}>
            <section  class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModalAction}>
                        <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
                        </button>
                        
                        <h2 class="slds-text-heading_medium slds-hyphenate">Contact Record Detail</h2>
                    </header>

                    <div class="slds-modal__content slds-p-around_medium">
                        <table class="slds-table slds-table_bordered slds-table_col-bordered slds-table_cell-buffer">
                        <thead> 

                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Email Name</th>
                                <th>Phone Name</th>
                            </tr>
                        </thead>
                        <tbody> 
                            <tr>


                                <td><lightning-input
                                    type="text"
                                    label="first name"
                                    value={contactRow.FirstName}>
                                </lightning-input></td>

                                <td><lightning-input
                                    type="text"
                                    label="Last name"
                                    value={contactRow.LastName}>
                                </lightning-input></td>

                                <td><lightning-input
                                    type="Email"
                                    label="Email"
                                    value={contactRow.Email}>
                                </lightning-input></td>

                                <td><lightning-input
                                    type="tel"
                                    label="Phone"
                                    value={contactRow.Phone}>
                                </lightning-input> </td>
                            </tr>

                        </tbody>   
                        </table>
                    </div>
                    <footer class="slds-modal__footer">
                    
                        <lightning-button class="slds-p-horizontal_medium" id="btn1" variant="brand" label="Close" title="Close"  onclick={closeModalAction}></lightning-button>
                        <lightning-button class="slds-p-horizontal_medium" variant="brand" label="Save" title="Save"  onclick={handleSave}></lightning-button>
                    
                </footer> 
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </template>`enter code here`
    </lightning-card>
</template>

[

// Apex class

public inherited sharing class LWCExampleController {

    @AuraEnabled(Cacheable = true)
    public static List<Contact> getContacts() {
        return [SELECT Id, Name, FirstName, LastName, Phone, Email 
                FROM Contact 
                WHERE Email != null 
                AND Phone != null 
                ORDER BY CreatedDate DESC NULLS LAST limit 10];
    } 

    @AuraEnabled(Cacheable = true)
   public static void saveRecords(List <Contact> contactsToUpdate){

    contactsToUpdate = [Select FirstName, LastName, Phone, Email FROM Contact];

    update contactsToUpdate; 
   }
}

Answer 1

• You are showing the selected record in Lightning Input, but you don't have any onchange handler to handle the change by user in field values
• Also the apex method to save the record is wrong, it is simply querying the record and updating it

Instead of making use of lightning-input and an apex method to save the changes in selected record in datatable, You can use lightning-record-edit-form which gives you flexibility to just pass the recordid and field names and all other things will be taken care.

Check this example:-

      <lightning-record-edit-form record-id={contactRow.Id} object-api-name="Contact">
            <lightning-messages> </lightning-messages>
            <lightning-input-field field-name="FirstName"> </lightning-input-field>
            <lightning-input-field field-name="LastName"> </lightning-input-field>
            <lightning-input-field field-name="Email"> </lightning-input-field>
            <lightning-input-field field-name="Phone"> </lightning-input-field>
            <lightning-button
                class="slds-m-top_small"
                variant="brand"
                type="submit"
                name="update"
                label="Update"
            >
            </lightning-button>
        </lightning-record-edit-form>

The record-edit-form will give you other benefits like respecting the field type display, record access, field-level access etc.

Update

If you are willing to use lightning-input and apex, then you need to follow few steps:-

• Add a change handler in lightning-input like below:- <lightning-input label="First Name" value={contactRow.FirstName} onchange={handleChange}></lightning-input>

• handle the change handler in your JS file like below:-

  handleChange(event){
       if(event.target.label=='First Name'){
           this.contactRow.FirstName = event.target.value;
       }
       if(event.target.label=='Last Name'){
           this.contactRow.LastName = event.target.value;
       }            
       if(event.target.label=='Phone'){
           this.contactRow.Phone = event.target.value;
       }
       //similarly add other fields
    }
  

• Now pass the contactRow to apex method and save the record. To call the apex method, check the example here

  handleSave(){
      saveRecords({ contactToUpdate: this.contactRow })
           .then((result) => {
               console.log(result);
           })
           .catch((error) => {
               console.log(error);
           });
  }
  

and your apex method will be like below, make sure you do not add the caacheable=true otherwise it will throw too many dml error

@AuraEnabled
   public static void saveRecords(Contact contactToUpdate){
      update contactsToUpdate; 
   }