❀Nefarious Plastic Mannequins

    @apollo-elements/core
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.2Β β€’Β PublicΒ β€’Β Published

    @apollo-elements/core

    Published on npm Published on webcomponents.org ISC License Release

    πŸš€ Reactive GraphQL Controllers 🌜

    πŸ‘©β€πŸš€ Lander to Mission Controll, Come in, Over πŸ‘¨β€πŸš€

    πŸ”Ž Read the Full API Docs πŸ”Ž

    πŸ““ Contents

    πŸ”§ Installation

    Apollo Elements is distributed through npm, the node package manager. To install a copy of the latest version in your project's node_modules directory, install npm on your system then run the following command in your project's root directory:

    npm install --save @apollo-elements/core

    πŸ‘©β€πŸš€ Usage

    See our docs on setting up Apollo client so your components can fetch their data.

    First, let's define our GraphQL query.

    query HelloQuery {
      helloWorld {
        name
        greeting
      }
    }

    Read our docs on working with GraphQL files during development and in production for more info, and be sure to read about generating TypeScript types from GraphQL to enhance your developer experience and reduce bugs.

    Next, we'll define our UI component. Import the controller, query, and types:

    Imports
    import { ApolloQueryController } from '@apollo-elements/core';
    import { LitElement, html } from 'lit';
    import { customElement } from 'lit/decorators.js';
    
    import { HelloQuery } from './Hello.query.graphql';

    Then define your component's template. Make sure to set the query field, so your component starts fetching data automatically.

    @customElement('hello-world')
    export class HelloWorldElement extends LitElement {
      query = new ApolloQueryController(this, HelloQuery);
    
      render() {
        return html`
          <what-spin-such-loader ?active="${this.query.loading}"></what-spin-such-loader>
        ${(
          this.query.error ? html`
            <h1>😒 Such Sad, Much Error! 😰</h1>
            <pre><code>${error.message}</code></pre>`
        : html`
            <p>
              ${this.query.data?.helloWorld.greeting ?? 'Hello'},
              ${this.query.data?.helloWorld.name ?? 'Friend'}!
            </p>`
        )}
        `;
       }
    }

    ❓ FAQs

    Is this package only for Lit users?

    No! You can use these controllers on any object that implements the ReactiveControllerHost interface, even vanilla HTMLElement by way of the ControllerHostMixin

    import { ControllerHostMixin } from '@apollo-elements/mixins/controller-host-mixin';
    import { ApolloQueryController } from '@apollo-elements/core/apollo-query-controller';
    
    customElements.define('hello-world', class HelloWorldElement extends ControllerHostMixin(HTMLElement) {
      query = new ApolloQueryController(this, HelloQuery);
    
      update() {
        const greeting = this.query.data?.helloWorld.greeting ?? 'Hello';
        const name = this.query.data?.helloWorld.name ?? 'Friend';
        // Just for demo purposes, Don't actually use innerHTML!
        this.innerHTML = `<p>${greeting}, ${name}!</p>`;
        super.update();
      }
    });

    πŸ“š Other Libraries

    Looking for other libraries? Want to use Apollo with vanilla extends HTMLElement components? Check out our docs site

    πŸ‘·β€β™‚οΈ Maintainers

    apollo-elements is a community project maintained by Benny Powers.

    Contact me on Codementor

    Install

    npm i @apollo-elements/core

    DownloadsWeekly Downloads

    944

    Version

    2.1.2

    License

    ISC

    Unpacked Size

    779 kB

    Total Files

    76

    Last publish

    Collaborators

    • bennyp