Reference wire getter value as Javascript variable in LWC

Question

This seems like it should be really simple but I am finding it impossible to get wire field values into a variable I can then use within the Javascript code (such as concatenating them into a String to be displayed as the LWC title).

I can easily call each field value directly from HTML, but as soon as I try to reference it with this.variablename I get a 'Cannot read properties of undefined (reading 'data')' error.

import { LightningElement, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import PROD from '@salesforce/schema/Product__c.Name';

const FIELDS = ['Product__c.Name'];

@wire(getRecord, { recordId: '$prodid', fields: FIELDS })
product;

get productname() {
     return getFieldValue(this.product.data, PROD);
}
    
teststring = 'Product: '+this.productname;

Answer 1

As mentioned in documentation here
You must add the fields parameter to getRecord method !!

Here the example :

import NAME_FIELD from '@salesforce/schema/Account.Name';

const FIELDS = ['Account.Name', 'Account.Phone'];

@wire(getRecord, { recordId: '$recordId' , fields: FIELDS})
accoun;

get productname() {
    return getFieldValue(this.accoun.data ,  NAME_FIELD );
}

handleClick(){
    console.log(this.productname)
}
get testString() {
   return 'Product :' +this.productname;
} 

Answer 2

You are the wire adapter is asynchronous, so when the getter is first used, there is probably no value (or there could be an error... more about that later).

Generically, Wired ServiceSyntax is

import { adapterId } from 'adapterModule';


@wire(adapterId, adapterConfig)
propertyOrFunction;

(see: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/data_wire_service_about)

Specifically:

This is the textbook example. When the recorded populated, wire will fire getting the data you request (you can add fields to the array), caching it in the Lightning Data Service. In the HTML, the template waits until data or error is populated. c-error-panel is a component from LWC Receipes. I strongly suggest you clone the repo, there are lots of examples and some good starting points for your LWC adventure!

// wireFunction.js
import { LightningElement, api, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

export default class WireFunction extends LightningElement {
    @api recordId;
    @track record;
    @track error;

    @wire(getRecord, { recordId: '$recordId', fields: ['Prod.Name'] })
    wiredAccount({ error, data }) {
        if (data) {
            this.record = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.record = undefined;
        }
    }
    get name() {
        return this.record.fields.Name.value;
    }
}

and

<!-- wireFunction.html -->
<template>
    <lightning-card title="Wire Function" icon-name="standard:contact">
        <template if:true={record}>
            <div class="slds-m-around_medium">
                <p>{name}</p>
            </div>
        </template>
        <template if:true={error}>
            <c-error-panel errors={error}></c-error-panel>
        </template>
    </lightning-card>
</template>