lit-apollo: ApolloMutation

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
Latest Data.Latest mutation data.

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.

controller

ApolloController<D, V>

called

boolean
Whether the mutation was called

mutation

ComponentDocument<D, V> | null
The mutation.

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

Using a function
element.optimisticResponse = ({ name }: HelloMutationVariables) => ({
 __typename: 'Mutation',
 hello: {
   __typename: 'Greeting',
   name,
 },
});

ignoreResults

boolean
If true, the returned data property will not update with the mutation result.

awaitRefetchQueries

boolean | undefined
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.

errorPolicy

C.ErrorPolicy | undefined
Specifies the ErrorPolicy to be used for this mutation.

fetchPolicy

'no-cache' | undefined
Specifies the FetchPolicy to be used for this mutation.

refetchQueries

RefetchQueriesType<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.

readyToReceiveDocument

boolean

client

ApolloClient<NormalizedCacheObject> | null
The Apollo Client instance.

document

ComponentDocument<D, V> | null
Operation document. GraphQL operation document i.e. query, subscription, or mutation. Must be a parsed GraphQL DocumentNode

context

Record<string, unknown> | undefined
Context passed to the link execution chain.

loading

boolean
Whether a request is in flight.

error

Error | ApolloError | null
Latest error

errors

readonly GraphQLError[]
Latest errors

Methods

updater

public

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.

Parameters

params

Parameters<MutationUpdaterFn<Data<D>, Variables<D, V>>>

Returns

ReturnType<MutationUpdaterFn<Data<D>, Variables<D, V>>>

mutate

public

Parameters

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