โคNourishing Plushie Monster

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

    4.1.0ย โ€ขย Publicย โ€ขย Published

    @apollo-elements/mixins

    Published on npm Published on webcomponents.org ISC License Release

    ๐Ÿน Moon mixins for cosmic components ๐Ÿ‘ฉโ€๐Ÿš€

    A set of class mixin functions that add Apollo GraphQL goodness to your web component classes.

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

    ๐Ÿ““ Contents

    ๐Ÿ”ง Installation

    Apollo element mixins 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/mixins

    ๐Ÿธ Mixins

    ๐Ÿงฑ ApolloElementMixin

    This is the basic class which all others inherit from. You usually shouldn't need to use this directly.

    โ“ ApolloQueryMixin

    Connects a web component to apollo client and associates it with a specific GraphQL query. When the query's data updates, so will the element's data property.

    With it, you can create vanilla custom elements that render query data, for example:

    Create a template

    const template = document.createElement('template');
          template.innerHTML = `
            <style>
              :host([loading]) span {
                opacity: 0;
              }
    
              span {
                opacity: 1;
                will-change: opacity;
                transition: opacity 0.2s ease-in-out;
              }
            </style>
    
            <article id="error">
              <pre><code></code></pre>
            </article>
    
            <p>
              <span id="greeting"></span>
              <span id="name"></span>
            </p>
          `;

    Define the custom element

    import { ApolloQueryMixin } from '@apollo-elements/mixins/apollo-query-mixin.js';
    import { gql } from '@apollo/client/core';
    
    class HelloQueryElement extends ApolloQueryMixin(HTMLElement) {
      query = gql`
        HelloQuery($user: ID, $greeting: String) {
          helloWorld(user: $user) {
            name
            greeting
          }
        }
      `;
    
      variables = {
        greeting: "shalom",
        user: "haver"
      };
    
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.append(template.content.cloneNode(true));
      }
    }
    
    customElements.define('hello-query', HelloQueryElement);

    Add reactivity

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

    Render the data

    $(id) { return this.shadowRoot.getElementById(id); }
    
    render() {
      if (this.loading)
        this.setAttribute('loading', '');
      else
        this.removeAttribute('loading');
    
      this.$('error').hidden =
        !this.error;
    
      this.$('error').querySelector("code").textContent =
        this.error?.message ?? '';
    
      this.$('greeting').textContent =
        this.data?.helloWorld?.greeting ?? 'Hello';
    
      this.$('name').textContent =
        this.data?.helloWorld?.name ?? 'Friend';
    }

    And use it in HTML

    <hello-query></hello-query>

    ๐Ÿ‘พ ApolloMutationMixin

    Connects a web component to apollo client and associates it with a specific GraphQL mutation. When the mutation resolves, so will the element's data property.

    ๐Ÿ—ž ApolloSubscriptionMixin

    Connects a web component to apollo client and associates it with a specific GraphQL subscription. When the subscription gets new data, the element's data property will update.

    ๐Ÿ’ผ ApolloClientMixin

    Optional mixin which connects an element to a specific ApolloClient instance.

    import { client } from './specific-apollo-client';
    
    class SpecificClientElement
    extends ApolloClientMixin(client, ApolloQueryMixin(HTMLElement)) {
      // ... do stuff with your client
    }

    ๐Ÿ‘ฉโ€๐Ÿ‘ฆ GraphQLScriptChildMixin

    Allows users to set the element's query (or mutation, or subscription) and variables using HTML.

    import { ApolloQueryMixin, GraphQLScriptChildMixin } from '@apollo-elements/mixins';
    
    class HelloQueryElement extends ApolloQueryMixin(HTMLElement) { /* ... */ }
    
    customElements.define('hello-query', HelloQueryElement);
    <hello-query>
    
      <script type="application/graphql">
        query HelloQuery($user: ID, $greeting: String) {
          helloWorld(user: $user) {
            name
            greeting
          }
        }
      </script>
      <script type="application/json">
        {
          "greeting": "shalom",
          "user": "haver"
        }
      </script>
    
    </hello-query>

    โœ… ValidateVariablesMixin

    Optional mixin which prevents queries from automatically subscribing until their non-nullable variables are defined.

    ๐Ÿ‘ฎโ€โ™‚๏ธ TypePoliciesMixin

    Optional mixin which lets you declare type policies for a component's query.

    Aren't Mixins Considered Harmful?

    Different kind of mixin. These are JavaScript class mixins, which are essentially function composition.

    ๐Ÿ“š Other Libraries

    Looking for other libraries? Want to use Apollo with your favourite custom-elements library? 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/mixins

    DownloadsWeekly Downloads

    629

    Version

    4.1.0

    License

    ISC

    Unpacked Size

    368 kB

    Total Files

    61

    Last publish

    Collaborators

    • bennyp