0

This question is almost identical to an earlier question, yet the accepted answer in that question does not resolve this issue for me:

This involves passing a property from a parent component down to a child component and having the child component's @wire(getRecord...) being properly called.

In our case, the wire callback function is being executed once, and only once. When it is executed, the value of the child's recordId is undefined. However, when the child's HTML template is rendered, the recordId value is correctly output.

Would love some insight as to what the issue could be because we feel we've distilled this down to the smallest possible case and yet are still having problems. Going through sample apps like eBikes, Dreamhouse and lwc-recipes hasn't yielded any help yet.

Parent Component - JS:

export default class ParentComponent extends LightningElement {
  // This is correctly being set.
  @api recordId;
}

Parent Component - HTML:

<template>
  <!-- This is being correctly output -->
  <p>Parent recordId: {recordId}</p>

  <!-- Pass parent's recordId to child component -->
  <c-child-component record-id={recordId}></c-child-component>
</template>

Child Component - JS:

Here's the problem in the ChildComponent as @wire(getRecord...) is only ever called once and when the callback is called, it seems like this.recordId is still undefined.


import { LightningElement, api, wire } from "lwc";
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
import ASSET_NAME_FIELD from "@salesforce/schema/Asset.Name";

const AssetFields = [ASSET_NAME_FIELD];

export default class ChildComponent extends LightningElement {
  @api recordId;

  @wire(getRecord, { recordId: "$recordId", AssetFields })
  wiredRecord({ data, error }) {
    // This callback is only ever invoked once.
    // 'data' and 'error' are both undefined.
    // 'this.recordId' is also undefined. 
  }
}

Child Component - HTML:

<template>
  <!-- However, when the template renders, this outputs the correct value. --> 
  <p>Child recordId: {recordId}</p>
</template>

1 Answer 1

2

You're missing a required parameter; you need either layoutType or fields.

@wire(getRecord, { recordId: "$recordId", fields: AssetFields })
2
  • 1
    Oh for crying out loud... Bit by referencing code that had named their variable fields and thus didn't need to write fields: fields but only fields. We of course renamed that field... /sigh Thanks for the quick reply.
    – kennyc
    Commented Aug 11, 2023 at 20:49
  • 2
    @kennyc It's an easy enough mistake to make, I wouldn't feel too bad about it.😁
    – sfdcfox
    Commented Aug 11, 2023 at 20:58

You must log in to answer this question.

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