Refactor data retrieval in filterData function

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

@@ -619,7 +619,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 { formatWaktu } from '@/components/Form/FiltersType/reference'
 import vue3starRatings from 'vue3-star-ratings'
@@ -650,8 +650,7 @@ const reportMeta = ref({
   periode: ''
 })
 
-const getDetail = () => {
-  loadingSubData.value = true
+const getDetail = async () => {
   const dateValue = filters.value.periode.split(' s/d ')
   const ref = dataSelected.value
 
@@ -671,24 +670,23 @@ const getDetail = () => {
     media: ref?.media ? ref?.media : ''
   }
 
-  const { onResult, onError, loading, refetch } = useQuery(
-    queries.gangguan.rekap.gangguanAllDetail,
-    query
-  )
+  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 = []
+      }
 
-  onResult((queryResult) => {
-    if (queryResult.data != undefined) {
-      dataSub.value = queryResult.data.detailGangguan
-    }
-  })
-
-  onError((error) => {
-    console.log(error)
-  })
-
-  watch(loading, (value) => {
-    loadingSubData.value = value
-  })
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingSubData.value = false
+    })
 }
 
 const dataGridRef = ref<DxDataGrid | null>(null)
@@ -743,20 +741,11 @@ const onDataSubSelectionChanged = ({ selectedRowsData }: any) => {
   console.log(dataSubSelected)
 }
 
-const { onResult, onError, loading, refetch } = useQuery(
-  queries.gangguan.rekap.gangguanRatingPerRegu,
-  {
-    dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
-    dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
-    posko: '',
-    idUid: 0,
-    idUp3: 0
-  }
-)
-const filterData = (params: any) => {
+const filterData = async (params: any) => {
   const dateValue = params.periode.split(' s/d ')
   const { posko, uid, up3 } = params
-  refetch({
+
+  const query = {
     dateFrom: dateValue[0]
       ? dateValue[0].split('-').reverse().join('-')
       : new Date().toISOString().slice(0, 10),
@@ -766,27 +755,25 @@ 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) {
-      // const refs = [...queryResult.data.rekapitulasiGangguanRatingPerRegu].sort((a: any, b: any) =>
-      //   a.nama_up3.localeCompare(b.nama_up3)
-      // )
-      // data.value = refs.map((ref: any, index: number) => {
-      //   return {
-      //     ...ref,
-      //     number: index + 1
-      //   }
-      // })
-      data.value = queryResult.data.rekapitulasiGangguanRatingPerRegu
-    }
+  }
 
-    reportMeta.value = filters.value
-    console.log(queryResult.data)
-  })
-  onError((error) => {
-    console.log(error)
-  })
+  loadingData.value = true
+  await requestGraphQl(queries.gangguan.rekap.gangguanRatingPerRegu, query)
+    .then((result) => {
+      if (result.data.data != undefined) {
+        data.value = result.data.data.rekapitulasiGangguanRatingPerRegu
+      } else {
+        data.value = []
+      }
+
+      reportMeta.value = filters.value
+    })
+    .catch((err) => {
+      console.error(err)
+    })
+    .finally(() => {
+      loadingData.value = false
+    })
 }
 const filters = ref()
 onMounted(() => {