Refactor data retrieval in filterData function

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

@@ -450,7 +450,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 { exportToPDF } from '@/report/Gangguan/Rekap/RGangguan_JenisGangguan'
 import { apolloClient } from '@/utils/api/api.graphql'
@@ -553,11 +553,11 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   dataSubSelected.value = data
 }
 
-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.jenisGangguan, {
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -567,67 +567,68 @@ 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.rekapitulasiPerJenisGangguan].map(
-        (item: any, index: number) => {
-          return {
-            no: ++index,
-            sub_kelompok: item.sub_kelompok,
-            kode: item.kode,
-            jenisGangguan: item.tipe_permasalahan,
-            laporan: {
-              total: item.total,
-              sudahSelesai: {
-                jml: item.total_selesai,
-                persen: item.persen_selesai
-              },
-              belumSelesai: {
-                jml: item.total_inproses,
-                persen: item.persen_inproses
-              }
-            },
-            responseTime: {
-              menit: {
-                total: item.total_durasi_response,
-                rataRata: item.avg_durasi_response,
-                max: item.max_durasi_response,
-                min: item.min_durasi_response
-              },
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.jenisGangguan, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = [...result.data.data.rekapitulasiPerJenisGangguan].map(
+          (item: any, index: number) => {
+            return {
+              no: ++index,
+              sub_kelompok: item.sub_kelompok,
+              kode: item.kode,
+              jenisGangguan: item.tipe_permasalahan,
               laporan: {
-                lebihSla: item.total_diatas_sla_response,
-                kurangSla: item.total_dibawah_sla_response
-              }
-            },
-            recoveryTime: {
-              menit: {
-                total: item.total_durasi_recovery,
-                rataRata: item.avg_durasi_recovery,
-                max: item.max_durasi_recovery,
-                min: item.min_durasi_recovery
+                total: item.total,
+                sudahSelesai: {
+                  jml: item.total_selesai,
+                  persen: item.persen_selesai
+                },
+                belumSelesai: {
+                  jml: item.total_inproses,
+                  persen: item.persen_inproses
+                }
               },
-              laporan: {
-                lebihSla: item.total_diatas_sla_recovery,
-                kurangSla: item.total_dibawah_sla_recovery
+              responseTime: {
+                menit: {
+                  total: item.total_durasi_response,
+                  rataRata: item.avg_durasi_response,
+                  max: item.max_durasi_response,
+                  min: item.min_durasi_response
+                },
+                laporan: {
+                  lebihSla: item.total_diatas_sla_response,
+                  kurangSla: item.total_dibawah_sla_response
+                }
+              },
+              recoveryTime: {
+                menit: {
+                  total: item.total_durasi_recovery,
+                  rataRata: item.avg_durasi_recovery,
+                  max: item.max_durasi_recovery,
+                  min: item.min_durasi_recovery
+                },
+                laporan: {
+                  lebihSla: item.total_diatas_sla_recovery,
+                  kurangSla: item.total_dibawah_sla_recovery
+                }
               }
             }
           }
-        }
-      )
-    }
-
-    reportMeta.value = filters.value
-  })
-
-  onError((queryError) => {
-    console.log(queryError)
-  })
-
-  watch(loading, (value) => {
-    loadingData.value = value
-  })
+        )
+      } else {
+        data.value = []
+      }
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 
 const filters = ref()