fetch streamer/viewer data in PageHeader Component

src/App.vue

@@ -1,16 +1,9 @@
 <template>
-  <PageHeader
-    :viewer-count="viewerCount"
-    :streamer-count="streamerCount"
-  />
-  <StreamerList
-    @set_viewer_count="set_viewer_count"
-    @set_streamer_count="set_streamer_count"
-  />
+  <PageHeader />
+  <StreamerList />
 </template>
 
 <script>
-import { ref } from "vue";
 import PageHeader from "./components/PageHeader.vue";
 import StreamerList from "./components/StreamerList.vue";
 
@@ -20,23 +13,6 @@ export default {
         PageHeader,
         StreamerList,
     },
-    setup() {
-        const viewerCount = ref(0);
-        const streamerCount = ref(0);
-
-        return {
-            viewerCount,
-            streamerCount
-        };
-    },
-    methods: {
-        set_viewer_count(viewerCount) {
-            this.viewerCount = viewerCount;
-        },
-        set_streamer_count(streamerCount) {
-            this.streamerCount = streamerCount;
-        },
-    },
 };
 </script>
 

src/components/PageHeader.vue

@@ -1,19 +1,19 @@
 <template>
   <table
-    v-memo="[streamerCount, altv_server]"
+    v-memo="[streamer_count, viewer_count, altv_server]"
     class="stream_count_table"
   >
     <tr>
       <td>
         <h1
           :title="
             t('tooltips.streamer', {
-              streamer_count: streamerCount,
+              streamer_count: streamer_count,
             })
           "
         >
           {{
-            t("streamer_head", { count: streamerCount })
+            t("streamer_head", { count: streamer_count })
           }}
         </h1>
       </td>
@@ -80,9 +80,9 @@
         }}
       </td>
     </tr>
-    <tr :title="t('tooltips.viewer', { viewer: viewerCount })">
+    <tr :title="t('tooltips.viewer', { viewer: viewer_count })">
       <td>{{ t("viewers_head") }}</td>
-      <td>{{ viewerCount }}</td>
+      <td>{{ viewer_count }}</td>
     </tr>
     <tr :title="t('tooltips.refresh')">
       <td>{{ t("last_refresh_head") }}</td>
@@ -92,26 +92,29 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, onBeforeMount, ref } from "vue";
+import { onMounted, onUnmounted, onBeforeMount, ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import api from "../mixins/api.js";
-
-const props = defineProps({
-    viewerCount: {
-        type: Number,
-        default: 0
-    },
-    streamerCount: {
-        type: Number,
-        default: 0
-    },
-});
+import gql from 'graphql-tag'
+import { useQuery } from '@vue/apollo-composable'
 
 const { locale, t } = useI18n({
     useScope: 'local',
     inheritLocale: true
 });
 
+const COUNT_QUERY = gql`
+  query {
+    getViewerCount(title: "luckyv,lucky v")
+    getStreamerCount(title: "luckyv,lucky v")
+  }
+`
+
+const { result, loading, error, refetch } = useQuery(COUNT_QUERY);
+
+const streamer_count = computed(() => result.value?.getStreamerCount ?? 0);
+const viewer_count = computed(() => result.value?.getViewerCount ?? 0);
+
 const altv_server_active = ref(false);
 const last_update = ref(t("last_update_never"));
 const update_timer = ref(null);
@@ -136,6 +139,7 @@ onMounted(() => {
     if (update_timer.value == null) {
         update_timer.value = setInterval(() => {
             fetch_altv_server();
+            refetch();
         }, 120000);
     }
 });

src/components/StreamerList.vue

@@ -102,7 +102,7 @@
 </template>
 
 <script setup>
-import { ref, onUnmounted, onUpdated, onMounted, onBeforeMount, computed } from "vue";
+import { ref, onUnmounted, onMounted, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import StreamerItem from "./StreamerItem.vue";
 import useDebouncedRef from './useDebouncedRef.js';
@@ -111,8 +111,6 @@ import { useQuery } from '@vue/apollo-composable'
 
 const STREAMERS_QUERY = gql`
   query {
-    getViewerCount(title: "luckyv,lucky v")
-    getStreamerCount(title: "luckyv,lucky v")
     Streamers(title: "luckyv,lucky v") {
       user_id
       user_name
@@ -133,8 +131,6 @@ const { t } = useI18n({
 
 const { result, loading, error, refetch } = useQuery(STREAMERS_QUERY);
 
-const streamer_count = computed(() => result.value?.getStreamerCount ?? 0);
-const viewer_count = computed(() => result.value?.getViewerCount ?? 0);
 const streamers = computed(() => {
     setTimeout(() => {
         const streaming_list_update = new CustomEvent('streaming-list-update', {
@@ -228,12 +224,6 @@ onMounted(() => {
     }
 });
 
-onUpdated(() => {
-    // emit the result to the App.vue component that will pass it to the Pageheader.vue
-    emit("set_viewer_count", viewer_count.value);
-    emit("set_streamer_count", streamer_count.value);
-});
-
 onUnmounted(() => {
     clearInterval(timer.value);
     window.removeEventListener("resize", window_resize);