¿Cómo Llamar Apex en Lightning Web Component?

Una de las funcionalidades que nos permite Salesforce es llamar métodos de Apex en Lightning Web Component (LWC). Esto se puede realizar importando el método y llamarlo con el Decorator Wire o de forma imperativa.

¿Cómo Importar un Método de Apex en LWC?

Podemos importar métodos de clases de Apex en Lightning Web Component (LWC) usando la forma de importación en ES6 (ECMAScript v6). Esta forma de importar es de la siguiente manera:

import apexMethodName from '@salesforce/apex/Namespace.Classname.apexMethodReference';

apexMethodName: Símbolo para identificar el método de Apex.
apexMethodReference: Nombre del método de Apex que vamos a importar.
Classname: Nombre de la clase de Apex en Salesforce.
Namespace: Si la clase de Apex está en el mismo espacio de nombres que el componente, no especifique un Namespace. Si la clase está en un managed package, especifique el espacio de nombres de dicho managed package.

¿Cómo Exponer un Método de Apex en LWC?

Para exponer un método de una clase de Apex en Lightning Web Component, el método debe ser estático y también global o público. Además, debemos agregarle la anotación @AuraEnabled.

En el siguiente ejemplo exponemos un método llamado getContactList en Lightning Web Component, el cual retorna una lista de Contactos.

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        return [
            SELECT Id, Name, Title, Phone, Email, Picture__c
            FROM Contact
            WHERE Picture__c != null
            WITH SECURITY_ENFORCED
            LIMIT 10
        ];
    }
}

¿Cómo Llamar un Método de Apex con Wire?

Para leer datos de Salesforce, Lightning Web Component puede usar el servicio reactivo Wire. Se usa el decorator Wire para llamar a un método de Apex.

En el siguiente ejemplo, llamamos a un método de Apex usando el decorator Wire.

import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class ApexWireMethodToProperty extends LightningElement {
    @wire(getContactList) contacts;
}

¿Cómo Llamar un Método de Apex Imperativamente?

En el siguiente ejemplo, llamamos a un método de Apex, que retorna una lista de Contactos, de forma imperativa. La función importada devuelve una promesa.

import { LightningElement, track } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class ApexImperativeMethod extends LightningElement {
    @track contacts;
    @track error;

    handleLoad() {
        getContactList()
            .then(result => {
                this.contacts = result;
            })
            .catch(error => {
                this.error = error;
            });
    }
}

<template>
    <div>
        <div class="slds-m-around_medium">
            <p class="slds-m-bottom_small">
                <lightning-button label="Load Contacts" onclick={handleLoad}></lightning-button>
            </p>
            <template if:true={contacts}>
                <template for:each={contacts} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>
            <template if:true={error}>
                <c-error-panel errors={error}></c-error-panel>
            </template>
        </div>
    </div>
</template>