Interfaces: ApolloMutation
Mutation components affect your app's state by issuing mutations to the GraphQL server. Manage your cache by implementing an updater function, and provide the perception of performance with Optimistic UI.
Mutation components inherit the ApolloElementInterface.
Common interface for mutation elements
See ApolloElementInterface
for more information on events
Properties
documentType
(read-only)'mutation'
variables
Variables<D, V> | null
Mutation variables.
An object that maps from the name of a variable as used in the mutation GraphQL document to that variable's value.
updater
ApolloMutationInterface<D, V>['updater']
A function which updates the apollo cache when the query responds. This function will be called twice over the lifecycle of a mutation. Once at the very beginning if an optimisticResponse was provided. The writes created from the optimistic data will be rolled back before the second time this function is called which is when the mutation has succesfully resolved. At that point update will be called with the actual mutation result and those writes will not be rolled back.
The reason a DataProxy is provided instead of the user calling the methods directly on ApolloClient is that all of the writes are batched together at the end of the update, and it allows for writes generated by optimistic data to be rolled back.
refetchQueries
refetch-queriesRefetchQueriesType<D> | null
A list of query names which will be refetched once this mutation has returned.
This is often used if you have a set of queries which may be affected by a mutation and will have to update.
Rather than writing a mutation query reducer (i.e. updateQueries
) for this,
you can refetch the queries that will be affected
and achieve a consistent store once these queries return.
optimisticResponse
OptimisticResponseType<D, V>
An object that represents the result of this mutation that will be optimistically stored before the server has actually returned a result.
This is most often used for optimistic UI, where we want to be able to see the result of a mutation immediately, and update the UI later if any errors appear.
An object that represents the result of this mutation that will be optimistically stored before the server has actually returned a result. This is most often used for optimistic UI, where we want to be able to see the result of a mutation immediately, and update the UI later if any errors appear.
element.optimisticResponse = ({ name }: HelloMutationVariables) => ({
__typename: 'Mutation',
hello: {
__typename: 'Greeting',
name,
},
});
onError
ApolloMutationInterface<D, V>['onError']
Callback for when an error occurs in mutation.
onCompleted
ApolloMutationInterface<D, V>['onCompleted']
Callback for when a mutation is completed.
mutation
ComponentDocument<D> | null
The mutation.
ignoreResults
boolean
If true, the returned data property will not update with the mutation result.
fetchPolicy
fetch-policyExtract<FetchPolicy, 'no-cache'>
If set to 'no-cache', the mutation result will not update the Apollo cache.
data
Data<D> | null
Latest mutation data
controller
ApolloMutationController<D, V>
called
(read-only)boolean
Whether the mutation was called.
awaitRefetchQueries
await-refetch-queriesboolean
Queries refetched as part of refetchQueries are handled asynchronously, and are not waited on before the mutation is completed (resolved). Setting this to true will make sure refetched queries are completed before the mutation is considered done. false by default.
client
inherited from ApolloElementElementApolloClient<NormalizedCacheObject> | null
The Apollo Client instance.
context
inherited from ApolloElementElementRecord<string, unknown>
Context passed to the link execution chain.
document
inherited from ApolloElementElementComponentDocument<D> | null
Operation document.
GraphQL operation document i.e. query, subscription, or mutation.
Must be a parsed GraphQL DocumentNode, so use graphql-tag
.
error
inherited from ApolloElementElementError | ApolloError | null
Latest error
errorPolicy
inherited from ApolloElementElement error-policyErrorPolicy
Error Policy for the operation.
Much like fetchPolicy
, errorPolicy
allows you to control how GraphQL errors
from the server are sent to your UI code. By default, the error policy treats any
GraphQL Errors as network errors and ends the request chain.
It doesn't save any data in the cache, and renders your UI with the error property
set to an ApolloError
. By changing this policy per request, you can adjust how
GraphQL Errors are managed by your UI. The possible options for errorPolicy
are:
none
(default): any errors from the request are treated like runtime errors and the observable is stopped (XXX this is default to lower breaking changes going from AC 1.0 => 2.0)ignore
: errors from the request do not stop the observable, but also don't callnext
all
: errors are treated like data and will notify observables
errors
inherited from ApolloElementElementreadonly GraphQLError[]
Latest errors
loading
inherited from ApolloElementElementboolean
Whether a request is in flight.
readyToReceiveDocument
inherited from ApolloElementElementboolean
True when the element is connected and ready to receive its GraphQL document
updateComplete
inherited from ApolloElementElementPromise<boolean>
Methods
mutate
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
Partial<MutationOptions<Data<D>, Variables<D, V>>>
All named arguments to mutate default to the element's corresponding instance property. So you can call element.mutate()
without arguments and it will call using element.mutation
, element.variables
, etc. You can likewise override instance properties per-call by passing them in, e.g.
await element.mutate({
fetchPolicy: 'network-only'
variables: {
...element.variables,
name: 'overridden',
},
});
Property | Type | Description |
---|---|---|
awaitRefetchQueries | boolean |
See awaitRefetchQueries |
context | Record<string, unknown> |
See context |
errorPolicy | ErrorPolicy |
See errorPolicy |
fetchPolicy | FetchPolicy |
See fetchPolicy |
mutation | `DocumentNode | TypedDocumentNode`{lang=ts} |
optimisticResponse | OptimisticResponseType<D, V> |
See optimisticResponse |
refetchQueries | RefetchQueriesType<D, V> |
See refetchQueries |
update | MutationUpdaterFn<Data<D>, Variables<D, V>> |
See updater |
variables | Variables<D, V> |
See variables |
Returns
Promise<FetchResult<Data<D>>>
Property | Type | Description |
---|---|---|
data | Data<D, V> |
The result of a successful execution of the mutation |
errors | readonly GraphQLError[] |
included when any errors occurred as a non-empty array |
extensions | boolean |
Reserved for adding non-standard properties |
context | Record<string, unknown> |
See context |
addController
inherited from ApolloElementElementParameters
controller
ReactiveController
Returns
void
removeController
inherited from ApolloElementElementParameters
controller
ReactiveController
Returns
void
requestUpdate
inherited from ApolloElementElementParameters
name
string
value
unknown
Returns
void
Events
Name | Type | Description |
---|---|---|
apollo-mutation-result |
|
when the mutation resolves |
apollo-error |
|
when the mutation rejects |
'apollo-element-connected' |
|
when the element connects to the dom |
'apollo-element-disconnected' |
|
when the element disconnects from the dom |
Private API
Private Methods
documentChanged
inherited from ApolloElementElementLifecycle callback that reacts to changes in the GraphQL document
Parameters
document
ComponentDocument<D> | null
Returns
void
update
inherited from ApolloElementElementParameters
args
any[]
Returns
void
updated
inherited from ApolloElementElementParameters
args
any[]
Returns
void
variablesChanged
inherited from ApolloElementElementLifecycle callback that reacts to changes in the operation variables
Parameters
variables
Variables<D, V> | null
Returns
void
Exports
import {
CustomElement,
ControllerHost, ApolloElementElement, ApolloMutationElement, ApolloQueryElement, ApolloSubscriptionElement} from '@apollo-elements/core/types';