Apollo Elements Guides API Blog

Web Component Libraries: Gluon

Gluon is a minimalist web components base class that templates components with lit-html.

Installation

npm i -S @apollo-elements/gluon
yarn add @apollo-elements/gluon
pnpm add @apollo-elements/gluon

Import ApolloQuery, ApolloMutation, or ApolloSubscription to define your components.

import { ApolloQuery, html } from '@apollo-elements/gluon';

import HelloQuery from './Hello.query.graphql';

class HelloQueryElement extends ApolloQuery<typeof HelloQuery> {
  query = HelloQuery;

  #data = null;
  set data(data) { this.#data = data; this.render(); }
  get data() { return this.#data; }

  get template() {
    const greeting = this.data?.hello?.greeting ?? 'hello';
    const name = this.data?.hello?.name ?? 'world';
    return html`
      <span id="hello">
        ${greeting}, ${name}!
      </span>
    `;
  }
}

customElements.define('hello-query', HelloQueryElement);

Exports