❀Nourishing Plushie Monster
Have ideas to improve npm?Join in the discussion! Β»

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

3.5.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';

class HelloQueryElement extends ApolloQueryMixin(HTMLElement) {
  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>
  <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>

πŸ‘Ύ 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
}

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 JS 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

338

Version

3.5.0

License

ISC

Unpacked Size

229 kB

Total Files

49

Last publish

Collaborators

  • avatar