# @apollo-elements/mixins

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

Latest version **6.0.0** (published 2025-10-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install @apollo-elements/mixins
pnpm add @apollo-elements/mixins
yarn add @apollo-elements/mixins
bun add @apollo-elements/mixins
```

## Health

**Score 65/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 6.0.0 |
| Published | 2025-10-04 |
| First published | 2019-01-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 379.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 423 |
| Author | Benny Powers |
| Maintainers | bennyp |
| Keywords | Apollo, GraphQL, Web Components, Custom Elements |

## Links

- npm: https://www.npmjs.com/package/@apollo-elements/mixins
- Repository: https://github.com/apollo-elements/apollo-elements
- Homepage: https://apolloelements.dev/api/libraries/mixins/
- Issues: https://github.com/apollo-elements/apollo-elements/issues
- npm.io page: https://npm.io/package/@apollo-elements/mixins

## Dependencies (3)

- [tslib](https://npm.io/package/tslib.md) ^2.8.1
- [@apollo-elements/core](https://npm.io/package/@apollo-elements/core.md) ^3.0.0
- [@open-wc/dedupe-mixin](https://npm.io/package/@open-wc/dedupe-mixin.md) ^2.0.1

## Alternatives

- [apollo-link-http-common](https://npm.io/package/apollo-link-http-common.md) — 879.0K weekly downloads
- [react-relay](https://npm.io/package/react-relay.md) — 336.8K weekly downloads
- [relay-test-utils](https://npm.io/package/relay-test-utils.md) — 181.6K weekly downloads
- [@vendure/core](https://npm.io/package/@vendure/core.md) — 14.8K weekly downloads
- [@pnpm/deps.graph-sequencer](https://npm.io/package/@pnpm/deps.graph-sequencer.md) — 13.4K weekly downloads

## Recent versions

- 6.0.0 (latest) — 2025-10-04
- 4.1.1-next.0 (next) — 2022-01-24
- 5.0.3 — 2022-03-29
- 5.0.2 — 2022-03-28
- 5.0.1 — 2022-03-01
- 5.0.0 — 2022-03-01
- 4.1.0 — 2021-11-27
- 4.0.1-next.0 — 2021-09-19
- 4.0.0 — 2021-08-02
- 4.0.0-next.7 — 2021-07-30
- 4.0.0-next.6 — 2021-07-27
- 4.0.0-next.5 — 2021-07-26
- 4.0.0-next.4 — 2021-07-13
- 4.0.0-next.2 — 2021-06-22
- 4.0.0-next.1 — 2021-06-17
- … 48 more at https://npm.io/package/@apollo-elements/mixins/versions

## README

# @apollo-elements/mixins

[![Published on npm](https://img.shields.io/npm/v/@apollo-elements/mixins.svg)](https://www.npmjs.com/package/@apollo-elements/mixins)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@apollo-elements/mixins)
[![ISC License](https://img.shields.io/npm/l/@apollo-elements/mixins)](https://github.com/apollo-elements/apollo-elements/blob/main/LICENCE.md)
[![Release](https://github.com/apollo-elements/apollo-elements/workflows/Release/badge.svg)](https://github.com/apollo-elements/apollo-elements/actions)

<strong>🍹 Moon mixins for cosmic components 👩‍🚀</strong>

A set of [class mixin functions](https://alligator.io/js/class-composition/#composition-with-javascript-classes) that add Apollo GraphQL goodness to your web component classes.

> 🔎 Read the [Full API Docs](https://apolloelements.dev/api/libraries/mixins/) 🔎

## 📓 Contents
- [🔧 Installation](#-installation)
- [🍸 Mixins](#-mixins)
- [👩‍🚀 Usage](#-usage)
- [👷‍♂️ Maintainers](#-maintainers)

## 🔧 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](https://www.npmjs.com/get-npm) then run the following command in your project's root directory:

```bash
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

<code-copy>

  ```js
  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>
        `;
  ```

</code-copy>

Define the custom element

<code-copy>

  ```js
  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);
  ```

</code-copy>

Add reactivity

<code-copy>

  ```js
  #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(); }
  ```

</code-copy>

Render the data

<code-copy>

  ```js

  $(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';
  }
  ```

</code-copy>

And use it in HTML

<code-copy>

  ```html
  <hello-query></hello-query>
  ```

</code-copy>

### 👾 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.

<code-copy>

  ```ts
  import { client } from './specific-apollo-client';

  class SpecificClientElement
  extends ApolloClientMixin(client, ApolloQueryMixin(HTMLElement)) {
    // ... do stuff with your client
  }
  ```

</code-copy>

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

<code-copy>

  ```js
  import { ApolloQueryMixin, GraphQLScriptChildMixin } from '@apollo-elements/mixins';

  class HelloQueryElement extends ApolloQueryMixin(HTMLElement) { /* ... */ }

  customElements.define('hello-query', HelloQueryElement);
  ```

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

</code-copy>

### ✅ 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](http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/), 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](https://apolloelements.dev/)

## 👷‍♂️ Maintainers
`apollo-elements` is a community project maintained by Benny Powers.

[![Contact me on Codementor](https://cdn.codementor.io/badges/contact_me_github.svg)](https://www.codementor.io/bennyp?utm_source=github&utm_medium=button&utm_term=bennyp&utm_campaign=github)

---
_Source: https://npm.io/package/@apollo-elements/mixins · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._