LWC wired service getRecord won't rerender with reactive property

Question

I am trying to use wire service to get the geo data from a record, and expecting the component will rerender every time wire service gets the data.

This is how my component JS looks like,

import LONGITUDE_FIELD from '@salesforce/schema/Boat__c.Geolocation__Longitude__s';
import LATITUDE_FIELD from '@salesforce/schema/Boat__c.Geolocation__Latitude__s';
import { getRecord } from 'lightning/uiRecordApi';
const BOAT_FIELDS = [LONGITUDE_FIELD, LATITUDE_FIELD];

export default class BoatMap extends LightningElement {
// private
@track boatId;

// Getter and Setter to allow for logic to run on recordId change
// this getter must be public
@api
get recordId() {
  return this.boatId;
}
set recordId(value) {
  this.setAttribute('boatId', value);
  this.boatId = value;
}

// Getting record's location to construct map markers using recordId
// Wire the getRecord method using ('$boatId')
@wire(getRecord, { recordId: '$boatId', fields: BOAT_FIELDS })
wiredRecord({error, data}) {
  // Error handling
  if (data) {
    this.error = undefined;
    const longitude = data.fields.Geolocation__Longitude__s.value;
    const latitude = data.fields.Geolocation__Latitude__s.value;
    // this updates the map marker array
    this.updateMap(longitude, latitude);
  } else if (error) {
    this.error = error;
    this.boatId = undefined;
    this.mapMarkers = [];
  }
}

// receives message from message lms channel
// from the debug statement I can tell that it is receiving the updated ids from the channel
// here I am expecting that on setting the id received from channel to this.boatId
// because this.boatId is a reactive property in wired service it will invoke a getRecord wire service call. But it doesn't do that.
handleMessage(message) {
  console.log('message received');
  console.log(message.recordId);
  this.boatId = message.recordId;
  //this.recordId = message.recordId;
  console.log(this.boatId);
}

My understanding and expectation is because I am using this.botId as reactive property ('$boatId') in my getRecord wire call, every time the value of this.boatId is updated wire service should fetch the data (either from service or from cache) and re-render the component with the new geo-data by invoking this.updateMap

I also tried manually refreshing the wired service fetch data using refreshApex, but even that approach didn't work.

Answer 1

Documenting the resolution I found to my question here,

so apparently LWC doesn't like if you you use imported references to the geo-location compound fields which is why this doesn't work with wired service:

import LONGITUDE_FIELD from ' @salesforce/schema/Boat__c.Geolocation__Longitude__s';
import LATITUDE_FIELD from '@salesforce/schema/Boat__c.Geolocation__Latitude__s';
const BOAT_FIELDS = [LONGITUDE_FIELD, LATITUDE_FIELD];

If you change that to this instead it works fine with the wire:

const LONGITUDE_FIELD = 'Boat__c.Geolocation__Longitude__s';
const LATITUDE_FIELD = 'Boat__c.Geolocation__Latitude__s';
const BOAT_FIELDS = [LONGITUDE_FIELD, LATITUDE_FIELD];

I was able to get to this with the help of this answer here, which in turn references the documentation that specifically says:

A compound geolocation field is supported through its constituent fields. To access a geolocation field, use its constituent fields with string syntax.

(emphasis added for clarity)