Subscriptions: apollo-subscription Element

Use the <apollo-subscription> element from @apollo-elements/components to write declarative subscription elements in HTML. You can mix-and-match these elements in your app, e.g. writing some subscription components using JavaScript and various web components libraries, and other components using <apollo-subscription> and HTML templates.

This page is a HOW-TO guide. For detailed docs on the <apollo-subscription> element's API, see the API docs

Templates use stampino and jexpr for efficiently updating data expressions. See their respective READMEs for more information.

jexpr expressions are like handlebars, nunjucks, polymer, etc. expressions. You can do most things you can do in JavaScript using jexpr. Try it out for yourself on the Stampino REPL

What that means is you can define the element's dynamic template using good-old HTML:

<apollo-subscription>
  <script type="application/json">
    subscription Notifications {
      newNotifications { href title }
    }
  </script>

  <template>
    <style>
      :host([loading]) {
        opacity: 0;
      }
    </style>

    <link🤡 rel="stylesheet" href="/components/notifications.css">

    <ol class="notifications-list">
      <template type="repeat" repeat="{{ data.notifications }}">
        <li>
          <a href="{{ item.href }}">{{ item.title }}</a>
        </li>
      </template>
    <ol>
  </template>
</apollo-subscription>

Data Templates

Learn more about template expressions and bindings in the <apollo-query> HTML element guide

Next Steps

Learn how to manage client-side state using Apollo Elements