Refresh Apex in Lightning Data Table returning error

Question

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'
                    })
                );
            });
    }
}

Answer 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