Call server side method using Wiring a function in LWC(Lightning web component)

Different ways to access server side controller method from LWC component

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

1- Wire a property- 

    

This is already explained in my previous blog post. Those who want to revise or have not gone through previous post can go through this link .

In this post we are going to discuss how we can access server side controller using -

2- Wire a function-

In this component wires an Apex method call to a function. Because the results are provisioned to a function, the JavaScript can operate on the results. Also, the template accesses the data a bit differently than if results were provisioned to a property.

The rendered component is the same as apexWireMethodToProperty (except for the header).

This component calls the same Apex method as apexWireMethodToProperty. The method must be static, and global or public. The method must be decorated with @AuraEnabled(cacheable=true).

Let’s use the same example which I used in my previous blog that is displaying the contacts name getting from server side method of controller class.

LWCWireMethodToFunction.html

<template>

    <lightning-card

        title="LWCWireMethodToFunction"

        icon-name="custom:custom63">

    

        <div class="slds-m-around_medium">

            <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>

    </lightning-card>

</template>

The template uses the if:true directive to check for the JavaScript contacts property. If it exists, it iterates over it and renders the name of each contact. If the error property exists, the component renders <c-error-panel>.

LWCWireMethodToFunction.js

import { LightningElement, wire } from 'lwc';

import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class LWCWireMethodToFunction extends LightningElement {

    contacts;

    error;

    @wire(getContactList)

    wiredContacts({ error, data }) {

        if (data) {

            this.contacts = data;

            this.error = undefined;

        } else if (error) {

            this.error = error;

            this.contacts = undefined;

        }

    }

}

The component’s JavaScript code imports the Apex method and invokes it via the wire service. The wire service provisions the results to the wiredContacts() function via an object with either an error or data property. If the wire service provisions data, it’s assigned to this.contacts, which is used in the template. If it provisions error, it’s assigned to this.error, which is also used in the template. If the value of these properties change, the template rerenders.

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

            WITH SECURITY_ENFORCED

            LIMIT 10

        ];

    }

}

O/p-

              LWCWireMethodToFunction

                Amy Taylor

                Michael Jones

                Jennifer Wu

                Anup Gupta

                Caroline Kingsl

Thanks for reading and happy learning😃.

Stay tuned for next Post- calling server side method imperatively.

CS- LWC Recipe