@lwc/wire-service
    TypeScript icon, indicating that this package has built-in type declarations

    2.32.1 • Public • Published

    Wire Service

    This code is the implementation of the Lightning Web Component wire service. The wire service enables declarative binding of data providers called wire adapters to a Lightning web component using the @wire decorator. It fulfills the goals of the data service proposal.

    Summary

    Wire adapters simply provide data. A wire adapter doesn't know anything about the components that it provides data to.

    In a component, declare its data needs by using the @wire decorator to connect (or wire) it to a wire adapter. In this example, the component is wired to the getBook wire adapter. This declarative technique makes component code easy to read and reason about.

    // bookItem.js
    import { LightningElement } from 'lwc';
    
    export default class WireExample extends {
        @api bookId;
    
        @wire(getBook, { id: '$bookId'})
        book;
    }

    Wire adapters are part of LWC's reactivity system. An @wire takes the name of a wire adapter and an optional configuration object, which is specific to the wire adapter. You can use a $ to mark the property of a configuration object as reactive. When a reactive property’s value changes, the wire adapter's update method executes with the new value. When the wire adapter provisions new data, the component rerenders if necessary.

    // wire-adapter.js
    import { bookEndpoint } from './server';
    
    export class getBook {
        connected = false;
        bookId;
    
        constructor(dataCallback) {
            this.dataCallback = dataCallback;
        }
    
        connect() {
            this.connected = true;
            this.provideBookWithId(this.bookId);
        }
    
        disconnect() {
            this.connected = false;
        }
    
        update(config) {
            if (this.bookId !== config.id) {
                this.bookId = config.id;
                this.provideBookWithId(this.bookId);
            }
        }
    
        providBookWithId(id) {
            if (this.connected && this.bookId !== undefined) {
                const book = bookEndpoint.getById(id);
    
                if (book) {
                    this.dataCallback(Object.assign({}, book));
                } else {
                    this.dataCallback(null);
                }
            }
        }
    }

    Syntax

    For complete information about syntax, see lwc.dev/guide/wire_adapter.

    Implementation Example

    The RCast App is a PWA podcast player written with Lightning Web Components.

    https://github.com/pmdartus/rcast

    Keywords

    none

    Install

    npm i @lwc/wire-service

    Homepage

    lwc.dev/

    DownloadsWeekly Downloads

    38,273

    Version

    2.32.1

    License

    MIT

    Unpacked Size

    18.6 kB

    Total Files

    6

    Last publish

    Collaborators

    • divmain
    • lwc-admin
    • caridy
    • tbliss
    • pmdartus
    • ekashida
    • kevinv11n
    • jye-sf
    • rui.qiu
    • ravi.jayaramappa
    • jodarove
    • abdulsattar
    • nolanlawson
    • jmsjtu