Do you have to use the value returned from force:hasRecordId to use Lightning Data Service?

Question

I've tried using the Id from a lookup field involving the record being view in my lightning component. I query this data in init, then set the returned value to theCase.

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName" access="global" controller="PaymentInfoController">

    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:attribute name="theCase" type="Case" />    

    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="recordError" type="String"/>

    // The_Contact__c is a lookup field
    <force:recordData aura:id="contactEditor"
      recordId="{!v.theCase.The_Contact__c}"
      targetError="{!v.recordError}"
      targetRecord="{!v.record}"
      fields="Email"
      layoutType="Full"
      mode="EDIT"
     />

     <lightning:input title="Patient Email" 
                      value="{!v.record.Email}" />

     <lightning:button variant="brand" 
                       label="Update Email" 
                       onclick="{!c.handleContactUpdated}"/>

When I click the lightning:button, it does console.log a Contact.Id. But when I type in the lightning:input box, I get this error:

Everything I've seen in the docs shows them using the value given from force:hasRecordId, so it appears to me the only way to use Lightning Data Service.

Answer 1

No, you don't need to use the Id from force:hasRecordId, that just happens to be the example the documentation uses. I once answered a question about the efficiency of using Lightning Data Service, and did so using an inner component that loaded the records; they were initialized from a query.

However, in your specific case, the problem is that force:recordData had already been initialized to a null record (it's initialized when it loads during aura:valueInit). The example in the documentation already has the recordId when force:recordData initializes, so it doesn't need to call reloadRecord.

In your controller, you need to make sure that you tell the component to re-initialize:

init: function(component, event, helper) {
  var action = component.get("c.initialize");
  action.setParams({ recordId: component.get("v.recordId") });
  action.setCallback(this, function(response) {
    var contactEditor = component.find("contactEditor");
    component.set("v.theCase", response.getReturnValue());
    setTimeout($A.getCallback(function() { contactEditor.reloadRecord() }));
  });
  $A.enqueueAction(action);
}

reloadRecord causes the data to be initialized correctly. You need to do this or you'll have a bad time. Note that I used an extra asynchronous call via setTimeout to give the system a chance to trigger any extra aura:valueChange triggers that may occur as a result. This may not be necessary in your case.

---

Example from my org:

<aura:application controller="q221617" extends="force:slds">
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="contact" type="Contact" default="{}" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <force:recordData aura:id="rd"
                      recordId="{!v.recordId}"
                      fields="Email"
                      mode="EDIT"
                      targetFields="{!v.contact}" />
    <lightning:input label="Email"
                     value="{!v.contact.Email}" />

</aura:application>

---

({
    init: function(component, event, helper) {
        var action = component.get("c.getRecord");
        action.setCallback(this, function(result) {
            component.set("v.recordId", result.getReturnValue().Id);
            setTimeout($A.getCallback(function() { 
                component.find("rd").reloadRecord();
            }),100);
        });
        $A.enqueueAction(action);
    }
})