+ Start a Discussion
Luke Higgins 22Luke Higgins 22 

Call Apex method again to re-render list in a lightning web component

I have a component that displays a list retrieved from an Apex method along with a section to add to the list featured below it. Once the user adds to the list, I want to call the apex method to rerender the list to show the updated version with the newly added record. Here's what I have so far: 

Aplex class:
public class getPTM {
@AuraEnabled(cacheable=true)
    public static List<jstcl__PlacementTeamMember__c> plcWizGetPTM(List<Id> plcIds) {
        return [SELECT id,jstcl__Placement__r.Name,jstcl__User__r.Name,jstcl__CommissionPlan__r.Name,jstcl__SplitPercent__c 
                   FROM jstcl__PlacementTeamMember__c 
                   WHERE jstcl__Placement__r.Id IN :plcIds ];
    }
}
ptmForWizard.html
<template>
        <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer">
            <thead>
                    <tr class="slds-text-heading--small slds-line-height_reset"> 
                        <th scope="col"><span class="slds-truncate">Placement  </span></th>
                        <th scope="col"><span class="slds-truncate">User</span></th>
                        <th scope="col"><span class="slds-truncate">Commission Plan</span></th>
                        <th scope="col"><span class="slds-truncate">Split Percentage</span></th>                
                    </tr>
            </thead>
            <template for:each={members.data} for:item='member'>      
                <tbody key={member.id}>
                    <tr  class="slds-hint-parent">
                        <td class="slds-truncate">{member.jstcl__Placement__r.Name}</td>
                        <td class="slds-truncate">{member.jstcl__User__r.Name}</td>
                        <td class="slds-truncate">{member.jstcl__CommissionPlan__r.Name}</td>
                        <td class="slds-truncate">{member.jstcl__SplitPercent__c} %</td>
                    </tr>
                </tbody>
            </template>
        </table>
<br/> 
    <lightning-record-edit-form object-api-name="jstcl__PlacementTeamMember__c" record-id={recordId} onsuccess={successsave}>
        <lightning-messages></lightning-messages>
        
        <div class="slds-grid slds-gutters slds-p-horizontal_small">
            <div class="slds-p-around_xx-small slds-size_2-of-8">
                <lightning-input-field 
                    field-name="jstcl__Placement__c"
                    value={parentId}>
                </lightning-input-field>
            </div>
            <div class="slds-p-around_xx-small slds-size_2-of-8">
                <lightning-input-field 
                    field-name="jstcl__User__c"
                    value={user}>
                </lightning-input-field>
           </div>
           <div class="slds-p-around_xx-small slds-size_2-of-8">
                <lightning-input-field 
                    field-name="jstcl__CommissionPlan__c"
                    value={commPlan}>
                </lightning-input-field>
            </div>
            <div class="slds-p-around_xx-small slds-size_1-of-8">
                <lightning-input-field 
                    field-name="jstcl__SplitPercent__c"
                    value={splitPer}>
                </lightning-input-field>
            </div>
            <div class="slds-p-around_xx-small slds-size_1-of-8 slds-m-top_large">
                <lightning-button type="submit"
                                  variant="brand" 
                                  icon-name="utility:add"
                                  title = "Add User"
                                  label="Add User">
                </lightning-button>
            </div>
        </div>
    </lightning-record-edit-form>
 </template>
ptmForWizard.js
import { LightningElement, api, wire, track} from 'lwc';
import plcWizGetPTM from '@salesforce/apex/getPTM.plcWizGetPTM';

export default class PtmForWizard extends LightningElement {
    @wire(plcWizGetPTM, {plcIds: '$parentId'}) members;
    @api recordId;
    @api parentId;
    @track plcIds = '';
    @track error;
    @track members;

    successsave(){        
        plcWizGetPTM()
            .then(result => {
                this.members = result;
            })
            .catch(error => {
                this.error = error;
            });

        this.user = null;
        this.commPlan = null;
        this.splitPer = '';
    }
}

 
Best Answer chosen by Luke Higgins 22
Khan AnasKhan Anas (Salesforce Developers) 
Hi Luke,

Greetings to you!

To query the server for updated data and refresh the cache, import and call the refreshApex(wiredProperty) function.
 
import { refreshApex } from '@salesforce/apex';
refreshApex(wiredProperty)

Please refer to the below document (check the last section) which might help you further.

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.apex

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas