Apollo Elements Apollo Elements Guides API Blog Toggle darkmode

Components: apollo-subscription

<apollo-subscription> lets you query GraphQL without writing any JavaScript. Import the custom element then write your template, query, and variables in HTML. The element class inherits from ApolloSubscriptionInterface

This page has detailed API documentation for <apollo-subscription>. See the <apollo-subscription> HTML Element guide for a HOW-TO guide.

Live Demo

<apollo-subscription>

  <script type="application/graphql">
    subscription NewMessages {
      newMessage {
        id
        message
        author {
          id
          name
          picture
        }
      }
    }
  </script>

  <template>
    <small><em>This demo is blocked by an <a target="_blank" rel="nofollow noreferer" href="https://github.com/apollographql/apollo-feature-requests/issues/299">issue in <code>SchemaLink</code></a>.</small>

    <sl-alert type="primary" duration="3000" closable open>
      <sl-icon slot="icon" name="info-circle"></sl-icon>
      <article>
        <img src="{{ data.newMessage.author.picture }}"
             alt="{{ data.newMessage.author.name }}"
             title="{{ data.newMessage.author.name }}"/>
        <span>{{ data.newMessage.message }}</span>
      </article>
    </sl-alert>
  </template>

</apollo-subscription>

Render a GraphQL subscription to the DOM

Examples

Render a subscription to Shadow DOM
<apollo-subscription>
  <script type="application/graphql">
    subscription NewMessages {
      messageAdded { id author content }
    }
  </script>
  <template>
    <article>
      <span class="author-name">{{ data.author.name }}</span>
      <mark-down>{{ data.content }}</mark-down>
    </article>
  </template>
</apollo-subscription>
Setting subscription and variables using the DOM
<apollo-subscription id="subscription-element" template="message-template"></apollo-subscription>

<template id="message-template">
  <article>
    <span class="author-name">{{ data.author.name }}</span>
    <mark-down>{{ data.content }}</mark-down>
  </article>
</template>

<script type="module">
  import { gql } from '@apollo/client/core';
  const el = document.getElementById('subscription-element');
  el.subscription = gql`
    subscription NewMessages($limit: Int) {
      messagesAdded {
        messages { id author content }
        hasMore
      }
    }
  `;
  el.variables = { limit: 10 };
</script>

Attributes

'no-shadow'

inherited from StampinoRender
Boolean|string

When set, the element will render to a <div> in its light DOM. If set with a string, the string will be the div's class name.

Properties

static

is

(read-only)
string

subscription

null | ComponentDocument<D>

A GraphQL document containing a single subscription.

skip

skip
boolean

If true, the query will be skipped entirely

shouldResubscribe

should-resubscribe
boolean

Determines if your subscription should be unsubscribed and subscribed again.

pollInterval

poll-interval
number | undefined

The time interval (in milliseconds) on which this subscription should be refetched from the server.

notifyOnNetworkStatusChange

notify-on-network-status-change
boolean

Whether or not updates to the network status should trigger next on the observer of this subscription.

noAutoSubscribe

no-auto-subscribe
boolean

If true, the element will not begin querying data until you manually call subscribe

fetchPolicy

fetch-policy
this['controller']['options']['fetchPolicy'] | undefined

Specifies the FetchPolicy to be used for this subscription.

errorPolicy

error-policy
this['controller']['options']['errorPolicy'] | undefined

Error policy for the subscription

context

Record<string, any> | undefined

Context passed to the link execution chain.

canAutoSubscribe

(read-only)
boolean

Flags an element that's ready and able to auto subscribe

client

inherited from ApolloElement
ApolloClient<NormalizedCacheObject> | null

The Apollo Client instance.

controller

inherited from ApolloElement
ApolloController<D, V>

data

inherited from ApolloElement
Data<D> | null

Latest Data.

document

inherited from ApolloElement
ComponentDocument<D> | null

Operation document. GraphQL operation document i.e. query, subscription, or mutation. Must be a parsed GraphQL DocumentNode

error

inherited from ApolloElement
Error | ApolloError | null

Latest error

errors

inherited from ApolloElement
readonly GraphQLError[]

Latest errors

loading

inherited from ApolloElement loading
boolean

Whether a request is in flight.

readyToReceiveDocument

inherited from ApolloElement
boolean

template

(read-only)
inherited from StampinoRender template
HTMLTemplateElement | null

Template element to render. Can either be a light-DOM child of the element, or referenced by ID with the template attribute.

Templates are stampino templates using jexpr

templateHandlers

inherited from StampinoRender
TemplateHandlers

variables

inherited from ApolloElement
Variables<D, V> | null

Operation variables.

Methods

subscribe

Resets the observable and subscribes.

Parameters

args

Parameters<this['controller']['subscribe']>

Returns

void

shouldSubscribe

Parameters

options

Partial<this['controller']['options']>

Returns

boolean

cancel

Cancels and clears the subscription

Returns

void
public

$

inherited from StampinoRender

querySelector within the render root.

Parameters

sel

string

Returns

E | null
public

$$

inherited from StampinoRender

querySelectorAll within the render root.

Parameters

sel

string

Returns

NodeListOf<E>
Private API

Private Methods

private

isQueryable

inherited from StampinoRender

Parameters

node

Node

Returns

node is (ShadowRoot|Document)
protected

createRenderRoot

inherited from StampinoRender

Returns

ShadowRoot|HTMLElement
private

getElementByIdFromRoot

inherited from StampinoRender

Parameters

id

string|null

Returns

HTMLElement | null
private

getTemplateFromRoot

inherited from StampinoRender

Returns

HTMLTemplateElement | null

Exports

import '@apollo-elements/components/apollo-subscription';
import { ApolloSubscriptionElement } from '@apollo-elements/components/apollo-subscription';