1

I'm trying to build a TabSet form where each child component is a different form. I would like to use @wire in the child components to grab the object needed for the form. However, I can only get it to work using promises on the apex method in the child component.

main question:

Do I need to utilize promises if I am calling an apex method in a child component?

Is it more efficient to call my apex methods in the parent component and pass the objects to each component?

<c-parent> HTML

    <lightning-tabset>
        <lightning-tab label="Item Two" title="2nd tab extended title">
            Two Content !
        </lightning-tab>
        <lightning-tab label="Item Three">
            Three Content !
        </lightning-tab>
            <lightning-tab label="Basic Profile Information">
               <c-basic-profile-information record-id={recordId}></c-basic-profile-information>
            </lightning-tab>
        </lightning-tabset>

<c-parent> JavaScript

import { LightningElement, api, wire, track } from 'lwc';
import USER_ID from '@salesforce/user/Id';
import {NavigationMixin} from "lightning/navigation";

export default class UniversalIntakeForm extends NavigationMixin(LightningElement) {
    @api recordId = USER_ID; 
}

<c-Child> HTML

<template>
    <template if:true={contact} >
        <lightning-record-edit-form object-api-name="Contact" record-id={contact.data.Id}>
            <lightning-messages>
            </lightning-messages>
            <lightning-input-field field-name=FirstName>
            </lightning-input-field>
                <lightning-button
                    class="slds-m-top_small"
                    type="submit"
                    label="Update">
                </lightning-button>
        </lightning-record-edit-form>
    </template>
    
</template>

<c-Child> JavaScript

import { LightningElement, api, wire} from 'lwc';
import getContactRecord from '@salesforce/apex/Communities.getContactRecord'

export default class BasicProfileInformation extends LightningElement {
    @api contact;
    @api recordId; 
    
    @wire (getContactRecord, {userId: '$recordId'})
    contact; 
    /* Commented out Promise */
    // connectedCallback(){
//     this.getContactRecord(this.recordId);
// }

// getContactRecord(userId){
//     getContactRecord({userId: userId
//     })
//     .then((result) => {
//         console.log(result);
//         this.contact = result; 
//     })
//     .catch((error) => {
//         console.log(error);
//     })
//     .finally(() =>{
//         console.log('FINALLY'); 
//     })
// }

}

1 Answer 1

1
@api contact;
...
@wire (getContactRecord, {userId: '$recordId'})
contact; 

You defined the same variable twice, and this created a conflict. Remove the @api contact; and your code should work.

Do I need to utilize promises if I am calling an apex method in a child component?

No.

Is it more efficient to call my apex methods in the parent component and pass the objects to each component?

If your method is @AuraEnabled (as of version 43.0 or so), or @AuraEnabled(cacheable=true) (any version), no, it is not more efficient (but it is just as efficient), as the system can just use the cache. If not using the cache, calling once from the parent and passing it to all children is more efficient.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .