Edit related child records in LWC

Question

My objective is to build a LWC component which will display the list of related opportunity records based on account and also enable users to update the stage and amount fields. I am getting the child records displayed correctly,but following are the issues:

1. I get an error popup saying: [LWC component's @wire target property or method threw an error during value provisioning. Original error: [opps is not defined]]
2. Update is not happening

Apex:

public with sharing class relatedOpp_Account {


    @AuraEnabled(cacheable=true)
    public static List<Opportunity> displayRelatedOpp_Account(string accId) {

        return [select id, name, stagename, amount, accountId from opportunity WHERE AccountId = :accId];

        

    }
}

JS:

import { LightningElement, api,wire, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import displayRelatedOpp_Account from '@salesforce/apex/relatedOpp_Account.displayRelatedOpp_Account';

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

import { updateRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';

export default class UpdateRecord_LWC extends LightningElement {

    @api recordId;
    //data =[];
    @api opps = [];
    //columns = COLS;

    @wire(displayRelatedOpp_Account, { accId: '$recordId' })
    wiredOpps ({error, data})
    {
        
        if (error)
        {
            this.opps = undefined;
            
        }
        else if (data)
        {
            this.opps = data;
            console.log(opps);
        }
    }

    handleChange(event)
    {

        if (!event.target.value) {
            event.target.reportValidity();
            this.disabled = true;
        }
        else {
            this.disabled = false;
        }
    }

    updateContact()
    {

    
        const fields = {};
            //fields[ID_FIELD.fieldApiName] = this.contactId;
            //fields[NAME_FIELD.fieldApiName] = this.template.querySelector("[data-field='Name']").value;
            fields[STAGENAME_FIELD.fieldApiName] = this.template.querySelector("[data-field='StageName']").value;
            fields[AMOUNT_FIELD.fieldApiName] = this.template.querySelector("[data-field='Amount']").value;

            const recordInput = { fields };

            updateRecord(recordInput)
                .then(() => {
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'Success',
                            message: 'Contact updated',
                            variant: 'success'
                        })
                    );
                    // Display fresh data in the form
                    return refreshApex(this.contact);
                })
                .catch(error => {
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'Error creating record',
                            message: error.body.message,
                            variant: 'error'
                        })
                    );
                });
            }
      
    }
   

HTML:

<template>
    <lightning-card title="LdsUpdateRecord" icon-name="standard:record">
        <div class="slds-m-around_medium">
           
            <template for:each={opps} for:item="opp">
                <tr key={opp.Id}>
               <td><lightning-input label="Name" value={opp.Name} data-field="Name" disabled="true" class="slds-m-bottom_x-small"></lightning-input></td> 
                <td> <lightning-input label="Stage Name" value={opp.StageName} data-field="StageName" onchange={handleChange} class="slds-m-bottom_x-small" required></lightning-input></td>
                <td><lightning-input label="Amount" value={opp.Amount} data-field="Amount" onchange={handleChange} class="slds-m-bottom_x-small" required></lightning-input> </td>
                <td><lightning-button label="Update Opportunity" variant="brand" onclick={updateContact} disabled={disabled}></lightning-button></td>
            
            </tr>
            </template>
        </div>
    </lightning-card>
</template>

Answer 1

I get an error popup saying: [LWC component's @wire target property or method threw an error during value provisioning. Original error: [opps is not defined]]

console.log(opps);

You meant this.opps.

---

Update is not happening

const recordInput = { fields };

should be:

const recordInput = { apiName: 'Opportunity', fields };

In addition, you did not provide the record Id (Id), so you cannot update the record. Make sure you include the Id.

Also, you're querying only the first record:

this.template.querySelector("[data-field='Name']").value

You would need to build a list of records, and update all of the records at once. Note that we don't have a bulk data option in LWC for now, so it'd actually probably be better to write some Apex code to bulk-save. That said, it would probably be okay to use updateRecord in bulk for a handful of records, but after about 5 or 10, you might start to get significant delays.