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="{{data}}"
    mutation="[[UserMutation]]"
></polymer-apollo-mutation>

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

Properties

static

called

boolean

Events

data-changed

PolymerChangeEvent<Data<D>>

variables-changed

PolymerChangeEvent<Variables<D, V>>

error-changed

PolymerChangeEvent<Error>

errors-changed

PolymerChangeEvent<readonly GraphQLError[]>

loading-changed

PolymerChangeEvent<boolean>

Exports

js PolymerApolloMutation from polymer-apollo-mutation.js

custom-element-definition from polymer-apollo-mutation.js