When I enter search word "tes" to find the contact name "test1" and edit phone number 111 to 123, the data-table doesn't show the updated number for the search word "tes" specifically - but everywhere else work fine.
For example, if I enter "test" or "te", I would see updated number 123. Only when I search for the record under the search word I edited it on, that data-table doesn't show the update data.
I suspect it is a cache issue and data-table still retrieves from lightning data service.
import { LightningElement, wire, track } from 'lwc';
import getContactsList from '@salesforce/apex/ContactListController.getContacts';
import findContacts from '@salesforce/apex/ContactListController.findContacts';
import deleteContact from '@salesforce/apex/ContactListController.deleteContact';
import {refreshApex} from '@salesforce/apex';
const actions = [
{ label: 'Record Details', name: 'record_details'},
{ label: 'Edit', name: 'edit'},
{ label: 'Delete', name: 'delete'}
];
const columns = [
{label: 'Contact Name', fieldName: 'Name', type: 'text'},
{label: 'Contact Phone', fieldName: 'Phone', type: 'phone'},
{
label: '',
type: 'action',
typeAttributes: {
rowActions: actions,
menuAlignment: 'right'
}
}
];
/** The delay used when debouncing event handlers before invoking Apex. */
const DELAY = 350;
export default class ContactList extends LightningElement {
@track contactModal = false;
@track isEditForm = false;
@track record =[];
columns = columns;
@track error;
@track contacts;
refreshTable;
@wire(getContactsList) contactList(result) {
this.refreshTable = result;
if (result.data) {
this.contacts = result.data;
this.error = undefined;
} else if (result.error) {
this.error = result.error;
this.contacts = undefined;
}
}
handleKeyChange(event) {
// Avoid a very large number of Apex method calls.
window.clearTimeout(this.delayTimeout);
const searchKey = event.target.value;
this.delayTimeout = setTimeout(() => {
findContacts({ searchKey })
.then((result) => {
this.contacts = result;
this.error = undefined;
})
.catch((error) => {
this.error = error;
this.contacts = undefined;
});
}, DELAY);
}
// Row actions
handleRowActions(event) {
let actionName = event.detail.action.name;
let row = event.detail.row;
switch (actionName) {
case 'record_details':
this.viewRecord(row);
break;
case 'edit':
this.editRecord(row);
break;
case 'delete':
this.deleteRecord(row);
break;
}
}
// View current record
viewRecord(currentRow) {
this.contactModal = true;
this.isEditForm = false;
this.record = currentRow;
}
editRecord(currentRow) {
// Edit current record
this.contactModal = true;
this.isEditForm = true;
// Passes record Id to template
this.currentRecordId = currentRow.Id;
}
// closing modal box
closeModal() {
this.contactModal = false;
}
// handling record edit form submit
handleSubmit(event) {
// prevending default type sumbit of record edit form
event.preventDefault();
// querying the record edit form and submiting fields to form
this.template.querySelector('lightning-record-edit-form').submit(event.detail.fields);
// close modal
this.contactModal = false;
}
handleSuccess() {
console.log("Handled sucessfully!")
return refreshApex(this.refreshTable);
}
deleteRecord(currentRow) {
let currentRecord = [];
currentRecord.push(currentRow.Id);
deleteContact({contactIds: currentRecord})
.then(() => {
return refreshApex(this.refreshTable);
})
.catch(error => {
console.log(error);
});
}
}
lightning-record-edit-form
would refresh it if it's been retrieved using a base form component or a LDS wire adapter, but not if it has been cached through your Apex method. The behaviour that you are describing makes sense, and you'll have to force that refresh.handleSuccess
method is bound toonsuccess
in yourlightning-record-edit-form
. So, you're following the correct approach. Are you sure that that statement is reached?handleSuccess()
and also addedreturn refreshApex(this.refreshTable);
in thehandleSubmit()
. The console statement appears so its been reached - and is still not workingfindContact()
? Since I am using 2 query - 1 forgetContactsList
and 1 forfindContact()
;