I've been stuck on this for so long and can't figure out why it's not working. I'm simply trying to pull in the value of a field from a record. The lightning component is on a community case record page. 

Here is my meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__RecordPage</target>
      <target>lightningCommunity__Page</target>
      <target>lightningCommunity__Default</target>
  </targets>
  <targetConfigs>
      <targetConfig targets="lightning__RecordPage">
          <objects>
              <object>Case</object>
          </objects>
      </targetConfig>
      <targetConfig targets="lightningCommunity__Default">
          <property name="recordId" type="String" label="Record ID" description="Should be set to {!recordId}"/>
      </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

I think this is correct as it can be placed on my community page and has the property 'Record Id'. I've filled that property with {!recordId}.


Here is my .js

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

import CUSTOM_FIELD from '@salesforce/schema/Case.My_Custom_Field__c';
const fields = [CUSTOM_FIELD];

export default class WatchListAlert extends LightningElement {
    @api recordId; 
    @track selectedOption; 

    @wire(getRecord, { recordId: '5003I000001JZ2gQAG', fields })
    case;

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

    connectedCallback() {     
            console.log('this.recordId: ', this.recordId); //<--- Shows correct record Id

            this.selectedOption = getFieldValue(this.case.data, RESULTS_FIELD);
            this.selectedOption2 = getFieldValue(this.case2.data, RESULTS_FIELD); //Data is undefined... can't read property 'data' of undefined.

            console.log('this.selectedOption: ', this.selectedOption); //<---- OK
            console.log('this.selectedOption2: ', this.selectedOption2); //---- NOT OK
    }


}

When I attempt to get the case record and the related field with a hard coded record id, the value shows up. But when I use $recordId the case.data is coming back as undefined. 

When I console log the recordId it's showing the correct recordId so I really have no idea what's wrong with my code.

Any help is much apreciated.