Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @apollo-elements/mixins

@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.

📓 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.

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)) {
  // ...
}

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.

👩‍🚀 Usage

Here's an example that uses HTMLElement

import { ApolloQueryMixin } from '@apollo-elements/mixins/apollo-query-mixin.js';

class HelloQuery extends ApolloQueryMixin(HTMLElement) {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>/* ... */</style>
      <p hidden>
        <span id="greeting"></span>
        <span id="name"></span>
      </p>
    `;
  }

  get data() {
    return this.__data;
  }

  set data(data) {
    this.__data = data;
    this.render();
  }

  render() {
    if (!this.data) return;
    this.shadowRoot.getElementById('greeting').textContent =
      this.data?.helloWorld.greeting ?? 'Hello';

    this.shadowRoot.getElementById('name').textContent =
      this.data?.helloWorld.name ?? 'Friend';

    this.shadowRoot.querySelector('p').hidden = false;
  }
}

customElements.define('hello-query', HelloQuery);
<hello-query>
  <script type="application/graphql">
    query HelloQuery {
      helloWorld {
        name
        greeting
      }
    }
  </script>
</hello-query>

Aren't Mixins Considered Harmful?

Different kind of mixin. These are JS class mixins.

👷‍♂️ Maintainers

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

Contact me on Codementor

Index

Variables

Const ApolloElementMixin

ApolloElementMixin: ApolloElementMixinImplementation = dedupeMixin(ApolloElementMixinImplementation)

ApolloElementMixin: class mixin for apollo custom elements.

Const ApolloMutationMixin

ApolloMutationMixin: ApolloMutationMixinImpl = dedupeMixin(ApolloMutationMixinImpl)

ApolloMutationMixin: class mixin for apollo-mutation elements.

Const ApolloQueryMixin

ApolloQueryMixin: ApolloQueryMixinImpl = dedupeMixin(ApolloQueryMixinImpl)

ApolloQueryMixin: class mixin for apollo-query elements.

Const ApolloSubscriptionMixin

ApolloSubscriptionMixin: ApolloSubscriptionMixinImpl = dedupeMixin(ApolloSubscriptionMixinImpl)

ApolloSubscriptionMixin: class mixin for apollo-subscription elements.

Const TypePoliciesMixin

TypePoliciesMixin: TypePoliciesMixinImpl = dedupeMixin(TypePoliciesMixinImpl)

Lazily adds TypePolicies to the Apollo client when the element connects to the DOM Provides a typePolicies instance property.

Functions

ApolloClientMixin

ValidateVariablesMixin

  • ValidateVariablesMixin<B>(superclass: B): B
  • Type parameters

    • B: Base

    Parameters

    • superclass: B

    Returns B