So, I'm trying to build a structure, using lightning components, where a user can add a record, such record is then processed in an @future method and I want to be able to refresh my component to show the changed data.
For this, I have a container component residing on the parent object that, on Init, queries all child objects and passes their Ids into a child component that uses force:recordData (so I can operate on those child objects as needed) to render the child data on lines on a table. I also have a form to create a new child on the parent component.
When a child is created, using the form, it has only basic information. Most of the data will be filled by the future method, so I implemented a button to refresh my container component (running doInit again), that I want to press after my future method runs, to see the latest data.
Another simple way to test this is to just change any value on the child record directly from detail page, and then refresh the container component (using the button). This does not fetch me the new data either.
I tried everything, like disabling caching, calling force:refreshView, clearing the list of child records before running the query, and calling component.find('recordId').reloadRecord() on the child record, and nothing gets me the latest data, except doing a full refresh of the page (which is not a good option).
I saw that there is a known issue on data not updating correctly, but I'm not sure it applies to my scenario.
Are there any other ways I'm missing that I could try to get this to work?
Let me try to give a sample, using Accounts and Contacts. You will need two components, one JS controller and one Apex controller, minimum:
AccountComponent.cmp
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="AccountComponentController">
<aura:attribute name="contactIds" type="String[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<lightning:button onclick="{!c.doInit}" label="Refresh"/>
<hr/>
<aura:iteration items="{!v.contactIds}" var="contact">
<c:ContactComponent contactId="{!contact}"/>
<hr/>
</aura:iteration>
</aura:component>
AccountComponentController.js
({
doInit : function(component, event, helper) {
component.set("v.contactIds", null);
var recordId = component.get("v.recordId");
var action = component.get("c.getContactIds");
action.setParams({
accId:recordId
});
action.setCallback(this, function(response){
component.set('v.contactIds', response.getReturnValue());
});
$A.enqueueAction(action);
},
})
ContactComponent.cmp
<aura:component >
<aura:attribute name="contactId" type="Id"/>
<aura:attribute name="contactFields" type="Contact"/>
<force:recordData aura:id="contactRecord"
recordId="{!v.contactId}"
targetFields="{!v.contactFields}"
fields="Phone, Name"/>
Name: {!v.contactFields.Name}
<br/>
Phone: {!v.contactFields.Phone}
</aura:component>
AccountComponentController.apxc
public class AccountComponentController {
@AuraEnabled
public static List<String> getContactIds(String accId){
system.debug(accId);
List<Id> listIds = new List<Id>();
for(Contact c : [SELECT Id FROM Contact WHERE AccountId = :accId]){
listIds.add(c.Id);
}
return listIds;
}
}
If you try to change contact data on a different tab, then click the Refresh button on the component, it won't bring you the updated data, unless you wait for a good while (upwards of a minute).
