Dynamic Parameters in Wired Apex Methods - Lightning Web Components

on

Wire Apex Methods to Lightning Web Components

To read Salesforce data, Lightning web components use a reactive wire service. Use @wire in a component’s JavaScript class to specify an Apex method. You can @wire a property or a function to receive the data. To operate on the returned data, @wire a function.

Use this syntax to import an Apex method and wire it to a component. 

    import apexMethodName from '@salesforce/apex/namespace.classname.apexMethodReference';
    @wire(apexMethodName, { apexMethodParams })
    propertyOrFunction;

More details on how to use @wire to import an APEX Method can be found here.


Wire an Apex Method with a Dynamic Parameter

Do watch out the video for more details on user case and how to implement using LWC and APEX. 

We will see the dynamic parameters in action in following ways

  1. Searching with dynamic input: Think of a use case when we need to search for the contacts in the system based on the search key you type in and display those contact records in a data table. Following code snippet explains we can achieve this. 
        searchKey = "";
    @wire(findContacts, { searchKey: "$searchKey" })
    contacts;

    handleKeyChange(event) {
        window.clearTimeout(this.delayTimeout);
        const searchKey = event.target.value;
        this.delayTimeout = setTimeout(() => {
        this.searchKey = searchKey;
        }, DELAY);
    }
  2. Searching with a text string with dynamic value: Think of a use case when we need to search for the contacts in the system based on Account ID and display those contact records in a data table view format. Following code snippet explains we can achieve this. See how we can use the setter property to pass the dynamic whereClause to the apex method getContacts. 
        @api
    get recordId() {
        return this._recordId;
    }   
    set recordId(value) {
        this._recordId = value; 
        this._whereClause = 'AccountId = \'' + value + '\'';
        let test = `${value}`;
        console.log(test);
    }
    _recordId;
    _whereClause;

    @wire(getContacts, { whereClause: '$_whereClause' })
    wiredContacts({ data, error }) {
        if (data) {
            console.log('data : ' + JSON.stringify(data));
        } else if (error) {
            console.log('error : ' + JSON.stringify(error));
        }
    }

Wire an Apex Method with a Complex Parameters

    Do watch out the video for more details on user case and how to implement using LWC and APEX.  

    This example demonstrates how to call an Apex method that takes an object as a parameter. The @wire syntax is the same for any Apex method, but this example shows a pattern for building and passing an object. 

    Recipe Details 

    Download the complete code for both the use cases defined above.

    Demo:

    References:

    Comments

    Post a Comment