# @apollo-elements/fast

> 👩‍🚀🌛 FastElements for Apollo GraphQL 🚀👨‍🚀

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

## Install

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

## 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 | 4.0.0 |
| Published | 2025-10-04 |
| First published | 2020-10-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 187.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 423 |
| Author | Benny Powers |
| Maintainers | bennyp |
| Keywords | Apollo, GraphQL, Web Components, Custom Elements, FastElement, Fast |

## Links

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

## Dependencies (4)

- [tslib](https://npm.io/package/tslib.md) ^2.8.1
- [@apollo-elements/core](https://npm.io/package/@apollo-elements/core.md) ^3.0.0
- [@apollo-elements/mixins](https://npm.io/package/@apollo-elements/mixins.md) ^6.0.0
- [@microsoft/fast-element](https://npm.io/package/@microsoft/fast-element.md) ^2.7.0

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

- 4.0.0 (latest) — 2025-10-04
- 2.1.1-next.0 (next) — 2022-01-24
- 3.0.3 — 2022-03-29
- 3.0.2 — 2022-03-28
- 3.0.1 — 2022-03-01
- 3.0.0 — 2022-02-28
- 2.1.0 — 2021-11-27
- 2.0.1-next.0 — 2021-09-19
- 2.0.0 — 2021-08-02
- 2.0.0-next.8 — 2021-07-30
- 2.0.0-next.7 — 2021-07-27
- 2.0.0-next.6 — 2021-07-26
- 2.0.0-next.5 — 2021-07-21
- 2.0.0-next.4 — 2021-07-13
- 2.0.0-next.2 — 2021-06-22
- … 16 more at https://npm.io/package/@apollo-elements/fast/versions

## README

# @apollo-elements/fast

[![Published on npm](https://img.shields.io/npm/v/@apollo-elements/fast.svg)](https://www.npmjs.com/package/@apollo-elements/fast)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@apollo-elements/fast)
[![ISC License](https://img.shields.io/npm/l/@apollo-elements/fast)](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>🚀 FASTElement base classes that connect to your Apollo cache 🌜</strong>

<strong>👩‍🚀 Launch your app at escape velocity! 👨‍🚀</strong>

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

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

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

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

## 👩‍🚀 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 component's [GraphQL query](https://graphql.org/learn/queries/).

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

> 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 base class and helpers, query, and types, then define your component's template. Add an `ApolloQueryBehavior` with a query to automatically subscribe when your element connects.

> Read more about [working with Queries](https://apolloelements.dev/guides/usage/queries)

<code-copy>

```ts
import type { Binding, ViewTemplate } from '@apollo-elements/fast';

import { ApolloQueryBehavior } from '@apollo-elements/fast';
import { FASTElement, customElement, html, when } from '@apollo-elements/fast';

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

import { not } from 'fp-ts/function';

type B = Binding<HelloQueryElement>;
const isLoading: B = x => x.hello.loading;
const hasError: B = x => !!x.hello.error;
const getErrorMessage: B = x => x.hello.error.message;
const getDataPropOr = (prop: string, or: string): B => x =>
  x.hello.data?.helloWorld?.[prop] ?? or;

const template: ViewTemplate<HelloQueryElement> = html`
  <what-spin-such-loader ?active="${isLoading}"></what-spin-such-loader>
  ${when(hasError, html`
    <h1>😢 Such Sad, Very Error! 😰</h1>
    <pre><code>${getErrorMessage}</code></pre>`)}
  ${when(not(hasError), html`
    <p>
      ${getDataPropOr('greeting', 'Hello')},
      ${getDataPropOr('name', 'Friend')}!
    </p>`)}
`;

@customElement({ name: 'hello-query', template })
export class HelloQueryElement extends FASTElement {
  hello = new ApolloQueryBehavior(this, HelloQuery);
}
```

</code-copy>

## 📚 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/fast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._