fix: use vue-query; make less useless api call

polylan_submitter/src/Home.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
+import { ref, computed } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useTitle } from "@vueuse/core";
-import { gamesApiListEventGames } from "./api";
+import { useQuery } from "@tanstack/vue-query";
+import { eventGamesQuery } from "@/queries";
 import type { GamesApiListEventGamesResponse } from "./api/types.gen";
 
 interface Props {
@@ -16,8 +17,7 @@ const router = useRouter();
 const { t } = useI18n();
 useTitle(computed(() => t("home.title")));
 
-const games = ref<GamesApiListEventGamesResponse | undefined>();
-const loading = ref(true);
+const { data: games, isPending: loading } = useQuery(eventGamesQuery(props.eventPath));
 const hasSteamGames = computed(() => games.value?.some((game) => game.steam_app_id) ?? false);
 const imageErrors = ref<Set<number>>(new Set());
 
@@ -40,15 +40,6 @@ const goToGame = (game: GamesApiListEventGamesResponse[number]) => {
   router.push(`/${props.eventPath}${path}`);
 };
 
-onMounted(async () => {
-  const gamesResponse = await gamesApiListEventGames({
-    path: { event_path: props.eventPath },
-  });
-  if (gamesResponse.data) {
-    games.value = gamesResponse.data;
-  }
-  loading.value = false;
-});
 </script>
 
 <template>