wire service in Lightning Web Components(LWC)

This post explains wire service in Lightning web components(lwc)

What is the wire service?

1. Lightning web components(lwc) use reactive wire service to read Salesforce data.
2. It is Built on Lightning Data service.
3. Components use @wire in their JavaScript class to read data from one of the wire adapters in the lightning/ui*Api namespace.

Reactive wire service supports reactive variables, which are prefixed with $. If a reactive variable changes, the wire service provisions(requests) new data.

wire service syntax

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.
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.
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.

Example

 Import references to salesforce Object and fields

1. To import a reference to an object, use this syntax.

import objectName from '@salesforce/schema/object';

Ex:

import PROPERTY_OBJECT from '@salesforce/schema/Property__c';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

2. To import a reference to a field, use this syntax.

import FIELD_NAME from '@salesforce/schema/object.field';

Ex:

import POSITION_LEVEL_FIELD from '@salesforce/schema/Property__c.Name';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';

3. To import a reference to a field via a relationship, use this syntax.

import SPANNING_FIELD_NAME from '@salesforce/schema/object.relationship.field';

Ex:

import ACCOUNT_OWNER_NAME_FIELD from '@salesforce/schema/Account.Owner.Name';

Decorate a Property with @wire

• Wiring a property with @wire is useful when you want to consume the data or error.
• If the property decorated with @wire is used as an attribute in the template and its value changes,
• the wire service provisions(requests) the data and triggers the component to rerender.

Ex:

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

export default class Record extends LightningElement {
    @api recordId;

    @wire(getRecord, { recordId: '$recordId', fields: ['Opportunity.Name'] })
    record;
}

Decorate a Function with @wire

• Wiring a function is useful to perform logic whenever new data is provided or when an error occurs. 
• The function is invoked whenever a value is available, which can be before or after the component is connected or rendered.

Ex:

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

export default class WireFunction extends LightningElement {
    @api recordId;
    @track record;
    @track error;

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

Resource
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.data_wire_service_about

Happy Learning!!!