Call apex from LWC.

We know that we can import modules into the LWC javascript like "import { LightningElement,track,api } from 'lwc';"

Lightning web components can also import methods from Apex classes. The imported methods are functions that the component can call either via @wire or imperatively.

I divided into two categories they are wire and imperative.

Category one :  via wire.

>> We can wire a property to the method which you imported from apex class.

 @wire(getContactList) contacts;

Here we are wiring a function to property contact. Now, this property contains two sets of data. one is data ex:"contacts.data" another one error ex: is "contacts.error".

In the markup, we can access data and error as below.

<template if:true={contacts.data}>
                <template for:each={contacts.data} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>
            <template if:true={contacts.error}>
                <c-error-panel errors={contacts.error}></c-error-panel>
            </template>

>> We can wire a function to the method which you imported from apex class.

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

From the mark up only change is, instead of referring it like {contacts.data}, we need to refer {contacts}.

Example:

                <template for:each={contacts} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>

Category two:  Call an Apex Method Imperatively.

Apex methods that are annotated with cacheable=true are restricted to read-only operations. They perform better, so use cacheable methods when possible. You can access cacheable Apex methods with @wire or call them imperatively. Call a method imperatively when you must control when the invocation occurs (for example, in response to clicking a button, or to delay loading to outside the critical path). When you call a method imperatively, you receive only a single response. Compare this behavior with @wire, which delegates control to the framework and results in a stream of values being provisioned. Whether you use @wire or call a method imperatively, the data is stored in the Lightning Data Service cache.

In the following scenarios, you must call an Apex method imperatively as opposed to using @wire.

To call a method that isn’t annotated with cacheable=true, which includes any method that inserts, updates, or deletes data.
To control when the invocation occurs.
To work with objects that aren’t supported by User Interface API, like Task and Event.

To call a method from an ES6 module that doesn’t extend LightningElement

upon clicking the button below method will get call which in turn call the getContactList. unlike wire mechanism, here we need to use promises like .then and .catch.

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

You don't need to use @wire here.


To pass params you just need to mention params with in the brackets of the method.

getContactList({ amount: this.amount });