0

An error is being caught upon calling the handleSave method.

I don't understand why an error is being caught here, resulting in the data table not refreshing. I have made sure that the refreshApex method receives the expected object, that was the result of the wire call.

<template>
    <div if:true={processing}>
        <lightning-spinner alternative-text="Loading..."></lightning-spinner>
    </div>
    <lightning-card title="Pagination and inline editing">
        <div if:true={accounts}>
            <c-lwc-paginator allrecords={accounts} onpagedataupdate={handleDataUpdate}>
            </c-lwc-paginator>
        </div>
        <lightning-datatable key-field="Id" 
                            data={recordsToDisplay} 
                            columns={columns}
                            onsave={handleSave}
                            draft-values={draftValues}
                            hide-checkbox-column>
        </lightning-datatable>
    </lightning-card>
</template>

import { LightningElement, track, wire } from 'lwc';
import getAccounts from '@salesforce/apex/PaginatorDemo.getAccounts';
import ACC_NAME from '@salesforce/schema/Account.Name';
import ID_FIELD from '@salesforce/schema/Account.Id';
import { updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

const columns = [
    { label: 'Account Name', fieldName: 'Name', type: 'text', editable: true },
    { label: 'Industry', fieldName: 'Industry', type: 'text', editable: true },
    { label: 'Phone', fieldName: 'Phone', type: 'phone', editable: true }
];
export default class paginationPOC extends LightningElement {
    @track error;
    @track columns = columns;
    @track accounts;
    @track processing = false;
    @track pagerecords = [];
    @track recordsToDisplay = [];
    dataToRefresh;
    @track draftValues = [];

    @wire(getAccounts)
    accountList(result) {
        this.dataToRefresh = result;
        console.log('@@@ x ' + JSON.stringify(this.dataToRefresh));
        if (result.data) {
            this.accounts = result.data;
            this.error = undefined;
        } else if (result.error) {
            this.error = result.error;
            this.accounts = [];
        }
        this.processing = false;
    }

    /*     wireAccounts({error,data}){
            if(data){
                this.accounts = data;
            }else{
                this.error = error;
            }
            this.processing = false;     
        } */

    handleDataUpdate(event) {
        this.recordsToDisplay = event.detail;
    }

    handleSave(event) {

        const fields = {};
        fields[ID_FIELD.fieldApiName] = event.detail.draftValues[0].Id;
        fields[ACC_NAME.fieldApiName] = event.detail.draftValues[0].Name;

        const recordInput = { fields };
        console.log('@@@ rec is ' + JSON.stringify(recordInput));

        updateRecord(recordInput)
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Account updated',
                        variant: 'success'
                    })
                );

                this.draftValues = [];
                console.log('@@ this.dataToRef1 ' + JSON.stringify(this.dataToRefresh));
                console.log('@@ this.dataToRef2 ' + JSON.stringify(this.accounts));
                console.log('@@ this.dataToRef3 ' + JSON.stringify(this.accountList));

                // Display fresh data in the datatable
                return refreshApex(this.dataToRefresh); // TODO bug here
            }).catch(error => {
                console.log('@@@ in the error bit!');
                console.log('@@@ in the error bit!' + JSON.stringify(error));
                console.log('@@@ in the error bit!2' + JSON.stringify(this.error));
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error'
                    })
                );
            });
    }
}
3
  • 1
    Please edit to add the exact and full error being thrown.
    – Phil W
    Commented Sep 18, 2022 at 6:50
  • There isn't an error object that I can console.log sadly but it keeps going into that catch block for some reason (even if I comment out 'error.body.message'). The success message initally throws but then the error toast message throws immediately afterwards and the data-table doesn't reload. I am not having this error when I do something like @wire(getAccounts) accounts; but it does when I add the accountList(result) logic. Commented Sep 18, 2022 at 9:06
  • Please edit to add the signature for PaginatorDemo.getAccounts. Also make it clear in the question what error detail gets logged to the console by your console logging. BTW, if you use console.log("my message", someVariable) instead of string concatenation there is no need to JSON stringify and the console allows you to explore the entire variable value.
    – Phil W
    Commented Sep 18, 2022 at 9:54

1 Answer 1

1

Ok, my guess here is that you are getting the wrong 'this' - probably from the context of the event handler method, rather than the main class itself.

Try redefining your handler as an arrow function to it doesn't get it's own context, and see how that goes.

handleSave = (event)=>{

  const fields = {};
  fields[ID_FIELD.fieldApiName] = event.detail.draftValues[0].Id;
  fields[ACC_NAME.fieldApiName] = event.detail.draftValues[0].Name;
  const recordInput = { fields };
  
  updateRecord(recordInput)
  //etc

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .