Wire service :-

  1.   1.Wire service is built  on the Lightning Data Service,
  2.   2.@Wire is a reactive  service,
  3.   3.Components use @wire in their JavaScript class to read data from one of the wire adapters in               the lightning/ui*Api namespace.
  4. 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.

  5.  To improve performance Lightning Data Service maintains a client-side cache of record date that   has  been loaded by wire adapter.

                     
    Wire Service

  
   Wire service  syntax:- 

          import {LightningElement ,wire} from 'lwc';
              import { adapterId }from 'adapterModule' ;  
                       @wire (adapterId, adapterConfig)
                                   property or Function ;




                                       
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.

     property - use property if you want to render the data directly  on the template ,
     function - use function if you want to do customization of data before  rendering data on template .

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

Decorate a Property with @wire

Wiring a property is useful when you want to consume the data or error as-is.

If the property decorated with @wire is used as an attribute in the template and its value changes, the wire service provisions the data and triggers the component to rerender. The property is private, but reactive.

Syntax:-

              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]})
              record ;
}    
              The property is assigned a default value after component construction and before any other lifecycle event. The default value is an object with data and error properties of undefined. Therefore, you can access the property’s value in any function, including functions used by the template or used as part of the component’s lifecycle.

The object supplied to the property (in this example, record) has this shape.

         data (Any type)—The value supplied by the adapter.
          error (Error)—An error if the adapter wasn’t able to supply the requested data or if the adapter wasn’t found. Otherwise, this property is undefined.
     When data becomes available from the wire adapter, it’s set in the data property (error remains undefined). When newer versions of the data are available, data is updated.

    If an error occurs in the adapter, for example when retrieving the data, error is populated with an error object (data is set to undefined).



     

Decorate a function with @wire:_
  1. Wiring  a function is useful to perform logic whenever  new data is provided or when an error occurs .
  2. This function is invoke when value is available  which can be before or after the component  is connected or rendered.                         
         Ex:

     import { LightningElement , track ,wire, api }from 'lwc';
      import { getRecord } from 'lightning/uiRecordApi';
   export  default class  wirefunction  extends  LightningElement {

               @track record ;

     @wire ( getRecord ) wiredAccount({ data , error }){
                                     if(data) {
                                        this.record = data;
                                         this.error= undefined;
                                           }
                                            else if(error)  {
                                             this.error =error;
                                              this.record= undefined;
                                                 }
                                              }
                                           }


Comments

Popular posts from this blog

Security model

EVENTS IN Lightning Web Components

Lightning web Components.