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 documentmostRecentMutationId
numbercalled
booleandata
Data<D> | nullnull.error
Error | nullnull.errors
readonly GraphQLError[][].loading
booleanoptions
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
ApolloClient | nullApolloClient instance for this controller.document
ComponentDocument<D, V> | nullvariables
Variables<D, V> | nullMethods
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
voidhostDisconnected
Returns
voidEvents
apollo-controller-connected
ApolloControllerConnectedEventThe controller’s host connected to the DOM.apollo-controller-disconnected
ApolloControllerDisconnectedEventThe controller’s host disconnected from the DOM.
Private Properties
#options
privateApolloControllerOptions<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
privateApolloClient | null#document
privateComponentDocument<D, V> | nullemitter
protectedEventTarget
Private Methods
notify
protectedrequests an update on the host with the provided properties.Parameters
properties
Record<string, unknown>Returns
voiddocumentChanged
protectedcallback for when the GraphQL document changes.Parameters
document
ComponentDocument<D, V> | nullReturns
voidvariablesChanged
protectedcallback for when the GraphQL variables change.Parameters
variables
Variables<D, V> | nullReturns
voidclientChanged
protectedcallback for when the Apollo client changes.Parameters
client
ApolloClient | nullReturns
voidoptionsChanged
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
voidinit
protectedAssigns the controller’s variables and GraphQL document.Parameters
document
ComponentDocument<D, V> | nullReturns
voidExports
js ApolloMutationController from apollo-mutation-controller.js