Skip to main content

DataQuery Component

A thin wrapper around the useDataQuery hook

Basic Usage

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

// within a React component's JSX render tree
return (
<DataQuery query={query}>
{({ loading, error, data, refetch }) => {
/* child render funtion */

Input Props

queryQueryrequiredThe Query definition describing the requested data
variablesObjectVariables to be passed to the dynamic portions of the query
onCompleteFunctionCallback function to be called on successfull completion of the query. Called with the response data as the only argument.
onErrorFunctionCallback function to be called on failure of the query. Called with the error instance as the only argument.
lazybooleanIf true, wait until refetch is called before fetching data.
Default: false

Render Function Props

calledbooleantrue if the data request has been initiated with either lazy: false or refetch() at least once
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
refetchFunctionThis function can be called to refetch the data. Any in-flight HTTP requests will automatically be aborted.
engineData EngineA reference to the DataEngine instance


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

const query = {
indicators: {
resource: 'indicators',
params: ({ count }) => ({
order: 'shortName:desc',
pageSize: count,
export const IndicatorList = ({ count }) => (
<DataQuery query={query} variables={{ count }}>
{({ loading, error, data }) => (
<h3>Indicators (first {count})</h3>
{loading && <span>...</span>}
{error && <span>{`ERROR: ${error.message}`}</span>}
{data && (
.map(ind => ind.displayName)