# @apollo-elements/core

> 👩‍🚀🌛 Core Classes for Apollo Elements 🚀👨‍🚀

Latest version **3.0.1** (published 2026-07-21) · ISC license · 0 weekly downloads

## Install

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

## Health

**Score 70/100 (B)** — status: active.

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 3.0.1 |
| Published | 2026-07-21 |
| First published | 2021-06-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 574 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/core
- Repository: https://github.com/apollo-elements/apollo-elements
- Homepage: https://apolloelements.dev/api/core/
- Issues: https://github.com/apollo-elements/apollo-elements/issues
- npm.io page: https://npm.io/package/@apollo-elements/core

## Dependencies (2)

- [lit](https://npm.io/package/lit.md) ^3.3.3
- [tslib](https://npm.io/package/tslib.md) ^2.8.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

- 3.0.1 (latest) — 2026-07-21
- 1.1.1-next.0 (next) — 2022-01-24
- 3.0.0 — 2025-10-04
- 2.1.2 — 2022-03-29
- 2.1.1 — 2022-03-28
- 2.1.0 — 2022-03-02
- 2.0.1 — 2022-03-01
- 2.0.0 — 2022-02-28
- 1.1.0 — 2021-11-27
- 1.0.1-next.0 — 2021-09-19
- 1.0.0 — 2021-08-02
- 0.1.0-next.7 — 2021-07-30
- 0.0.1-next.6 — 2021-07-27
- 0.0.1-next.5 — 2021-07-26
- 0.0.1-next.4 — 2021-07-21
- … 4 more at https://npm.io/package/@apollo-elements/core/versions

## README

# @apollo-elements/core

[![Published on npm](https://img.shields.io/npm/v/@apollo-elements/core.svg)](https://www.npmjs.com/package/@apollo-elements/core)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@apollo-elements/core)
[![ISC License](https://img.shields.io/npm/l/@apollo-elements/core)](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>🚀 Reactive GraphQL Controllers 🌜</strong>

<strong>👩‍🚀 Lander to Mission Controll, Come in, Over 👨‍🚀</strong>

<!-- <wcd-live data-title="Live Demo">

[![View Live Demo][1]][2]

[1]: https://img.shields.io/badge/Live%20Demo-WebComponents.dev-informational?style=for-the-badge
[2]: https://webcomponents.dev/edit/n67sjuzH56J05LOLnxx0/src/SpacexLaunches.ts

</wcd-live> -->

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

## 📓 Contents
- [🔧 Installation](#-installation)
- [👩‍🚀 Usage](#-usage)
- [📚 Other Libraries](#-other-libraries)
- [❓ FAQs](#-faqs)
- [👷‍♂️ Maintainers](#-maintainers)

## 🔧 Installation
Apollo Elements is 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:

<code-copy>

```bash
npm install --save @apollo-elements/core
```

</code-copy>

## 👩‍🚀 Usage
> See our [docs on setting up Apollo client](https://apolloelements.dev/guides/getting-started/apollo-client/) so your components can fetch their data.

First, let's define our [GraphQL query](https://graphql.org/learn/queries/).

<code-copy>

```graphql
query HelloQuery {
  helloWorld {
    name
    greeting
  }
}
```

</code-copy>

> Read our [docs on working with GraphQL files during development](https://apolloelements.dev/guides/getting-started/buildless-development/) and [in production](https://apolloelements.dev/guides/getting-started/building-for-production/) for more info, and be sure to read about [generating TypeScript types from GraphQL](https://apolloelements.dev/guides/getting-started/codegen/) to enhance your developer experience and reduce bugs.

Next, we'll define our UI component. Import the controller, query, and types:

<details>

<summary>Imports</summary>

<code-copy>

```ts
import { ApolloQueryController } from '@apollo-elements/core';
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

import { HelloQuery } from './Hello.query.graphql';
```

</code-copy>

</details>

Then define your component's template. Make sure to set the `query` field, so your component starts fetching data automatically.

<code-copy>

```ts
@customElement('hello-world')
export class HelloWorldElement extends LitElement {
  query = new ApolloQueryController(this, HelloQuery);

  render() {
    return html`
      <what-spin-such-loader ?active="${this.query.loading}"></what-spin-such-loader>
    ${(
      this.query.error ? html`
        <h1>😢 Such Sad, Much Error! 😰</h1>
        <pre><code>${error.message}</code></pre>`
    : html`
        <p>
          ${this.query.data?.helloWorld.greeting ?? 'Hello'},
          ${this.query.data?.helloWorld.name ?? 'Friend'}!
        </p>`
    )}
    `;
   }
}
```

</code-copy>

## ❓ FAQs

### Is this package only for Lit users?

No! You can use these controllers on any object that implements the `ReactiveControllerHost` interface, even vanilla `HTMLElement` by way of the `ControllerHostMixin`

```ts
import { ControllerHostMixin } from '@apollo-elements/mixins/controller-host-mixin';
import { ApolloQueryController } from '@apollo-elements/core/apollo-query-controller';

customElements.define('hello-world', class HelloWorldElement extends ControllerHostMixin(HTMLElement) {
  query = new ApolloQueryController(this, HelloQuery);

  update() {
    const greeting = this.query.data?.helloWorld.greeting ?? 'Hello';
    const name = this.query.data?.helloWorld.name ?? 'Friend';
    // Just for demo purposes, Don't actually use innerHTML!
    this.innerHTML = `<p>${greeting}, ${name}!</p>`;
    super.update();
  }
});
```

## 📚 Other Libraries
Looking for other libraries? Want to use Apollo with vanilla `extends HTMLElement` components? 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/core · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._