<link rel="stylesheet" href="/_merged_assets/_static/search/noscript.css">
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`
    %3Clink rel="stylesheet" href="user-added.css">
    <mwc-snackbar
        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;
        }}"
    ></mwc-snackbar>
  `,
});

subscription

Hybrids property descriptor factory for GraphQL subscriptions.

Parameters

subscriptionDocument

DocumentNode | null

The subscription document.

options

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

Returns


subscription

Parameters

subscriptionDocument

D | null

options

ApolloSubscriptionControllerOptions<D>
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

Returns

Descriptor<E, ApolloSubscriptionController<D>>

Exports

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