0

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

}
6
  • If the findContacts method is cacheable, their invocations and returned results will be cached - no matter if you use wire or invoke it imperatively. These results will be stored by a key, in your case it will be the name of your Apex method plus the parameter that you're executing the method with, "tes".
    – Alba Rivas
    Sep 24, 2021 at 11:15
  • The LDS wire adapters / wire functions cache (used by record form components) can't know what you are caching with your Apex methods. That means, when the record is edited, 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.
    – Alba Rivas
    Sep 24, 2021 at 11:15
  • However, I assume your handleSuccess method is bound to onsuccess in your lightning-record-edit-form. So, you're following the correct approach. Are you sure that that statement is reached?
    – Alba Rivas
    Sep 24, 2021 at 11:15
  • @AlbaRivas I put a console log statement at the handleSuccess() and also added return refreshApex(this.refreshTable); in the handleSubmit(). The console statement appears so its been reached - and is still not working
    – ApexCowboy
    Sep 24, 2021 at 14:04
  • @AlbaRivas I notice now that its not just the specific search key, it is all the search keys that I have used to load result prior to editing any record. So if type "t", "e", "s" slowly let it load records each time, an updated record would not show in "t", "te", or "tes" results. Could it be cached with findContact()? Since I am using 2 query - 1 for getContactsList and 1 for findContact();
    – ApexCowboy
    Sep 24, 2021 at 14:13

0

You must log in to answer this question.

Browse other questions tagged .