useDataMutation Hook

Declaratively define data mutations and respond to loading / error / data state changes.

Basic Usage:

import { useDataMutation } from '@dhis2/app-runtime'

// Within a functional component body
const [mutate, { called, loading, error, data }] = useDataMutation(
    mutation,
    options
)

Input

Name	Type	Required	Description
mutation	Mutation	required	The Mutation definition describing the requested action
options	Object		An optional set of query options
options.variables	Object		Variables to be passed to the dynamic portions of the mutation
options.onComplete	Function		Callback function to be called on successfull completion of the mutation. Called with the response data as the only argument.
options.onError	Function		Callback function to be called on failure of the mutation. Called with the error instance as the only argument.
options.lazy	boolean		If false, run the mutation immediately after the component mounts. Default: true

Output

Name	Type	Description
mutate	Function	This function can be called to execute the mutation. Any in-flight HTTP requests will automatically be aborted.
called	boolean	true if the mutation has been triggered by a call to the mutate function or on component mount with lazy: false
loading	boolean	true if the data is not yet available and no error has yet been encountered
error	Error or undefined	undefined if no error has occurred, otherwise the Error which was thrown
data	QueryResult or undefined	undefined if the data is loading or an error has occurred, otherwise a map from the name of each QueryDefinition defined in the Query to the resulting data for that query
engine	Data Engine	A reference to the DataEngine instance

Example

import React from 'react'
import { useDataMutation } from '@dhis2/app-runtime'

const mutation = {
    resource: 'indicators',
    id: ({ id }) => id,
    type: 'delete',
}

export const DeleteButton = ({ indicatorId, onDelete }) => {
    const [mutate] = useDataMutation(mutation, {
        onComplete: onDelete,
        variables: {
            id: indicatorId,
        },
    })

    return <button onClick={mutate}>Delete</button>
}

info

See the Indicator component in the example app for an example of an update mutation

See the AddButton component in the example app for an example of an create mutation