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

    4.0.0Β β€’Β PublicΒ β€’Β Published

    @apollo-elements/gluon

    Published on npm Published on webcomponents.org ISC License Release

    πŸš€ GluonElement base classes that connect to your Apollo cache 🌜

    πŸ‘©β€πŸš€ We choose to Use the Platform not because it is easy, but because it is awesome πŸ‘¨β€πŸš€

    Gluon is a simple, unopinionated UI library which uses lit-html for templating without piling on property observation or lifecycle cruft. Check out the gluon repository or this introductory blog post

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

    πŸ““ Contents

    πŸ”§ Installation

    Apollo Gluon elements are 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/gluon

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

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

    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.

    Typical usage involves importing the base class and extending from it to define your component:

    Queries

    query ParentQuery {
      helloWorld {
        name
        greeting
      }
    }
    Imports
    import { ApolloQuery, html } from '@apollo-elements/gluon';
    import ParentQuery from './Parent.query.graphql';
    class ConnectedElement extends ApolloQuery {
      get template() {
        return (
            this.loading ? html`
              <what-spin></what-spin>`
          : this.error ? html`
              <h1>😒 Such Sad, Very Error! 😰</h1>
              <div>${this.error?.message ?? 'Unknown Error'}</div>`
          : html`
              <div>${this.data?.helloWorld?.greeting}, ${this.data?.helloWorld?.name}</div>
              <connected-child id="child-component"></connected-child>`
        );
       }
    
       constructor() {
         super();
         this.query = query;
       }
    };
    
    customElements.define('connected-element', ConnectedElement)

    Mutations

    Imports
    import { ApolloMutation, html } from '@apollo-elements/gluon';
    import InputMutation from './Input.mutation.graphql';
    class MutationElement extends ApolloMutation {
      mutation = InputMutation;
    
      get template() {
        return html`<input @keyup="${this.onInput}"/>`;
      }
    
      onInput({ target: { value: input }, key }) {
        this.variables = { input };
        if (key === 'Enter') return this.mutate();
      }
    };
    
    customElements.define('input-mutation', MutationElement)

    πŸ“š 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/gluon

    DownloadsWeekly Downloads

    16

    Version

    4.0.0

    License

    ISC

    Unpacked Size

    66.2 kB

    Total Files

    28

    Last publish

    Collaborators

    • bennyp