fix(types): improve useDataQuery types

docs/hooks/useDataQuery.md

@@ -73,6 +73,51 @@ export const IndicatorList = () => {
 }
 ```
 
+### Typescript
+
+```tsx
+import React from 'react'
+import { useDataQuery, PaginatedQueryResult } from '@dhis2/app-runtime'
+import { CircularLoader } from '@dhis2/ui'
+
+const query = {
+    dataElements: {
+        resource: 'dataElements',
+        params: {
+            fields: 'id,displayName',
+        },
+        pageSize: 10,
+    },
+}
+
+type DataElementsResult = PaginatedQueryResult<{
+    dataElements: {
+        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.

services/data/src/engine/DataEngine.test.ts

@@ -15,6 +15,12 @@ const mockMutation: Mutation = {
     data: {},
 }
 
+type ResultData = {
+    type: string
+    resource: string
+    answer: number
+}
+
 const mockLink: DataEngineLink = {
     executeResourceQuery: jest.fn(
         async (type: FetchType, query: ResolvedResourceQuery) => {
@@ -81,11 +87,19 @@ describe('DataEngine', () => {
 
     it('Should call multilple queries in parallel', async () => {
         const engine = new DataEngine(mockLink)
-        const result = await engine.query({
+
+        type Result = {
+            test: ResultData
+            test2: ResultData
+            test3: ResultData
+        }
+        const q = {
             test: { resource: 'test' },
             test2: { resource: 'test2' },
             test3: { resource: 'test3' },
-        })
+        }
+        const result = await engine.query<Result>(q)
+
         expect(mockLink.executeResourceQuery).toHaveBeenCalledTimes(3)
         expect(result).toMatchObject({
             test: {
@@ -107,18 +121,24 @@ describe('DataEngine', () => {
     })
 
     it('Should call onComplete callback only once for multiple-query method', async () => {
+        type Result = {
+            test: ResultData
+            test2: ResultData
+            test3: ResultData
+        }
         const options = {
             onComplete: jest.fn(),
         }
         const engine = new DataEngine(mockLink)
-        await engine.query(
+        await engine.query<Result>(
             {
                 test: { resource: 'test' },
                 test2: { resource: 'test2' },
                 test3: { resource: 'test3' },
             },
             options
         )
+
         expect(mockLink.executeResourceQuery).toHaveBeenCalledTimes(3)
         expect(options.onComplete).toHaveBeenCalledTimes(1)
     })

services/data/src/engine/DataEngine.ts

@@ -6,12 +6,12 @@ import {
 } from './helpers/validate'
 import { DataEngineLink } from './types/DataEngineLink'
 import { QueryExecuteOptions } from './types/ExecuteOptions'
-import { JsonMap, JsonValue } from './types/JsonValue'
+import { JsonValue } from './types/JsonValue'
 import { Mutation } from './types/Mutation'
-import { Query } from './types/Query'
+import { Query, QueryResultData } from './types/Query'
 
 const reduceResponses = (responses: JsonValue[], names: string[]) =>
-    responses.reduce<JsonMap>((out, response, idx) => {
+    responses.reduce<any>((out, response, idx) => {
         out[names[idx]] = response
         return out
     }, {})
@@ -22,15 +22,18 @@ export class DataEngine {
         this.link = link
     }
 
-    public query(
-        query: Query,
+    public query<
+        TQueryResultData extends QueryResultData<TQuery>,
+        TQuery extends Query = Query
+    >(
+        query: TQuery,
         {
             variables = {},
             signal,
             onComplete,
             onError,
-        }: QueryExecuteOptions = {}
-    ): Promise<JsonMap> {
+        }: QueryExecuteOptions<TQueryResultData> = {}
+    ): Promise<TQueryResultData> {
         const names = Object.keys(query)
         const queries = names
             .map((name) => query[name])
@@ -46,7 +49,7 @@ export class DataEngine {
             })
         )
             .then((results) => {
-                const data = reduceResponses(results, names)
+                const data: TQueryResultData = reduceResponses(results, names)
                 onComplete && onComplete(data)
                 return data
             })

services/data/src/engine/index.ts

@@ -7,3 +7,4 @@ export * from './types/Mutation'
 export * from './types/PossiblyDynamic'
 export * from './types/Query'
 export * from './types/QueryParameters'
+export * from './types/Pager'

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

@@ -1,5 +1,5 @@
 import { FetchError } from './FetchError'
-import { QueryVariables } from './Query'
+import { QueryVariables, QueryResultData, QueryResult } from './Query'
 
 export type FetchType =
     | 'create'
@@ -8,9 +8,11 @@ export type FetchType =
     | 'json-patch'
     | 'replace'
     | 'delete'
-export interface QueryExecuteOptions {
+export interface QueryExecuteOptions<
+    TQueryResultData extends QueryResultData = QueryResult
+> {
     variables?: QueryVariables
     signal?: AbortSignal
-    onComplete?: (data: any) => void
+    onComplete?: (data: TQueryResultData) => void
     onError?: (error: FetchError) => void
 }

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

@@ -0,0 +1,15 @@
+import { QueryResult } from './Query'
+
+export type Pager = {
+    page: number
+    total: number
+    pageSize: number
+    pageCount: number
+    nextPage: string
+}
+
+export type PaginatedData<T> = T & { pager: Pager }
+
+export type PaginatedQueryResult<TQueryResult extends QueryResult> = {
+    [K in keyof TQueryResult]: PaginatedData<TQueryResult[K]>
+}

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

@@ -1,5 +1,4 @@
 import { FetchError } from './FetchError'
-import { JsonMap } from './JsonValue'
 import { PossiblyDynamic } from './PossiblyDynamic'
 import { QueryParameters } from './QueryParameters'
 
@@ -19,7 +18,11 @@ export interface ResolvedResourceQuery extends ResourceQuery {
 }
 
 export type Query = Record<string, ResourceQuery>
-export type QueryResult = JsonMap
+export type QueryResult = any
+
+export type QueryResultData<TQuery extends Query = Query> = {
+    [K in keyof TQuery]: QueryResult
+}
 
 export interface QueryOptions {
     variables?: QueryVariables

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

@@ -3,11 +3,11 @@ import { useQuery, setLogger } from 'react-query'
 import type {
     Query,
     QueryOptions,
-    QueryResult,
     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'
@@ -33,16 +33,19 @@ type QueryState = {
     refetchCallback?: (data: any) => void
 }
 
-export const useDataQuery = <TQueryResult = QueryResult>(
-    query: Query,
+export const useDataQuery = <
+    TQueryResultData extends QueryResultData<TQuery>,
+    TQuery extends Query = Query
+>(
+    query: TQuery,
     {
         onComplete: userOnSuccess,
         onError: userOnError,
         variables: initialVariables = {},
         lazy: initialLazy = false,
     }: QueryOptions = {}
-): QueryRenderInput<TQueryResult> => {
-    const [staticQuery] = useStaticInput<Query>(query, {
+): DataQueryResult<TQueryResultData> => {
+    const [staticQuery] = useStaticInput<TQuery>(query, {
         warn: true,
         name: 'query',
     })

services/data/src/types.ts

@@ -54,6 +54,8 @@ export interface QueryRenderInput<TQueryResult = QueryResult>
     refetch: QueryRefetchFunction
 }
 
+export type DataQueryResult<TQueryResult> = QueryRenderInput<TQueryResult>
+
 export interface MutationState {
     engine: DataEngine
     called: boolean