How to use the @apollo-elements/mixins/apollo-subscription-mixin.js.ApolloSubscriptionMixin function in @apollo-elements/mixins

*     return (
 *         loading ? html``
 *       : error ? errorTemplate(error)
 *       : html`<p>${data.helloWorld.greeting}, ${data.helloWorld.name}</p>`
 *     );
 *   }
 * };
 *
 * customElements.define('connected-element', ConnectedElement)
 * ```
 *
 * @polymer
 * @extends ApolloElement
 * @appliesMixin ApolloSubscriptionMixin
 */
export class ApolloSubscription extends ApolloSubscriptionMixin(ApolloElement) {
  /**
   * By default, will only render if
   *   - The component has `data` or
   *   - The component has an `error` or
   *   - The component is `loading`.
   *
   * @param  {Map}  changedProps           Changed properties.
   * @return {boolean}                     Whether the component should render.
   * @protected
   */
  shouldUpdate() {
    return (
      this.loading != null ||
      !!this.error ||
      !!this.data
    );

*       
 *     
 *
 *     
 *       [[data.userJoined.picture]]
 *     
 *   `;
 * }
 * ```
 *
 * @polymer
 * @customElement
 * @extends ApolloSubscription
 * @appliesMixin NotifyingElementMixin
 */
const ApolloSubscription = ApolloSubscriptionMixin(class extends Notify(HTMLElement) {
  /**
   * Latest data.
   *
   * @type {Object}
   */
  get data() {
    return this.__data;
  }

  set data(value) {
    this.__data = value;
    this.notify('data', value);
  }

  /**
   * Latest error.

*     return (
 *         loading ? html``
 *       : error ? errorTemplate(error)
 *       : html`<p>${data.helloWorld.greeting}, ${data.helloWorld.name}</p>`
 *     )
 *   }
 * };
 *
 * customElements.define('connected-element', ConnectedElement)
 * ```
 *
 * @polymer
 * @extends ApolloElement
 * @appliesMixin ApolloSubscriptionMixin
 */
export class ApolloSubscription extends ApolloSubscriptionMixin(ApolloElement) { }