Passing attribute into child LWC component results in 'not defined' error

Question

Hi all any pointers appreciated!

Have a parent LWC component A and a nested LWC component B. I am trying to set an @api decorated variable within the nested component B to then pass to an @wire server-side query.

At render I get an 'Error during LWC component connect phase: [mode is not defined]' error and Im not sure what Im doing wrong. Surely (lol) A has set the value of mode in nested component B prior to establishing the @wire service? Any pointers most appreciated!

In A html:

<template>
   <c-componentb title="ComponentA" **mode="object"** >
</template>

In nested componentb.js:

@api mode;
@wire (options,{ 'mode': **mode** }) optionsString({error,data}){ ... }

Answer 1

We need to add $ and wrap that variable in (') single quotes, { 'mode': mode } should be { 'mode': '$mode' }

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

export default class Record extends LightningElement {
    @api recordId;

    @wire(getRecord, { recordId: '$recordId' })
    record;
}