Lightning web components Wire Service

Let’s discuss here how to use the wire service to get the Salesforce data from the server to lightning web components. You can use the Lightning data service or apex class to get the data from server and wire service is also one of the ways. To read Salesforce data, Lightning web components use a reactive wire service, which is built on Lightning Data Service. Components use @wire in their JavaScript class to read data from one of the wire adapters in the lightning/ui*Api namespace. The wire service provisions an immutable stream of data to the component. Each value in the stream is a newer version of the value that precedes it. when we call the wire service reactive in part because it supports reactive variables, which are prefixed with $. If a reactive variable changes, the wire service provisions new data. We say “provisions” instead of “requests” or “fetches” because if the data exists in the client cache, a network request may not be involved.

The wire service delegates control flow to the Lightning Web Components engine. Delegating control is great for reading operations, but it isn’t great for creating, update, and delete operations. As a developer, you want complete control over operations that change data. That’s why you perform create, update, and delete operations with a JavaScript API instead of with the wire service.

Wire Service Syntax

Import a wire adapter using named export syntax. Decorate a property or function with @wire and specify the wire adapter. Each wire adapter defines a data type.

import { adapterId } from 'adapterModule';
@wire(adapterId, adapterConfig)

adapterId (Identifier)—The identifier of the wire adapter.
adapterModule (String)—The identifier of the module that contains the wire adapter function, in the format namespace/moduleName. Take another look at the format! To import a module in JavaScript, use lightning/ui*Api instead of lightning-ui-*-api.
adapterConfig (Object)A configuration object specific to the wire adapter. Configuration object property values can be either strings or references to objects and fields imported from @salesforce/schema. Properties in the adapter config object can’t be undefined. If a property is undefined, the wire service doesn’t provision data.
propertyOrFunction—A private property or function that receives the stream of data from the wire service. If a property is decorated with @wire, the results are returned to the property’s data property or error property. If a function is decorated with @wire, the results are returned in an object with a data property and an error property. Now your code is like below if you convert the wire syntax.

import wire namespace into the JavaScript controller as shown below.

import { LightningElement, api, wire } from 'lwc';

import getRecord from the lightning/uiRecordApi from lightning/ui*Api Wire Adapters and Functions.

import { getRecord } from 'lightning/uiRecordApi';

Now call the @wire function to get the record data.

 @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })

Create Lightning web components

create a lightning component in scratch org using the below sfdx command.

sfdx force:lightning:component:create --type lwc -n LWCWireExample -d force-app/main/default/lwc

Here is the LWCWireExample.html code.

        <lightning-card title="Contact Information" icon-name="standard:contact">
            <template if:true={}>
                <div class="slds-m-around_medium">
                    <p><lightning-formatted-phone value={phone}></lightning-formatted-phone></p>
                    <p><lightning-formatted-email value={email}></lightning-formatted-email></p>

Here is the LWCWireExample.js code.

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

const fields = [

export default class LWCWireExample extends LightningElement {
    @api recordId;

    @wire(getRecord, { recordId: '$recordId', fields })

    get name() {

    get title() {

    get phone() {

    get email() {

Here is the LWCWireExample.js-meta.xml markup code.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="" fqn="hello">

Push Source to the Scratch Org

Now push the changes to the scratch org by using this SFDX command.

sfdx force:source:push

Open Scratch Org by using this SFDX command.

Add this component to the record page and you can able to see the contact data as shown below.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s