Refresh table LWC

Question

I've been trying to rerender a table when I update an Account record with a lightning-record-form. I tried looking up a solution to this with similar questions I found here but I'm still not able to achieve this. In this case I hardcoded the recordId with the Account with the name 'Gonzalo' shown in the preview below all the code. So the wanted result is to update the account name or any field and see the instant outcome in the table. Here's my code:

Apex method (just in case):

@AuraEnabled(cacheable=true)
    public static List<Account> getCuentas() {
        return [SELECT id, Name, Phone FROM Account LIMIT 5];
    }

Form (HTML):

    <lightning-record-form
              object-api-name="Account"
              record-id="0015e00000F2JoWAAV"
              fields={fields}
              onsubmit={handleSubmit}
              >
            </lightning-record-form>

Table (HTML):

<lightning-datatable 
            key-field="pk"
            data={cuentas}
            columns={columnas}
            onrowselection={action}
            hide-checkbox-column
            onrowaction={handleRow}
            default-sort-direction={defaultSortDirection}
            sorted-direction={sortDirection}
            sorted-by={sortedBy}
            onsort={onHandleSort}
            >
          </lightning-datatable>

Related code (JS):

***Imports***
import { refreshApex } from '@salesforce/apex';
import NAME from '@salesforce/schema/Account.Name';
import PHONE from '@salesforce/schema/Account.Phone';
import getCuentas from '@salesforce/apex/ProbandoJSON.getCuentas';
import { LightningElement, api, wire, track } from 'lwc';

***Vars for the form fields***
fields = [NAME, PHONE];

***Columns***
columnas = [
    {
      label: 'View',
      type: 'button',
      initialWidth: 75,
      typeAttributes: {
        label: {
          fieldName: 'Boton'
        },
        title: 'Preview',
        alternativeText: 'View',
        variant: 'border-filled'
      } 
    },
    {
      label: 'Name', 
      fieldName: 'Name',
      sortable: true
    },
    {
      label: 'Phone',
      fieldName: 'Phone'
    }
  ];

***Accounts***
@track cuentas = [];
  _wiredResult;
  @wire(getCuentas)
  wireCuentas(result) {
    this._wiredResult = result;
    if(result.data) {
      console.log('cuentas');
      console.log(result.data);
      
      for(var i in result.data) {
        let obj = {};
        obj.Id = result.data[i].Id;
        obj.Name = result.data[i].Name;
        obj.Phone = result.data[i].Phone;
        obj.Boton = parseInt(i) + 1;
        this.cuentas = [...this.cuentas, obj];
      }
      console.log('cuentas de nuevo');
      console.log(this.cuentas);
    } else if(result.error) {
      console.log('error cuentas');
      console.log(result.error);
    }
  }

***Submit handler for the Save button in the form***
handleSubmit(event) {
    console.log('saving...')
    return refreshApex(this._wiredResult);
  }

Preview of the component:

Table
Form

score 0 · Accepted Answer · edited Aug 18 '21 at 16:21

0

Looks like a cache issue.

We can solve this in a couple of ways as follow:

Removing cacheable

You need to remove (cacheable=true) and then have to call the apex method imperatively on each form updates or while loading initial data.

Creating an unnecessary parameter in apex method which will be having new value on each call

You need to receive an additional parameter as a integer in the apex method, and then in lwc just create a var initializing it with 0, and on each update increment it by 1.

Then use same var to call the apex method via wire or in imperative calls.

edited Aug 18 '21 at 16:21

marc_s

732,580
175
1,330
1,459

answered Aug 18 '21 at 07:10

Jasneet Dua

3,796
2
10
15

Thanks, I ended up calling the method imperatively on every update! Don't know if it's that efficient but it worked! – Gonzalo Castro Aug 18 '21 at 18:40
don't worry, it's efficient if you are dealing with data update and want to have same rather than the cached data – Jasneet Dua Aug 21 '21 at 08:39

Refresh table LWC

1 Answers1