Refactor GraphQL queries in Gangguan components

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

@@ -87,7 +87,7 @@
         </p>
       </template>
       <template #title-header="{ data }">
-        <p class="text-center w-full">
+        <p class="w-full text-center">
           {{ data.column.caption }}
         </p>
       </template>
@@ -140,7 +140,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 gql from 'graphql-tag'
+import { queries } from '@/utils/graphql'
 
 const position = { of: '#data' }
 const showIndicator = ref(true)
@@ -181,59 +181,8 @@ const onSelectionChanged = ({ selectedRowsData }: any) => {
 }
 
 const data = ref<any[]>([])
-const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
-  query rekapitulasiGangguanBerdasarkanMedia(
-    $dateFrom: Date!
-    $dateTo: Date!
-    $posko: Int!
-    $idUid: Int!
-    $idUp3: Int!
-  ) {
-    rekapitulasiGangguanBerdasarkanMedia(
-      dateFrom: $dateFrom
-      dateTo: $dateTo
-      posko: $posko
-      idUid: $idUid
-      idUp3: $idUp3
-    ) {
-      media
-      total
-      tgl1
-      tgl10
-      tgl11
-      tgl12
-      tgl13
-      tgl14
-      tgl15
-      tgl16
-      tgl17
-      tgl18
-      tgl19
-      tgl2
-      tgl20
-      tgl21
-      tgl22
-      tgl23
-      tgl24
-      tgl25
-      tgl26
-      tgl27
-      tgl28
-      tgl29
-      tgl3
-      tgl30
-      tgl31
-      tgl4
-      tgl5
-      tgl6
-      tgl7
-      tgl8
-      tgl9
-    }
-  }
-`
 
-const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
+const { onResult, onError, loading, refetch } = useQuery(queries.gangguan.rekap.berdasarkanMedia, {
   dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
   dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
   posko: 0,