Looking for reactive Apollo controllers? See @apollo-elements/core
ApolloMutation
inherits from ApolloElement
and implements the ApolloMutationInterface
.
Read the mutation component guides for examples and tips.
ApolloMutation
👩🚀 Custom element base class to issue mutations via your Apollo cache.
See ApolloMutationInterface
for more information on events
Properties
data
Data<D> | null
variables
Variables<D, V> | null
controller
ApolloController<D, V>
called
boolean
mutation
ComponentDocument<D, V> | null
optimisticResponse
OptimisticResponseType<D, V> | undefined
An object that represents the result of this mutation that will be optimistically stored before the server has actually returned a result, or a unary function that takes the mutation’s variables and returns such an object.
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.
Examples
element.optimisticResponse = ({ name }: HelloMutationVariables) => ({
__typename: 'Mutation',
hello: {
__typename: 'Greeting',
name,
},
});
ignoreResults
boolean
awaitRefetchQueries
boolean | undefined
errorPolicy
C.ErrorPolicy | undefined
fetchPolicy
'no-cache' | undefined
refetchQueries
RefetchQueriesType<D> | null
updateQueries
) for this,
you can refetch the queries that will be affected
and achieve a consistent store once these queries return.readyToReceiveDocument
boolean
client
ApolloClient<NormalizedCacheObject> | null
document
ComponentDocument<D, V> | null
DocumentNode
context
Record<string, unknown> | undefined
loading
boolean
error
Error | ApolloError | null
errors
readonly GraphQLError[]
Methods
updater
publicA 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.
Parameters
params
Parameters<MutationUpdaterFn<Data<D>, Variables<D, V>>>
Returns
ReturnType<MutationUpdaterFn<Data<D>, Variables<D, V>>>
mutate
publicParameters
params
Partial<C.MutationOptions<Data<D>, Variables<D, V>>>
Returns
Promise<C.FetchResult<Data<D>>>
onCompleted
Callback for when a mutation is completed.Parameters
data
Data<D> | null
Returns
void
onError
Callback for when an error occurs in mutation.Parameters
error
Error
Returns
void
Events
apollo-element-connected
ApolloElementEvent
apollo-element-disconnected
ApolloElementEvent
Exports
js ApolloMutation
from apollo-mutation.js