TypeScript icon, indicating that this package has built-in type declarations

5.0.3ย โ€ขย Publicย โ€ขย Published


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 = `
          :host([loading]) span {
            opacity: 0;

          span {
            opacity: 1;
            will-change: opacity;
            transition: opacity 0.2s ease-in-out;

        <article id="error">

          <span id="greeting"></span>
          <span id="name"></span>

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) {

  variables = {
    greeting: "shalom",
    user: "haver"

  constructor() {
    this.attachShadow({ mode: 'open' });

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', '');

  this.$('error').hidden =

  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


๐Ÿ‘พ 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);

  <script type="application/graphql">
    query HelloQuery($user: ID, $greeting: String) {
      helloWorld(user: $user) {
  <script type="application/json">
      "greeting": "shalom",
      "user": "haver"


โœ… 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

Package Sidebar


npm i @apollo-elements/mixins

Weekly Downloads






Unpacked Size

473 kB

Total Files


Last publish


  • bennyp