Apollo Elements Apollo Elements Guides API Blog Toggle darkmode

Hybrids: Subscription Factory

Use the subscription factory to add a GraphQL subscription to you hybrids element.

import { subscription, define, html } from '@apollo-elements/hybrids';

import { UserAddedSubscription } from './UserAdded.subscription.graphql.js';

import '@material/mwc-snackbar';

define('user-added', {
  userAdded: subscription(UserAddedSubscription),
  opened: false,
  render: host => html`
    <link rel="stylesheet" href="user-added.css">
        labeltext="${host.userAdded.data?.name} Joined!"
        open="${host.last !== host.userAdded.data?.name}"
        onMDCSnackbar:closed="${() => host.opened = false}"
        onMDCSnackbar:opened="${() => {
          host.opened = true;
          host.last = host.userAdded.data?.name;


Hybrids property descriptor factory for GraphQL subscriptions.



ComponentDocument<D> | null

The subscription document.


ApolloSubscriptionControllerOptions<D, V>

Options to control the subscription.

Option Type Description
client ApolloClient ApolloClient instance for the subscription.
fetchPolicy FetchPolicy See fetchPolicy
noAutoSubscribe boolean If set, the component will not subscribe until called explicitly. See noAutoSubscribe
onError (error: ApolloError) => void Callback for when subscription produces an error
onData (result: OnSubscriptionDataParams<Data<D>>) => void Callback for when subscription produces new data
onSubscriptionComplete () => void Callback for when the subscription ends
shouldResubscribe boolean Determines if your subscription should be unsubscribed and subscribed again
shouldSubscribe (op?: Partial<Operation<D, V>>) => boolean Predicate which determines whether to automatically subscribe. See shouldSubscribe
skip boolean When true, the subscription will not fetch at all.
subscription DocumentNode Subscription GraphQL Document
variables Variables<D, V> Subscription variables

Inherits from ApolloControllerOptions



import { subscription } from '@apollo-elements/hybrids/factories/subscription';