What is the best practice for getting a field value from an LWC?

Question

This question is similar to Which is preferable and why: onchange or template.querySelector, in that there are several different ways to do the same thing in LWC but it's not always clear as to which is the best practice way.

When using a wire call, one can then get the value of a field like this (both approaches could be encapsulated in a getter):

  @wire(getRecord, {
    recordId: "$recordId",
    fields: [CLOSE_DATE]
  })
  opportunity;

and then in the .js file:

let closeDate = this.opportunity.data.fields.CloseDate.value;

or:

let closeDate = getFieldValue(
  this.opportunity.data,
  CLOSE_DATE
);

It seems that Salesforce aren't strictly advising one way or the other but it seems that the latter is more 'standard' and less prone to breaking (I suppose if one has a custom field and the API changed, then it would need to be changed in multiple places whereas it would just have to be changed once using getFieldValue).

Answer 1

Consider this code:

get closeDate() {
  return this.opportunity.data.fields.CloseDate.value;
}

This would throw an error because the wired data wouldn't be available on the first render, which would break your component. Contrariwise, you can write:

get closeDate() {
  return getFieldValue(this.opportunity.data, CLOSE_DATE);
}

And it won't throw an error.

Notice how we also get to use the field token without caring about the structure of the field token, and we get to get the value without worrying about the structure of the wired record data.

I would recommend that you use that getFieldValue and getFieldDisplayValue consistently.