Wire decorator in LWC

 The @wire decorator in Lightning Web Components (LWC) is used to establish a connection between a component and its data source, typically an Apex controller method, an imperative Apex method, or a UI API resource. It's a powerful tool for handling data retrieval and synchronization in LWC.

Here's a breakdown of how the @wire decorator works and its key features:

Declaration: The @wire decorator is declared at the top of the JavaScript class file of an LWC component.

Syntax: The syntax for using @wire decorator is:   

@wire(wireAdapter, wireAdapterParams)
wiredProperty;

  • wireAdapter: The wire adapter specifies the Apex method or UI API resource to call. It can be any valid wire adapter like getRecord, getList, invokeApex, etc.
  • wireAdapterParams: Parameters passed to the wire adapter method, such as recordId, objectApiName, etc.
  • wiredProperty: The property in the JavaScript class where the result of the wire adapter call will be stored.

Here are the different ways to use the @wire decorator:

Standard Wire Adapters: These are provided by the LWC framework and Salesforce APIs. They include:

    @wire(getRecord, { recordId: '$recordId', fields: ['Account.Name'] }) - Retrieves a record by its ID.
    @wire(getObjectInfo, { objectApiName: 'Account' }) - Retrieves metadata about an object.
    @wire(getList, { listViewId: '$listViewId', pageSize: 10 }) - Retrieves a list of records based on a list view ID.
Custom Apex Methods: You can use custom Apex methods as data sources. For example:

@wire(getAccounts) - Calls a custom Apex method named getAccounts to retrieve data.
Dynamic Parameters: You can pass dynamic parameters to the wire adapter by using JavaScript functions or reactive properties. For example:

@wire(getRecord, { recordId: '$dynamicRecordId', fields: ['Account.Name'] }) - Uses a reactive property dynamicRecordId to dynamically change the record ID.
@wire(getList, { objectApiName: '$objectApiName', pageSize: 10 }) - Uses a reactive property objectApiName to dynamically change the object API name.

Chaining Wire Adapters: You can chain multiple wire adapters together to handle complex data requirements. For example:
@wire(getAccounts)
wiredAccounts({ error, data }) {
    if (data) {
        // Process data
    } else if (error) {
        // Handle error
    }
}

Imperative Calls: You can use the @wire decorator for imperative Apex calls using the invoke function from the @salesforce/apex module. For example:
@wire(getAccounts, { searchTerm: '$searchTerm' })
wiredAccounts(result) {
    if (result.data) {
        // Process data
    } else if (result.error) {
        // Handle error
    }
}

Combining with JavaScript Functions: You can use JavaScript functions to transform or filter data retrieved by the wire adapter. For example:
@wire(getAccounts)
wiredAccounts({ error, data }) {
    if (data) {
        this.filteredAccounts = data.filter(account => account.Type === 'Customer');
    } else if (error) {
        // Handle error
    }
}


Error Handling: @wire provides built-in error handling. If the wire adapter encounters an error, the error is propagated to the component and can be accessed via the error property of the result.

Here's a simple example demonstrating the usage of @wire decorator:
import { LightningElement, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

export default class WireExample extends LightningElement {
    @wire(getRecord, { recordId: '001XXXXXXXXXXXXXXX', fields: ['Account.Name'] })
    wiredAccount;

    get accountName() {
        return this.wiredAccount.data ? this.wiredAccount.data.fields.Name.value : '';
    }

    get error() {
        return this.wiredAccount.error ? `Error retrieving account: ${this.wiredAccount.error}` : '';
    }
}
In this example, the @wire decorator is used to call the getRecord wire adapter to retrieve an Account record with the specified recordId and fields. The result is stored in the wiredAccount property, which can be accessed in the template using data binding. Error handling is also provided through the error property.

This is just a basic overview of the @wire decorator. There's a lot more you can do with it, such as caching data, specifying dynamic parameters, and handling more complex data structures.

Comments

Post a Comment

Popular posts from this blog

Implicit objects in Django template

In this article we will discuss about implicit objects in Django templates.  In Django templates, there are several implicit objects that are available for use without needing to pass them explicitly from the view. These implicit objects provide access to various context-related information, settings, and functionalities within the template. The most commonly used implicit objects are: {{ request }} : Represents the HttpRequest object that holds information about the current request, including request data, headers, user session, and more. request.GET : A dictionary containing GET parameters sent with the request. request.POST : A dictionary containing POST parameters sent with the request. request.method : The HTTP method used for the request (e.g., "GET", "POST"). request.path : The URL path of the request. request.user : The User object representing the currently authenticated user. request.session : The user's session data.   {{ user }} : P...
Read more

What are non field errors in django forms

In Django forms (including ModelForm), non_field_errors are errors that are not associated with any specific form field but are relevant to the form as a whole. These errors occur during form validation and represent issues that apply to the form's data globally rather than to individual fields. non_field_errors are typically used when you need to validate data across multiple fields or when certain conditions must be met across the entire form. For example, you might want to ensure that the form data adheres to some business rules that involve multiple fields or perform checks that require the context of the entire form. Example: Login form if username and password is incorrect then we raise ValidationError that Username or Password is incorrect. This is not related to any field. We have to say that login credentials are incorrect. You can add non_field_errors to a form by raising a ValidationError with the NON_FIELD_ERRORS key. The NON_FIELD_ERRORS key is a special const...
Read more

Token Authentication in Django rest framework : Using Curl commands

 Create a django-project # Install django and rest_framework pip install django pip install djangorestframework django-admin startprorject token_auth Create a django application # Create an app python manage.py startapp myapi Mention in setting.py # Mention apps in setting.py INSTALLED_APPS = [ '.....', '.....', 'rest_framework', 'rest_framework.authtoken', 'myapi, ] Set Token Authentication Globally (for all views) # Set globally TokenAuthentication in - setting.py REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': [ 'rest_framework.authentication.TokenAuthentication', 'rest_framework.authentication.BasicAuthentication', # Optional ] } Create a Model # Create a model - models.py from django.db import models from django.contrib.auth.models import User class Blog(models.Model): user = models.ForeignKey(User, on_de...
Read more