@wire Possibilities In Lightning Web Component ( LWC) Salesforce
@wire Possibilities IN LWC
In this EPISODE we are going to discuss what are the possibilities with mysterious @wire property in salesforce lightning web component (LWC).
With the help of this, we will also understand how wire can help us to develop lightning web components.
So let's....get....started...
What Exactly @wire In LWC ?
Salesforce lightning web components can import methods from Apex classes. The imported methods are functions that the component can call either via @wire or imperatively. Today we will discuss @wire adaptor.
@wire property is useful when you want to consume the data or an error.
In salesforce lightning web component @wire can be used :
- To a property
- As a function
Let's understand the usage of @wire with the help of the following example to understand @wire.
Wire a property :
Here, the wire service either provides you with the list of account to the wiredAccounts.data property, or returns an error to the wiredAccounts.error property.
//below code will wire list of Account data
@wire(getAccounts) wiredAccounts;
Wire a function :
Wire a function if you want to operate on the returned data.
If a function is decorated with @wire, the results are returned in an object with a data property or an error property.
@track lstaccounts;
@track error;
//below code will be used as a function
@wire(getAccounts) wiredAccounts ({ error, data }) {
@wire(getAccounts) wiredAccounts ({ error, data }) {
if (data) {
this.lstaccounts = data;
} else if (error) {
this.error = error;
}
}
Wire with dynamic Parameters :
- A parameter with $ to indicate that it’s dynamic and reactive.
- It refers to a property of the component instance.
- If its value changes, the template rerenders.
@track strName;
//using @wire with dynamic parameters
//using @wire with dynamic parameters
@wire(getFilteredAccounts,{strName: ‘$strName’}) wiredAccounts ({ error, data }) {
if (data) {
this.lstaccounts = data;
} else if (error) {
this.error = error;
}
}
Wire to refresh :
It can also be used in a scenario where you need to refresh your data on an action
afterUpdate(){
getUpdatedAccounts({param1: this.param1})
.then(result => {
//below code will be use to refresh the wiredAccounts
refreshApex(this.wiredAccounts);
refreshApex(this.wiredAccounts);
}).catch(error => {
this.error = error;
});
}
Reuse apex calls without @wire :
- @wire accepts defined adapters.
- If you wish to reuse the apex calling we can do it using connected callbacks.
- Connected callbacks are called when the element is inserted into the DOM.
- It is generally used when we want our code to run only one time, to prevent it from running twice.
- For example: when you hit the save button multiple times then your record will get saved multiple time because your code will run multiple times.
In that case, you need to use the following snippet syntax :
//below code will be used to reuse apex calls without wire
connectedCallback() {
connectedCallback() {
this.applyFilter();
}
applyFilter(){
getFilteredAccounts({strName: this.strName}).then(result => {
this.lstaccounts = result;
}).catch(error => {
this.error = error;
});
}
Few things to keep in mind :
- To use apex methods via @wire, you must annotate it with cacheable=true.
- Assess your use case properly before deciding to use @wire
- Check if, Base Lightning component, like lightning-record-form, lightning-record-view-form, or lightning-record-edit-form can be used
- If not, check for @wire Adapters and functions
- If both the above don’t serve the purpose, you can write apex code - @wire is a reactive service. When the wire service provisions data, the component re-renders. if you want it to be fired on-demand, then it's better to go with the imperative approach.
Wire Adapters are beyond the apex. Here are few lightning/ui*Api Wire Adapters and Functions to work with Salesforce data and metadata references :
getListUi(Beta) - to get the records and metadata for a list view
getObjectInfo - to get metadata about a specific object which includes metadata describing fields, child relationships, record type, and theme
getPicklistValues - to get the picklist values for a specified field
getRecord - to get a record’s data
createRecord - Creates a record
And few others, in detail https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_ui_api
Coool !! I hope now you have more possibilities with @wire in salesforce lightning web components.
WOHOOO !! YOU HAVE JUST COMPLETED @WIRE POSSIBILITIES IN SALESFORCE LIGHTNING WEB COMPONENT EPISODE
If you like this salesforcekid learning platform please let me know in the Comment section...Also, Share with your salesforce folks wish you all
Happy Learning ☁️⚡️ (Learn. Help. Share.) 😊
<< PREVIOUS NEXT >>
@wire Possibilities In Lightning Web Component ( LWC) Salesforce
Reviewed by
on
Rating:
Reviewed by
on
Rating:
No comments:
HELP !! SHARE !! SUGGEST !!