LWC – Constructor and Wire Adapter Usage

constructorlightning-experiencelightning-web-componentslwc-domlwc-wire-adapter

Already wire adapter was there in LWC i.e. @wire annotation to display the records,so can we do the same thing (display the records) through LWC constructor also?
If yes, then why @wire feature was introduced in LWC??

Best Answer

You can't call out to the server in the constructor() or connectedCallback() synchronously. They will be delayed, as asynchronous calls, until at least the first renderedCallback() cycle. As such, @wire methods provide the same results with less code (potentially just one line of code).

Related Solutions

LWC Wire Adapter – Share @wire Between Two Components

You can use pubsub for sending data across components - whether wire service or any other event.

Below is listener component:

import { LightningElement, api, track, wire } from 'lwc'; import { CurrentPageReference } from 'lightning/navigation'; import { registerListener, unregisterAllListeners } from 'c/pubsub';

export default class Poc extends LightningElement {
    @track myResponse;
    @wire(CurrentPageReference) pageRef;

    connectedCallback() {
        registerListener('wiredResponse', this.getWiredResponse, this);
    }
    disconnectedCallback() {
        unregisterAllListeners(this);
    }
    getWiredResponse(response) {
        this.myResponse = response;
    }
}

HTML:

<template>
    <template if:true={myResponse}>
        <template if:true={myResponse.data}>
            <div> data - {myResponse.data} </div>
        </template>
        <template if:true={myResponse.error}>
            <div>error - {myResponse.error}</div>
        </template>
    </template>
</template>

You should download and save pubsub module from HERE
Register listener on init (connectCallback) and implement the method to which the response has to be passed. Here its getWiredResponse in which the response from wire service is assigned to myResponse.
Also unregister in disconnected callback.

Firing component:

JS:

import { LightningElement, track, wire } from 'lwc';
import check from '@salesforce/apex/poc.check';
import { CurrentPageReference } from 'lightning/navigation';
import { fireEvent } from 'c/pubsub';

export default class PocTable extends LightningElement {
    @wire(CurrentPageReference) pageRef;

    @track checkResp;

    @wire(check)
    getcheckResp(result) {
        this.checkResp = result;
        console.log('poc table wire => ', JSON.stringify(this.checkResp));
        fireEvent(this.pageRef, 'wiredResponse', this.checkResp);
    }
}

HTML:

<template>
    <template if:true={checkResp.data}>
        <div> checkResp data - {checkResp.data} </div>
    </template>
    <template if:true={checkResp.error}>
        <div> checkResp error - {checkResp.error}</div>
    </template>
</template>

In this you will need fireEvent import and you can fire the event whenever necessary. In this case inside wire service.

In both listener and firing component should have CurrentPageReference.

@wire(CurrentPageReference) pageRef;

IMPORTANT:

When Wire service is implemented on any standard methods like getRecord, it uses Lighning data service, so you dont need any custom functionality to optimise code here.
When wire service is used to invoke apex methods, we should be using Cacheable=true on methods mandatorily. So, even if you use wire service on same method in multiple components, the apex method will return the response only once and the wire service will share the same data resource from client cache. So, it is not really logical/needed to handle the optimisation. If 1 wire output is the input for another wire service in another component, then it makes more sense to implement the same wire service in target component. pubsub is application event and so it should not really be used in this case.
Component extension will not work on wire service. This is because wire service is already optimised and LWC does not really need it that way.

Lightning Web Components – LWC Can’t Import Case Owner Name Using Wire Service

Correction in your question:

here is the way to fetch reference/lookup records

You are not really fetching records. You are getting the definitions of fields through imports.

Problem:

It seems there are bugs for importing fields definitions for some fields/objects like in your case Case/Lead Owner Name. Also you cannot import the field definition for Geolocation fields - for example aLocation__longitude__s and aLocation__latitude__s

Solution:

Until we get a fix from salesforce, You can directly use these fields like 'Case.Owner.Name' in wire service as shown in below sample:

import CASE_SUBJECT_FIELD from '@salesforce/schema/Case.Subject';
import CASE_ACCOUNT_FIELD from '@salesforce/schema/Case.Account.Name';
import CASE_CONTACT_FIELD from '@salesforce/schema/Case.Contact.Name';

export default class Poc extends NavigationMixin(LightningElement) {
    @api recordId;

    @wire(getRecord, { recordId: '$recordId', fields: ['Case.Owner.Name', CASE_SUBJECT_FIELD, CASE_ACCOUNT_FIELD, CASE_CONTACT_FIELD] })
    gAcc({ data, error }) {
        console.log('Acc data => ', JSON.stringify(data), JSON.stringify(error), this.recordId);
    }
}

Output:

{
  "apiName": "Case",
  "childRelationships": {

  },
  "fields": {
    "Account": {
      "displayValue": "Edge Communications",
      "value": {
        "apiName": "Account",
        "childRelationships": {

        },
        "fields": {
          "Name": {
            "displayValue": null,
            "value": "Edge Communications"
          }
        },
        "id": "00128000009j45lAAA",
        "lastModifiedById": "00528000001IIBvAAO",
        "lastModifiedDate": "2015-11-16T09:57:33.000Z",
        "recordTypeInfo": null,
        "systemModstamp": "2017-12-11T18:45:20.000Z"
      }
    },
    "Contact": {
      "displayValue": "Rose Gonzalez",
      "value": {
        "apiName": "Contact",
        "childRelationships": {

        },
        "fields": {
          "Name": {
            "displayValue": null,
            "value": "Rose Gonzalez"
          }
        },
        "id": "00328000008ZUISAA4",
        "lastModifiedById": "00528000001IIBvAAO",
        "lastModifiedDate": "2015-11-16T09:57:33.000Z",
        "recordTypeInfo": null,
        "systemModstamp": "2015-11-16T09:57:33.000Z"
      }
    },
    "Owner": {
      "displayValue": "Sasank VS",
      "value": {
        "apiName": "Name",
        "childRelationships": {

        },
        "fields": {
          "Name": {
            "displayValue": null,
            "value": "Sasank VS"
          }
        },
        "id": "00528000001IIBvAAO",
        "lastModifiedById": null,
        "lastModifiedDate": null,
        "recordTypeInfo": null,
        "systemModstamp": null
      }
    },
    "Subject": {
      "displayValue": null,
      "value": "Starting generator after electrical failure"
    }
  },
  "id": "500280000068Gv5AAE",
  "lastModifiedById": "00528000001IIBvAAO",
  "lastModifiedDate": "2015-11-16T09:57:33.000Z",
  "recordTypeInfo": null,
  "systemModstamp": "2015-11-16T09:57:33.000Z"
}

Best Answer

Related Solutions

LWC Wire Adapter – Share @wire Between Two Components

Lightning Web Components – LWC Can’t Import Case Owner Name Using Wire Service

Related Topic