Deep Diving Into Wire Service With Demo – Lightning Web Component
Objective
Learn about Wire Service
Using @Wire with Property and Function
Reactive Configuration Property
In this blog, we will understand the wire service in the deep details. We will have some of the code walkthrough and experiments.
What is Wire Service?
Wire Service is a way to get data from Salesforce using the wire adapters. Let’s check out the following terms that we are going to use while learning about Wire Service.
1. Wire Adapters: Wire adapters are the modules that have function and properties. We call them and they retrieve the data for us. Salesforce provides us the standard wire adapters (lightning/ui*Api).
We can create our own wire adapter using apex.
2. @Wire: This is a decorator that defines that the property or function will get the result as soon as Wire Adapter provision the data.
3. Adapter Module: Adapter Module is the package the contain function or we can say the that this module will have a mechanism to accept the parameter and return the data.
4. Adapter Id: We include the adapter module and give it a name/ID. We use this id/name in the code to work with Adapter Module.
5. Adapter Configuration: These are the parameter that we pass and tell the Adapter Module about what we need.
6. Property/Function: Wire service return the result. Those can be accepted in the two way:
A. Property: The result will be assigned to the property.
Ex:
@wire(getRecord, { recordId: ‘$recordId’, fields: [‘Account.Name’] })
account;
Here account property will have two thing first one is data and second one is the error.
Note: If we are using @Wire with the property then the property becomes the reactive private property. (Same as property defined with @track decorator)
B. Function/Method: This is a callback method and will be called when Wire Adapter returns the results. The function has two parameter data and error.
Ex:
@wire(getRecord, { recordId: ‘$recordId’, fields: [‘Account.Name’] })
wiredAccount({ error, data }) {
//Your Code Goes Here
}
7. Reactive Adapter Configuration Object Property: We pass the Adapter Configuration to the Wire Adapter module. This property will be reactive. We need to use a $ prefix in the property. Whenever the value of the property gets changed the wire service automatically call the wire adapter.
In the below example, $recordId is a reactive property. If something is changed in the recordId then getRecord will be called automatically.
Ex:
recordId;
@wire(getRecord, { recordId: ‘$recordId’, fields })
contact;
What is the matter with Provisions over the Request?
Whenever wire service gets into the action, it Provisions the data instead of requesting or fetching.
It means that if data already exists in the client cache then it does not request to the server. If it does not find the data in client cache then a request will be made using the Wire Adapters.
Enough theory, let’s write some code:
Create three Lightning Web Components
Use these steps to create all three Lightning Web Component.
1. Open Visual Studio Code.
2. Press Command+Shift+P (Mac), Ctrl+Shift+P( Windows)
3. Here type SFDX: Create Lightning Web Component
4. It will ask for the desired directory, Just press enter
5. Give the name to your Lightning Web Component as WireServiceDemo and press enter.
Repeat above steps to create wireservicewithfunction and wireservicewithproperty lightning web component bundle.
Create few of account records in the org and use them to run the code. Here is the explanation of the components that we will be using.
1. WireServiceDemo:
A. Contains the input box to get the input of account id from the user. Clicking the Get Details button will call the fetchAccount function.
B. accountid gets populated and because accountid is decorated with @track. Because of this WireServiceDemo.html template get re-rendered.
C. accountid is passed to wireservicewithfunction and wireservicewithproperty component.
D. This is a parent component and is added on the home page layout.
2. wireservicewithfunction:
A. Is a child component and invoked from the WireServiceDemo parent component.
B. @api accid will take value from parent component and wire service will detect the change and request the data from the server.
C. The returned data will be populated in the accountName using the wiredAccount method. Because accountName is @track property. Now the wireservicewithfunction.html get re-rendered.
3. wireservicewithproperty
A. Is a child component and invoked from the WireServiceDemo parent component.
B. accid will take value from parent component and wire service will detect the change and request the data from the server.
C. The returned data will be populated in the account. It rerenders the component and get website() will have the data.
Notice the behavior:
Copy and paste the account id in the box and click on the Get Details button. Wire Service will provide the data from the server. Now click again on the button, wire service will not be invoked. Add some debugs and check out the console of the browser.
What do I understand?
If something get changed in the $ property from adapter configuration then wire service get invoked. Otherwise, it does not get invoked. (Any improvement/suggestion will be appreciated.)
Copy the code from below gist
Deploy the Code to Scratch Org:
Open Visual Studio Code’s Integrated Terminal.
Type below command and hit the enter.
sfdx force:source:push
Add Lightning Web Component to Lightning Home Layout:
1. Open any app in lightning and go to the home tab.
2. Click on Gear Icon (Top-Right) and then click on Edit Page.
3. Here in the left side, Scroll down to Custom section.
4. Drag WireServiceDemo component to the home layout.
5. Click on Save and Activate.
6. After successful activation. Go back to the Home tab.
Read More from Salesforce Docs:
Use the Wire Service to Get Data
lightning/ui*Api Wire Adapters and Functions
Build a Facebook Timeline App Using Wire Service.
Read more blogs on Lightning Web Components here…