Polymer: polymer-apollo-mutation

<apollo-mutation> fires Polymer-style prop-changed events when its called, data, error, or loading properties change.

See ApolloMutationInterface for more information.

import { PolymerElement, html } from '@polymer/polymer';
import { AddUserMutation } from './Hello.query.graphql.js';
import './elements.js';

class AddUserMutationElement extends PolymerElement {
  static get template() {
    return html`
      <polymer-apollo-mutation id="userMutation" data="{{data}}" mutation="[[mutation]]"></polymer-apollo-mutation>

      <p-card>
        <h2 slot="heading">Add a User</h2>
        <paper-input hidden="[[data]]" label="Name" value="{{name}}"></paper-input>
        <paper-button slot="actions" hidden="[[data]]" on-click="mutate">Submit</paper-button>
        <p hidden="[[!data]]">[[data.insertUsers.returning.0.name]] added!</p>
      </p-card>
    `;
  }

  static get properties() {
    return {
      mutation: { type: Object, value: () => AddUserMutation },
    };
  }

  mutate() {
    const { name } = this;
    return this.$.userMutation.mutate({ variables: { name } });
  }
}

customElements.define('add-user', AddUserMutationElement);

Examples

Use in a Polymer template

<polymer-apollo-mutation id="userMutation"
data=""
mutation="[[UserMutation]]"
></polymer-apollo-mutation>

<paper-input label="Name" value=""></paper-input>
<paper-input label="Picture URL" value=""></paper-input>
<paper-button on-click="mutate">Submit</paper-button>

Properties

static

is

(read-only)

string

called

boolean

Events

Name	Type	Description
loading-changed
errors-changed
error-changed
data-changed
called-changed

Exports

import '@apollo-elements/polymer/polymer-apollo-mutation';
import { PolymerApolloMutation } from '@apollo-elements/polymer/polymer-apollo-mutation';