diff --git a/cli/config/init.entrypoint.js b/cli/config/init.entrypoint.js
index c8ed94cd..55970a28 100644
--- a/cli/config/init.entrypoint.js
+++ b/cli/config/init.entrypoint.js
@@ -1,4 +1,4 @@
-import { DataQuery } from '@dhis2/app-runtime'
+import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import React from 'react'
 import classes from './App.module.css'
@@ -9,27 +9,23 @@ const query = {
     },
 }
 
-const MyApp = () => (
-    <div className={classes.container}>
-        <DataQuery query={query}>
-            {({ error, loading, data }) => {
-                if (error) {
-                    return <span>ERROR</span>
-                }
-                if (loading) {
-                    return <span>...</span>
-                }
-                return (
-                    <>
-                        <h1>
-                            {i18n.t('Hello {{name}}', { name: data.me.name })}
-                        </h1>
-                        <h3>{i18n.t('Welcome to DHIS2!')}</h3>
-                    </>
-                )
-            }}
-        </DataQuery>
-    </div>
-)
+const MyApp = () => {
+    const { error, loading, data } = useDataQuery(query)
+
+    if (error) {
+        return <span>{i18n.t('ERROR')}</span>
+    }
+
+    if (loading) {
+        return <span>{i18n.t('Loading...')}</span>
+    }
+
+    return (
+        <div className={classes.container}>
+            <h1>{i18n.t('Hello {{name}}', { name: data?.me?.name })}</h1>
+            <h3>{i18n.t('Welcome to DHIS2!')}</h3>
+        </div>
+    )
+}
 
 export default MyApp