Wire Service in Lightning web component

There are different ways to work with data in lwc. One of the easiest way to access Salesforce data is by wire service.

Lightning web components use a reactive wire service to provision a stream of immutable data. We call the wire service as reactive 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.

Salesforce has clear documentation on wire service and its usage. I strongly recommened to go through this link to know in detail.

How to use wire service in lwc ?

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

• 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. 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 adapterConfig object can’t be undefined. If a property is undefined, the wire service doesn’t provision data. Don’t update a wire adapter configuration object property in renderedCallback() as it can result in an infinite loop.
• 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.

wire service uses wire adapaters to access salesforce data. These wire adapaters can be from lightning/ui*Api module (which Lightning data service internally use) or custom apex methods.

How to get the data without apex class in lwc ?

To get the data from an object without an apex class, we need to leverage the concept called – Lightning Data Service. The concept and usage of LDS is same as we used in Aura components except the sytanx and additional features.

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';

export default class Record extends LightningElement {
    @api recordId;

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

<template>
    <template if:true={account.data}>
        Record Details: {account.data.fields.Name.value}
    </template>
</template>

In this example, we are using getRecord adapter from uiRecordApi module to get the data from an object with recordId.
– recordId is a public reactive property, the value of the current record is auto populated when it is used in lightning record page or mobile app. [Click here for more details]

To receive the data we use either a property or function which is decorated with wire, in this example we are using a property in wire service. This property is assigned to default value, that is an object with data and error properties of undefined.

{account : {data : undefined, error: undefined}}

If it is able to find the record then it sets the data into data property of account object, else it sets the error message in error property of wired object (account, in this example).

Output:

We also have the ability to receive the provisioned data using a function. Lets see how to do this:

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';

export default class Record extends LightningElement {
    @api recordId;
    account;
    error;

    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    wiredAccount({data, error}){
        if(data){
            this.account = data;
            this.error = undefined;
        }else if(error){
            this.account = undefined;
            this.error = error;
        }
    }
}

<template>
    
    <template if:true={account.data}>
        Record Details: {account.fields.Name.value}
    </template>
    
</template>

This second example also does the same i.e. displaying account name.

The only differnece between two snippets is the way of receiving data. In the first example, we used an object property to receive the data where as in second example, we decorated a function with @wire to receive the data.

When to use what?

If we want to do post processing of data that is received from server then we use a function
else we use a property, which is an object with data and error properties of undefined.

One simple example is, if we want to concatenate two fields from the record data in component, then we need a place to write that logic. So in this case, the function should be used to receive the data. If we do not have any post processing then we can use a property object to use the raw data.
Note: It would be easier to use getter methods to do post processing on a single record, but if we receive list of records then function would be useful and for me that is the only easy way.

This is an overall brief on accessing a record using LDS adapater with wire service. We are not just limited to this one, we have a bunch of other out of the box LDS adapaters to access salesforce data, metadata and to call apex methods.

Summary:
To work with salesforce data in lwc, we use one of the easiest ways i.e. reactive wire service. We need to decorate a property or function with @wire by passing imported adapter identifer and other required properties as parameters.

In the next post, we will discuss about how to invoke an apex class from lightning web component using wire service.

Resources:

Salesfoce Official documentation