Decorator Wire en Salesforce

El decorator wire en Salesforce nos ayuda a leer datos a través de un servicio reactivo en Lightning Component.

Para leer los datos de Salesforce, Lightning Web Component usa un servicio reactivo wire. Cuando el servicio proporciona datos, el componente se volverá a renderizar.

¿Para qué Sirve el Decorator Wire en Salesforce?

El decorator Wire nos ayuda a leer información de registros que provienen de Salesforce gracias a un servicio Wire.
El servicio Wire brinda un flujo de datos inmutable al componente.
Los componentes usan el decorator Wire en sus clases de Javascript para llamar un adaptador Wire o un método de Apex.
En Lightning Web Component, podemos decorar una propiedad o una función con Wire.

¿Cómo Asignamos un Decorator Wire?

Para asignar un decorator wire, ya sea a una propiedad o función, usamos la palabra reservada @wire.

@wire(getAccountList) accounts;

¿Cuándo Usar el Decorator Wire?

En Lightning Web Component, podemos usar el decorator Wire en los siguientes casos:

Cuando llamamos a un método Apex. Además, un método de Apex puede ser llamado de forma imperativa.
Cuando usamos un adaptador Wire. Se pueden usar con una propiedad o función que deben ser decoradas con wire.

¿Cómo Usamos una Propiedad Decorada con Wire?

Una propiedad decorada con Wire resulta útil cuando se va a consumir los datos o errores. Si dicha propiedad es usada como atributo en una plantilla y cambia de valor, el componente se volverá a renderizar.

Además, una propiedad decorada con Wire, es privada pero reactiva.

En el siguiente ejemplo, obtenemos el registro de un contacto a través de un Adaptador Wire en Lightning Web Component. Así mismo, en el componente, importamos Contact.Name y lo usamos en la configuración del Objeto en el Adaptador Wire.

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import CONTACT_NAME_FIELD from '@salesforce/schema/Contact.Name';

export default class Record extends LightningElement {
    @api recordId;

    @wire(getRecord, { recordId: '$recordId', fields: 
    [CONTACT_NAME_FIELD] })
    record;
}

¿Cómo Usar una Función Decorada con Wire?

El uso de una función decorada con Wire es útil siempre y cuando se realice una lógica con nuevos datos que fueron obtenidos de Salesforce o cuando se produzca un error.

El servicio Wire proporciona un objeto con propiedades de data y error, al igual que una propiedad decorada con wire.

En el siguiente ejemplo, un componente muestra el nombre de un registro de contacto, pero en caso haya un problema al traer el registro, el error se mostrará en la plantilla.

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: ['Account.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;
    }
}

<template>
    <lightning-card title="Wire Function" icon-name="standard:contact">
        <template if:true={record}>
            <div>{name}</div>
        </template>
        <template if:true={error}>
            <c-error-panel errors={error}></c-error-panel>
        </template>
    </lightning-card>
</template>