LWC Parent Component not hitting Apex with RecordId in Child Component

Question

Here are my Components: Child Component html :

<template>
    <lightning-card>
        <div class="slds-m-around_medium " onload={handleLoad}>    
            <div class="slds-form-element">
                <lightning-input label="Search" value={searchKey}  minlength="1"
                                 onkeyup={handleLoad}>   
                </lightning-input>
            </div>
            <template if:true={records.data}>
                <template for:each={records.data} for:item="record">
                    <div class="zoom slds-pill-container" key={record.Id} data-contact-id={record.Id} >
                        {record.Name}
                    </div>
                </template>
            </template>
            <template if:false={records.data}>  
                <p>No {selectedsobject} data available.</p>  
            </template>  
            <template if:true={error}>
                Error fetching {selectedsobject} records.. 
            </template>
        </div>
    </lightning-card>
</template>

childComponent.js

import { LightningElement,track,wire,api } from 'lwc';
import getsearchContactList from '@salesforce/apex/ContactController.getsearchContactList';

export default class ContactController extends LightningElement {

    @track records;
    @track error;
    @api recordId;
    @api selectedsobject;
    @api wherefield;
    @api searchKey = '';
    @track recordKey = '';


    @wire(getsearchContactList, {recordKey: '$recordKey' , searchKey: '$searchKey' , selectedsobject: '$selectedsobject' , wherefield:'$wherefield'}) 
    records ;

    handleLoad(event) {

        this.searchKey = event.target.value;
        getsearchContactList({

            selectedsobject : this.selectedsobject, 
            wherefield : this.wherefield
        })

    }
    connectedCallback(){
        this.recordKey = this.recordId;
    }
}

and here is the Parent Component

<template>

<c-childcomponent selectedsobject="Contact" where-field="AccountId" ></c-childcomponent>

</template>

Answer 1

Lightning page can provide recordId only to the top most custom LWC/AURA component. You need to pass down the record id down the hierarchy.

Make a Component Aware of Its Record Context: Define @api recordId in parent component in JS file.

Now, pass the record id to child:

<c-childcomponent record-id={recordId} selectedsobject="Contact" where-field="AccountId" ></c-childcomponent>