ApolloMutationController

ApolloMutationController modifies data on your GraphQL server. Pass it a GraphQL mutation document, and any options you choose, and when you call its mutate() method, it will issue the mutation. It then updates its host when it’s state (e.g. data, error, or loading) changes.

The (optional) third argument to the constructor is an ApolloMutationControllerOptions object, which is the same as the MutationOptions parameter to mutate(), as well as onComplete/onError callbacks to run your side-effects, if you choose.

Apollo Elements controllers are not limited to Lit. Use them with any object that implements the ReactiveControllerHost interface. See ControllerHostMixin for an example.

import '@apollo-elements/components/apollo-client';
import { ApolloMutationController } from '@apollo-elements/core';
import { customElement, state, query } from 'lit/decorators.js';
import { css, html, LitElement } from 'lit';

import { AddUserMutation } from './AddUser.mutation.graphql.js';

import '@material/mwc-button';
import '@material/mwc-textfield';

@customElement('add-user')
class AddUser extends LitElement {
  addUser = new ApolloMutationController(this, AddUserMutation);

  render() {
    return html`
      <mwc-textfield label="Add User" value=${this.addUser.data?.addUser?.name}></mwc-textfield>
      <mwc-button label="Add" @click="${this.mutate}"></mwc-button>
      <p ?hidden="${!this.addUser.data}">${this.addUser.data?.addUser?.name} added!</p>
    `;
  }

  mutate(event) {
    const name = this.shadowRoot.querySelector('mwc-textfield').value;
    this.addUser.mutate({ variables: { name } });
  }
}

Properties

mutation

The GraphQL mutation document

mostRecentMutationId

number

The ID number of the most recent mutation since the element was instantiated.

called

boolean

data

Data<D> | null

Latest data for the operation, or null.

error

Error | null

Latest error from the operation, or null.

errors

readonly GraphQLError[]

Latest errors from the operation, or [].

loading

boolean

Whether a request is in-flight.

options

ApolloControllerOptions<D, V>

Options for the operation and controller.

Option	Type	Description
client	`ApolloClient<NormalizedCacheObject>`	The `ApolloClient` instance for the controller.
variables	`Variables<D, V>`	Variables for the operation.
context	`any`	Context passed to the link execution chain.
errorPolicy	`ErrorPolicy`	the error policy for the operation
hostElement	`HTMLElement`	When provided, the controller will fall back to this element to fire events

client

ApolloClient | null

The ApolloClient instance for this controller.

document

ComponentDocument<D, V> | null

The GraphQL document for the operation.

variables

Variables<D, V> | null

Variables for the operation.

Methods

mutate

asyncFires a mutation 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.

Parameters

params

generateMutationId

Increments and returns the most recent mutation id.

isMostRecentMutation

Returns true when an ID matches the most recent mutation id.

Parameters

mutationId

onCompletedMutation

Callback for when a mutation is completed.

Parameters

mutationId

response

onMutationError

Callback for when a mutation fails.

Parameters

mutationId

apolloError

hostConnected

Returns

void

hostDisconnected

Returns

void

Events

apollo-controller-connected

ApolloControllerConnectedEvent

The controller’s host connected to the DOM.

apollo-controller-disconnected

ApolloControllerDisconnectedEvent

The controller’s host disconnected from the DOM.

Private Properties

#options

private

ApolloControllerOptions<D, V>

Option	Type	Description
client	`ApolloClient<NormalizedCacheObject>`	The `ApolloClient` instance for the controller.
variables	`Variables<D, V>`	Variables for the operation.
context	`any`	Context passed to the link execution chain.
errorPolicy	`ErrorPolicy`	the error policy for the operation
hostElement	`HTMLElement`	When provided, the controller will fall back to this element to fire events

#client

private

ApolloClient | null

#document

private

ComponentDocument<D, V> | null

emitter

protected

EventTarget

The event emitter to use when firing events, usually the host element.

Private Methods

notify

protectedrequests an update on the host with the provided properties.

Parameters

properties

Record<string, unknown>

Returns

void

documentChanged

protectedcallback for when the GraphQL document changes.

Parameters

document

ComponentDocument<D, V> | null

Returns

void

variablesChanged

protectedcallback for when the GraphQL variables change.

Parameters

variables

Variables<D, V> | null

Returns

void

clientChanged

protectedcallback for when the Apollo client changes.

Parameters

client

ApolloClient | null

Returns

void

optionsChanged

protectedcallback for when the options change.

Parameters

options

ApolloControllerOptions<D, V>

Option	Type	Description
client	`ApolloClient<NormalizedCacheObject>`	The `ApolloClient` instance for the controller.
variables	`Variables<D, V>`	Variables for the operation.
context	`any`	Context passed to the link execution chain.
errorPolicy	`ErrorPolicy`	the error policy for the operation
hostElement	`HTMLElement`	When provided, the controller will fall back to this element to fire events

Returns

void

init

protectedAssigns the controller’s variables and GraphQL document.

Parameters

document

ComponentDocument<D, V> | null

Returns

void

Exports

js ApolloMutationController from apollo-mutation-controller.js