Refactor data retrieval in filterData function

src/components/Pages/Gangguan/Rekap/RGangguan_PerRegu.vue

@@ -881,7 +881,7 @@ import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
 import { saveAs } from 'file-saver'
 import { Workbook } from 'exceljs'
 import { useQuery } from '@vue/apollo-composable'
-import { queries } from '@/utils/api/api.graphql'
+import { queries, requestGraphQl } from '@/utils/api/api.graphql'
 import { formatNumber, formatPercentage, isNumber } from '@/utils/numbers'
 import DetailDialog from '@/components/Dialogs/DetailDialog.vue'
 import InputText from '@/components/InputText.vue'
@@ -910,8 +910,7 @@ const reportMeta = ref({
   groupBy: false
 })
 
-const getDetail = () => {
-  loadingSubData.value = true
+const getDetail = async () => {
   const dateValue = filters.value?.periode.split(' s/d ')
   const ref = dataSelected.value
 
@@ -931,24 +930,21 @@ const getDetail = () => {
     media: ref?.media ? ref?.media : ''
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
-    query
-  )
-
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+  loadingSubData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanAllDetail, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        dataSub.value = result.data.data.detailGangguan
+      } else {
+        dataSub.value = []
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -1007,11 +1003,11 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   }
 }
 
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
 
-  const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.gangguanPerRegu, {
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -1021,34 +1017,33 @@ const filterData = (params: any) => {
     posko: posko ? posko.id : 0,
     idUid: uid ? uid.id : 0,
     idUp3: up3 ? up3.id : 0
-  })
+  }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      data.value = queryResult.data.rekapitulasiGangguanPerRegu
-    }
-
-    const { posko, uid, up3 } = params
-
-    reportMeta.value = {
-      uid: { id: uid ? uid.id : 0, name: uid ? uid.name : 'Semua Unit Induk Distribusi/Wilayah' },
-      up3: {
-        id: up3 ? up3.id : 0,
-        name: up3 ? up3.name : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
-      },
-      posko: { id: posko ? posko.id : 0, name: posko ? posko.name : 'Semua Posko' },
-      periode: params.periode,
-      groupBy: params.groupBy
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanPerRegu, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiGangguanPerRegu
+      } else {
+        data.value = []
+      }
+      reportMeta.value = {
+        uid: { id: uid ? uid.id : 0, name: uid ? uid.name : 'Semua Unit Induk Distribusi/Wilayah' },
+        up3: {
+          id: up3 ? up3.id : 0,
+          name: up3 ? up3.name : 'Semua Unit Pelaksanaan Pelayanan Pelanggan'
+        },
+        posko: { id: posko ? posko.id : 0, name: posko ? posko.name : 'Semua Posko' },
+        periode: params.periode,
+        groupBy: params.groupBy
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const filters = ref({