👩‍🚀🌛 Custom Element class mixins for Apollo GraphQL 🚀👨‍🚀

Usage no npm install needed!

<script type="module">
  import apolloElementsMixins from 'https://cdn.skypack.dev/@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 = `
          :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