By Krishna in Lighting Web Component — 18 Mar 2021

Wire Apex method to a function using @wire decorator in LWC

Let's look at how to Wire the Apex method to a function using @wire decorator in LWC.

This is the best option when it comes to using @wire decorator, tell you why with this variant we can debug the data that we get back from the Apex method.

It's not that we cannot debug it when we wire an Apex method with a property, but there is a bit of process that's involved to see the output with this approach. We need to use the template file and use <template for:each="" for:item=""></template> to debug the code.

Let me walk you through the sample code.

public with sharing class DatatableController {
    public DatatableController() {

    }
    //it's mandate to use cacheable=true
    @AuraEnabled(cacheable=true)
    public static List<Account> allRecords(){
        return [SELECT Id, Name, Rating FROM Account];
    }
}

DatatableController.cls

And here is the controller file!

import { LightningElement, wire } from "lwc";

import allRecord from "@salesforce/apex/DatatableController.allRecords";

export default class DataTable extends LightningElement {
  @wire(allRecord)
  records({ error, data }) {
    if (data) {
      console.log(data);
    } else {
      console.log(error);
    }
  }
}

datatable.js

Hope this helps!

Subscribe to Salesforce Casts