Skip to main content

DataMutation Component

A thin wrapper around the useDataMutation hook

Basic Usage

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

// within a React component's JSX render tree
return (
<DataMutation mutation={mutation}>
{([mutate, { called, loading, error, data }]) => {
/* child render funtion */

Input Props

mutationMutationrequiredThe Mutation definition describing the requested operation
variablesObjectVariables to be passed to the dynamic portions of the mutation
onCompleteFunctionCallback function to be called on successfull completion of the mutation. Called with the response data as the only argument.
onErrorFunctionCallback function to be called on failure of the mutation. Called with the error instance as the only argument.
lazybooleanIf false, run the mutation immediately after the component mounts.
Default: true

Render Function Props

The render function is called whenever the state of the mutation changes. It is called with a single argument, an array with two elements:

  1. mutate - a function which can be called to trigger the mutation (for instance in an onClick callback)
  2. state - an object containing the following properties:
calledbooleantrue if the mutation has been triggered through a call to the mutate function or on component mount with lazy: false
loadingbooleantrue if the data is not yet available and no error has yet been encountered
undefined if no error has occurred, otherwise the Error which was thrown
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
engineData EngineA reference to the DataEngine instance


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

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

export const DeleteButton = ({ indicatorId, onDelete }) => (
variables={{ id: indicatorId }}
{([mutate, { called, loading }]) => (
<button disabled={called && loading} onClick={mutate}>