fix(types): improve useDataQuery types

docs/hooks/useDataQuery.md

@@ -73,6 +73,57 @@ export const IndicatorList = () => {
 }
 ```
 
+### Typescript
+
+```tsx
+import React from 'react'
+import { useDataQuery } from '@dhis2/app-runtime'
+import { CircularLoader } from '@dhis2/ui'
+
+const query = {
+    dataElements: {
+        resource: 'dataElements',
+        params: {
+            fields: 'id,displayName',
+        },
+        pageSize: 10,
+    },
+}
+
+type DataElementsResult = {
+    dataElements: {
+        pager: {
+            page: number
+            total: number
+            pageSize: number
+            pageCount: number
+            nextPage: string
+        }
+        dataElements: {
+            id: string
+            displayName: string
+        }[]
+    }
+}
+export const DataElementList = () => {
+    const { loading, error, data } = useDataQuery<DataElementsResult>(query)
+    return (
+        <div>
+            <h3>Data elements (first 10)</h3>
+            {loading && <CircularLoader />}
+            {error && <span>{`ERROR: ${error.message}`}</span>}
+            {data && (
+                <pre>
+                    {data.dataElements.dataElements
+                        .map((de) => de.displayName)
+                        .join('\n')}
+                </pre>
+            )}
+        </div>
+    )
+}
+```
+
 ### Dynamic Query
 
 This example is similar to the previous one but builds on top of it by showing how to fetch new pages of data using dynamic variables. A similar approach can be used implement dynamic filtering, ordering, etc.
@@ -110,7 +161,7 @@ export const IndicatorList = () => {
         <div>
             <h3>Indicators (paginated)</h3>
             {loading && <CircularLoader />}
-            {error && <span>{`ERROR: ${error.message}`}</span>}
+            {error && <spSan>{`ERROR: ${error.message}`}</span>}
             {data && (
                 <pre>
                     {data.indicators.indicators

services/data/src/engine/types/Query.ts

@@ -18,9 +18,16 @@ export interface ResolvedResourceQuery extends ResourceQuery {
     params?: QueryParameters
 }
 
-export type Query = Record<string, ResourceQuery>
+export type Query<TQueryResult extends QueryResult = QueryResult> = Record<
+    keyof TQueryResult,
+    ResourceQuery
+>
 export type QueryResult = JsonMap
 
+export type QueryResultData<TQuery extends Query> = {
+    [K in keyof TQuery]: QueryResult
+}
+
 export interface QueryOptions {
     variables?: QueryVariables
     onComplete?: (data: QueryResult) => void

services/data/src/react/hooks/useDataQuery.ts

@@ -1,8 +1,13 @@
 import { useState, useRef, useCallback, useDebugValue } from 'react'
 import { useQuery, setLogger } from 'react-query'
-import type { Query, QueryOptions, QueryVariables } from '../../engine'
+import type {
+    Query,
+    QueryOptions,
+    QueryVariables,
+    QueryResultData,
+} from '../../engine'
 import type { FetchError } from '../../engine/types/FetchError'
-import type { QueryRenderInput, QueryRefetchFunction } from '../../types'
+import type { DataQueryResult, QueryRefetchFunction } from '../../types'
 import { mergeAndCompareVariables } from './mergeAndCompareVariables'
 import { useDataEngine } from './useDataEngine'
 import { useStaticInput } from './useStaticInput'
@@ -28,15 +33,18 @@ type QueryState = {
     refetchCallback?: (data: any) => void
 }
 
-export const useDataQuery = (
-    query: Query,
+export const useDataQuery = <
+    TQueryResultData extends QueryResultData<TQuery>,
+    TQuery extends Query<TQueryResultData> = Query<TQueryResultData>
+>(
+    query: TQuery,
     {
         onComplete: userOnSuccess,
         onError: userOnError,
         variables: initialVariables = {},
         lazy: initialLazy = false,
     }: QueryOptions = {}
-): QueryRenderInput => {
+): DataQueryResult<TQueryResultData> => {
     const [staticQuery] = useStaticInput<Query>(query, {
         warn: true,
         name: 'query',

services/data/src/types.ts

@@ -40,19 +40,22 @@ export interface ExecuteHookResult<ReturnType> {
     data?: ReturnType
 }
 
-export interface QueryState {
+export interface QueryState<TQueryResult> {
     called: boolean
     loading: boolean
     fetching: boolean
     error?: FetchError
-    data?: QueryResult
+    data?: TQueryResult
 }
 
-export interface QueryRenderInput extends QueryState {
+export interface QueryRenderInput<TQueryResult = QueryResult>
+    extends QueryState<TQueryResult> {
     engine: DataEngine
     refetch: QueryRefetchFunction
 }
 
+export type DataQueryResult<TQueryResult> = QueryRenderInput<TQueryResult>
+
 export interface MutationState {
     engine: DataEngine
     called: boolean