Using useDataQuery hook with variable returns error

Development - Développement App Development
1

Hi,

I’m trying to retrieve events of a tracked entity instance using useDataQuery hook, I’m successfully retrieving the events but it is crashing my application with the following error:

Error: Minified React error #310; visit https://reactjs.org/docs/error-decoder.html?invariant=310 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at Xa (react-dom.production.min.js:154:314)
    at to (react-dom.production.min.js:156:22)
    at Object.useState (react-dom.production.min.js:167:280)
    at t.useState (react.production.min.js:25:281)
    at E (Details.js:48:41)
    at Za (react-dom.production.min.js:153:146)
    at Ho (react-dom.production.min.js:175:309)
    at _s (react-dom.production.min.js:263:406)
    at yl (react-dom.production.min.js:246:265)
    at ml (react-dom.production.min.js:246:194)

Below is my Details component that I’m trying to render:

import React, { useState } from 'react';
import { Button, Icon, Form } from 'semantic-ui-react'
import { Accordion, Card } from 'semantic-ui-react'
import { useDataQuery } from '@dhis2/app-runtime'

const query = {
    results: {
        resource: 'events',
        params:({trackedEntityInstance}) => ({
            ou: "QoptHf4izj7",
            program: "lJN7Imivbpc",
            trackedEntityInstance: trackedEntityInstance,
            fields: ['status', 'eventDate', 'lastUpdated'],
        }),
    },
}

const Details = ({ trackedEntity, setTrackedEntity, showTable, setShowTable }) => {
    const { loading, error, data } = useDataQuery(query, {
        variables: {
            trackedEntityInstance: trackedEntity['trackedEntityInstance']
        }
    })

  

    if (error) {
        return <span>ERROR: {error.message}</span>
    }

    if (loading) {
        return <span>Loading...</span>
    }
    
   

    console.log('Events', data.results);



    return (
        <div>
        Details
        </div>
    )
}

export default Details

Lastly, a screenshot of events retrieved is displayed in the console:
image

2

@Orly_MUGWANEZA can you please run your application in development mode (yarn start) and share the unminified error message?

1 Like