Miss any of our Open RFC calls?Watch the recordings here! »


3.0.4 • Public • Published


Published on npm Published on webcomponents.org ISC License Release

👾 hybrids element descriptors that shoot for the moon 🚀

hybrids is a modern, functional, and opinionated UI library based on the web component standards. It sports a refreshing take on ui-as-value. Take a look at the repository and documentation, and this blog post introduction to hybrids

Apollo Elements hybrids make it easy to take existing hybrids component descriptors and connect them to your Apollo cache.

📓 Contents

🔧 Installation

Apollo Elements hybrids 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/hybrids

👩‍🚀 Usage

This package provides ApolloQuery, ApolloMutation, and ApolloSubscription objects which you can spread in to your hybrid property descriptors.

❓ Queries

Spread in the ApolloQuery hybrid property descriptors to define a querying element.

import { ApolloQuery, define, html } from '@apollo-elements/hybrids';
import { gql } from '@apollo/client/core';
const render = ({ data }) => html`
  <p>${data?.hello ?? 'Hello'}</p>
define('hello-element', { ...ApolloQuery, render });

Use them by assigning your graphql nodes to the query property.

import HelloQuery from './Hello.query.graphql';
const render = ({ data }) => html`
  <hello-element query="${HelloQuery}" variables="${{ name: 'Mr. Magoo' }}></hello-element>

NOTE: If you set window.__APOLLO_CLIENT__, you don't need to specify the client property when instantiating your elements, the way we do above.

👾 Mutations

Spread in the ApolloMutation hybrid property descriptors to define a mutating element.

import { ApolloMutation, define, html } from '@apollo-elements/hybrids';
const onKeyup = ({ mutate }, ({ key, target: { value: name } })) => {
  if (key === 'Enter') mutate({ variables: { name } });
const render = ({ data }) =>
  html`<input aria-label="Name" placeholder="Name" onkeyup="${onKeyup}"/>`;
define('name-input', { ...ApolloMutation, render });

Which you add to your templates thus:

import { gql } from '@apollo/client/core';
const mutation = gql`
  mutation Name($name: String!) {
    name(name: $name) {
const template = html`

🗞 Subscriptions

Spread in the ApolloSubscription Hybrid prototype to define your subscription element.

import { ApolloSubscription, define, html } from '@apollo-elements/hybrids';
const render = ({ data, error }) => error ? html`Error! ${error}` : html`
  Latest News: ${data.news}
define('subscribing-element', { ...ApolloSubscription, render });

And instantiate it like so:

import { gql } from '@apollo/client/core';
const subscription = gql`subscription { news }`;
const template = html`

If you'd like to set up a subscription with an initial value from a query, then update that query's cached value each time the subscription reports new data, pass a subscription document and an updateQuery function with signature (prev: CachedValue, { subscriptionData }): next: CachedValue to the subscribeToMore method on a query element:

import { gql } from '@apollo/client/core';
const query = gql`
  query {
const subscription = gql`
  subscription {
const updateQuery = (previous = [], { subscriptionData }) =>
    !subscriptionData.data ? previous
  : [subscriptionData.data.messagePosted, ...previous];
const message = message => html`<li>${message}</li>`;
const render = ({messages}) =>
const messageList = document.createElement('message-list');
messagesList.query = query;
messagesList.subscribeToMore({ document: subscription, updateQuery });
define('messages-list', { ...ApolloQuery, render }

👷‍♂️ Maintainers

apollo-elements is a community project maintained by Benny Powers.

Contact me on Codementor


npm i @apollo-elements/hybrids

DownloadsWeekly Downloads






Unpacked Size

245 kB

Total Files


Last publish


  • avatar