Call apex from LWC using Wire property, wire function and Call a method imperatively

We can call Apex from LWC by three ways:

 1.Wire a property 2.Wire a function 3. Call a method imperatively

Call Apex from LWC 

In Aura Components you need to export apex method in apex class using @AuraEnabled annotation. In Lightning web component, you need to export as well as import apex method.

Syntax of import method ->

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

Now to call apex from LWC, first you need to export a method. exporting is similar to Aura Components. Method should be public/global and static and annotated with @AuraEnabled.

e.g.

public class demo
{
@AuraEnabled(cacheable=true)
	public static void callApex()
	{
		System.debug('Method called');
	}
}

Imported methods can be called using three ways:

1. Wire a property

2. Wire a function

3. Call a method imperatively

1. Wire a property:

if an method is annotated with @AuraEnabled(cacheable=true), you can invoke method from js file in LWC.

@wire(apexMethod, { apexMethodParams })
propertyOrFunction;

e.g.

// apexWireMethodToProperty.js
import { LightningElement, wire } from 'lwc';
import callApex from '@salesforce/apex/demo.callApex ';

export default class ApexWireMethodToProperty extends LightningElement {
    @wire(callApex ) apexMethod;
}

2. Wire a function:

// ContactController.cls
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 LIMIT 10];
    }
}

In this example, the wire service return the result to wireContacts() function by two objects error and data. If there is any error in calling apex method, error object will have something and will not be null. otherwise 'data' object contain the value returned by apex method. This is why in this example, there are two block inside wiredContacts method. one, where it is executing properly and data is returned and other one where error is returned by apex method.

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

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

    @wire(getContactList)
    wiredContacts({ error, data }) {
        if (data) {
            this.contacts = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.contacts = undefined;
        }
    }
}

This code is also available at LWC documentation.

3. Call a method imperatively:

If you want to call an apex method which is not annotated by cacheable=true, you can still call it imperatively.

// apexImperativeMethod.js
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;
            });
    }
}

Import objects and fields:

// apexStaticSchema.js
import { LightningElement, wire } from 'lwc';
import { getSObjectValue } from '@salesforce/apex';
import getSingleContact from '@salesforce/apex/ContactController.getSingleContact';

import NAME_FIELD from '@salesforce/schema/Contact.Name';
import TITLE_FIELD from '@salesforce/schema/Contact.Title';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';

export default class ApexStaticSchema extends LightningElement {
    @wire(getSingleContact) contact;

    get name() {
        return this.contact.data ? getSObjectValue(this.contact.data, NAME_FIELD) : '';
    }
    get title() {
        return this.contact.data ? getSObjectValue(this.contact.data, TITLE_FIELD) : '';
    }
    get email() {
        return this.contact.data ? getSObjectValue(this.contact.data, EMAIL_FIELD) : '';
    }
}

Here we are importing contacts Name, Title and Email field and using this name field to extract field value using Lightning Data services. Refresh the Cache for a Wired Property: When you required to clear cache and loads latest data, then use this functionality. To query the server for updated data and refresh the cache, import and call the refreshApex(wiredProperty) function.                                import { refreshApex } from '@salesforce/apex'; refreshApex(wiredProperty)

Reference: https://www.sfdcblogs.com/post/call-apex-from-lwc