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, V>

A GraphQL document containing a single subscription.

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, V> | 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

Resets the observable and subscribes.

args

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

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';