LWC: Share @wire between two components

Question

What would be the best way to share @wire between two lightning web components?

I went through this article but I figured that @wire is not going to work outside of a LWC. At least I couldn't trigger the method.

In this case would it make sense to make a new "helper" LWC just so that it can perform the wire work. Then load that "helper" LWC in my other 2 components and pass the data from @wire to them?

Answer 1

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>

1. You should download and save pubsub module from HERE

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

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

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

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

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

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