9. Fetching Cars with Apex

[rodriggj]

[rodriggj]

1. Go to View / Command Palette / SFDX: Create Apex Class
2. Provide the name of the file as CarController, hit Enter
3. Leave the file location as default and hit Enter
4. You should see 2 files created under a folder called CarController
   • CarController.cls
   • CarController.cls-meta.xml

CORRECTION: The picture is incorrect with the naming ... it utilizes a carController vs. a CarController naming convention. Please use the CarController style.

[rodriggj]

1. Open the CarController.cls file and enter the following code. The code is simply implementing a public static method, which means it can be invoked without creating an instance of the CarController class. And what it will do is execute a SOQL query to the Salesforce database to retrieve the specified fields from the Car__c Object.

public with sharing class CarController {
    public static List<Car__c> getCars(){
        return [SELECT Id, Name, MSRP__c, Description__c, Category__c, Picture_URL__c FROM Car__c];
    }
}

2. To make this query available to our Aura Component where we will use the filters to modify this SOQL query, we need to annotate the method with the following code:

public with sharing class CarController {
    @AuraEnabled(Cacheable=true)
    public static List<Car__c> getCars(){
        return [SELECT Id, Name, MSRP__c, Description__c, Category__c, Picture_URL__c FROM Car__c];
    }
}

3. Deploy to your DevOrg by right-clicking on classes directory and selecting SFDX: Deploy Source to Org

[rodriggj]

Now we have to use this getCars() method in our carTileList

1. Nav to your lwc / carTileList.js file
2. First, import the getCars() method from the CarController.cls file.
3. Once you import the getCars method, use the @wire adaptor to call the getCars method. Since you are not passing anything you don't have a second argument to the @wire.
4. We will create a function, carsHandler() and pass 2 parameters, data & error -- and we will pass these params to console.log() to view what the data returns (which should be our Cars Objects) if not display an error message.

import { LightningElement, wire } from 'lwc';
import getCars from '@salesforce/apex/CarController.getCars'

export default class CarTileList extends LightningElement {

    @wire(getCars)
    carsHandler({data, error}){
        if(data){
            console.log(data)
        }
        if(error){
            console.error(error)
        }
    }
}

5. Right click on the carTileList folder and deploy the changes to your DevOrg.

   

[rodriggj]

Final step here is to create 2 properties with our carTileList class

• cars
• error

Now we can assign the data response or the error to properties that we can use data binding for and pass to our front-end HTML.

carTileList.js

import { LightningElement, wire } from 'lwc';
import getCars from '@salesforce/apex/CarController.getCars'

export default class CarTileList extends LightningElement {
    cars
    error

    @wire(getCars)
    carsHandler({data, error}){
        if(data){
            console.log(data)
            this.cars = data
        }
        if(error){
            console.error(error)
            this.error = error
        }
    }
}

Deploy changes by right-clicking on parent carTileList directory, and selecting SFDX: Deploy to Source Org