How to use @apollo-elements/mixins - 10 common examples

*   template =  html`<input>`
 *
 *   onInput({ target: { value: input }, key }) {
 *     this.variables = { input };
 *     if (key === 'Enter') return this.mutate();
 *   }
 * };
 *
 * customElements.define('mutation-element', MutationElement)
 * ```
 *
 * @polymer
 * @extends GluonElement
 * @appliesMixin ApolloMutationMixin
 */
export class ApolloMutation extends ApolloMutationMixin(ApolloElement) {
  /**
   * If the mutation has been called
   *
   * @return {boolean}
   */
  get called() {
    return this.__called;
  }

  set called(called) {
    this.__called = called;
    this.render();
  }
}

*     return { name, picture }
 *   }
 *
 *   mutate() {
 *     const { variables } = this;
 *     return this.$.userMutation.mutate({ variables })
 *   }
 * }
 * ```
 *
 * @polymer
 * @customElement
 * @extends ApolloMutation
 * @appliesMixin NotifyingElementMixin
 */
const ApolloMutation = ApolloMutationMixin(class extends NotifyingElementMixin(HTMLElement) {
  /**
   * Whether the mutation has been called
   * @type {Boolean}
   */
  get called() {
    return this.__called;
  }

  set called(value) {
    this.__called = value;
    this.notify('called', value);
  }

  /**
   * Latest data.
   * @type {Object}

*   }
 *
 *   onInput({ target: { value: input }, key }) {
 *     this.variables = { input };
 *     if (key === 'Enter') return this.mutate();
 *   }
 * };
 *
 * customElements.define('mutation-element', MutationElement)
 * ```
 *
 * @polymer
 * @extends ApolloElement
 * @appliesMixin ApolloMutationMixin
 */
export class ApolloMutation extends ApolloMutationMixin(ApolloElement) {
  static get properties() {
    return {
      /**
       * If the mutation has been called
       * @type {Boolean}
       */
      called: { type: Boolean },
    };
  }

  /**
   * This resolves a single mutation according to the options specified and returns
   * a Promise which is either resolved with the resulting data or rejected with an
   * error.
   *
   * NOTE: this `LitElement` version passes `this.onUpdate` as the update function

*     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) { }

export { html } from 'lit-element';
import { LitElement } from 'lit-element';
import { ApolloElementMixin } from '@apollo-elements/mixins/apollo-element-mixin.js';

/**
 * # ApolloElement
 *
 * Custom Element base class for apollo custom elements.
 *
 * @polymer
 * @extends LitElement
 * @appliesMixin ApolloElementMixin
 */
export class ApolloElement extends ApolloElementMixin(LitElement) {
  static get properties() {
    return {
      /**
       * The Apollo client.
       * See https://github.com/apollo-elements/apollo-elements#-bundling
       * @type {Object}
       */
      client: { type: Object },

      /**
       * The latest data for the query from the Apollo cache
       * @type {Object}
       */
      data: { type: Object },

      /**

export { html } from '@gluon/gluon';
import { GluonElement } from '@gluon/gluon';
import { ApolloElementMixin } from '@apollo-elements/mixins/apollo-element-mixin.js';

/**
 * # ApolloElement
 *
 * Custom Element base class for apollo custom elements.
 *
 * @polymer
 * @extends GluonElement
 * @appliesMixin ApolloElementMixin
 */
export class ApolloElement extends ApolloElementMixin(GluonElement) {
  /**
   * The latest data for the query from the Apollo cache
   *
   * @return {Object}
   */
  get data() {
    return this.__data;
  }

  set data(data) {
    this.__data = data;
    this.render();
  }

  /**
   * The latest error for the query from the Apollo cache

*     return (
 *         loading ? html``
 *       : error ? errorTemplate(error)
 *       : html`<p>${data.helloWorld.greeting}, ${data.helloWorld.name}</p>`
 *     );
 *   }
 * };
 *
 * customElements.define('connected-element', ConnectedElement)
 * ```
 *
 * @polymer
 * @extends ApolloElement
 * @appliesMixin ApolloQueryMixin
 */
export class ApolloQuery extends ApolloQueryMixin(ApolloElement) {
  /**
   * `networkStatus` is useful if you want to display a different loading indicator (or no indicator at all)
   * depending on your network status as it provides a more detailed view into the state of a network request
   * on your component than `loading` does. `networkStatus` is an enum with different number values between 1 and 8.
   * These number values each represent a different network state.
   *
   * 1. `loading`: The query has never been run before and the request is now pending. A query will still have this network status even if a result was returned from the cache, but a query was dispatched anyway.
   * 2. `setVariables`: If a query’s variables change and a network request was fired then the network status will be setVariables until the result of that query comes back. React users will see this when options.variables changes on their queries.
   * 3. `fetchMore`: Indicates that fetchMore was called on this query and that the network request created is currently in flight.
   * 4. `refetch`: It means that refetch was called on a query and the refetch request is currently in flight.
   * 5. Unused.
   * 6. `poll`: Indicates that a polling query is currently in flight. So for example if you are polling a query every 10 seconds then the network status will switch to poll every 10 seconds whenever a poll request has been sent but not resolved.
   * 7. `ready`: No request is in flight for this query, and no errors happened. Everything is OK.
   * 8. `error`: No request is in flight for this query, but one or more errors were detected.
   *
   * If the network status is less then 7 then it is equivalent to `loading` being true. In fact you could

*     return (
 *         loading ? html``
 *       : error ? errorTemplate(error)
 *       : html`<p>${data.helloWorld.greeting}, ${data.helloWorld.name}</p>`
 *     );
 *   }
 * };
 *
 * customElements.define('connected-element', ConnectedElement)
 * ```
 *
 * @polymer
 * @extends ApolloElement
 * @appliesMixin ApolloQueryMixin
 */
export class ApolloQuery extends ApolloQueryMixin(ApolloElement) {
  static get properties() {
    return {
      /**
       * Enum of network statuses. See https://bit.ly/2sfKLY0
       * @type {Number}
       */
      networkStatus: { type: Number },

      /**
       * If the query should not subscribe until `subscribe` is explicitly called.
       * @type {boolean}
       */
      noAutoSubscribe: { type: Boolean, attribute: 'no-auto-subscribe' },
    };
  }