refactor: migrate data fetch to tanstack query

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@heroicons/vue": "^2.2.0",
     "@tailwindcss/vite": "^4.0.0-beta.6",
+    "@tanstack/vue-query": "^5.62.8",
     "chart.js": "^4.4.7",
     "pinia": "^2.2.6",
     "tailwindcss": "^4.0.0-beta.6",

src/components/CountriesBarChart.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import { sortData } from "../utils/sortData";
+import { useSortData } from "../utils/useSortData";
 import { countryCodeToName } from "../utils/constants";
 import BarChart from "./BarChart.vue";
 
@@ -21,7 +21,7 @@ const filteredData = computed(() => {
 });
 
 const sortedData = computed(() => {
-  const fullData = sortData(
+  const fullData = useSortData(
     filteredData.value,
     (item) => item.countrycode,
     props.sortOrder || "desc",

src/components/CountriesTable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import Table from "./Table.vue";
-import { sortData } from "../utils/sortData";
+import { useSortData } from "../utils/useSortData";
 import { countryCodeToName } from "../utils/constants";
 
 interface DataItem {
@@ -20,7 +20,7 @@ const filteredData = computed(() => {
 });
 
 const groupedByCountry = computed(() => {
-  const { labels, dataset } = sortData(
+  const { labels, dataset } = useSortData(
     filteredData.value,
     (item) => item.countrycode,
     "desc",

src/components/GamesBarChart.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import BarChart from "./BarChart.vue";
-import { sortData } from "../utils/sortData";
+import { useSortData } from "../utils/useSortData";
 
 interface DataItem {
   product: string;
@@ -12,7 +12,7 @@ const props = defineProps<{
 }>();
 
 const sortedData = computed(() => {
-  const fullData = sortData(props.data, (item) => item.product, "desc");
+  const fullData = useSortData(props.data, (item) => item.product, "desc");
   const top10Labels = fullData.labels.slice(0, 10);
   const top10Dataset = fullData.dataset.slice(0, 10);
 

src/components/GamesTable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import Table from "./Table.vue";
-import { sortData } from "../utils/sortData";
+import { useSortData } from "../utils/useSortData";
 
 interface DataItem {
   product: string;
@@ -10,7 +10,7 @@ interface DataItem {
 const props = defineProps<{ data: DataItem[] }>();
 
 const groupedByGame = computed(() => {
-  const { labels, dataset } = sortData(
+  const { labels, dataset } = useSortData(
     props.data,
     (item) => item.product,
     "desc",

src/main.ts

@@ -1,11 +1,13 @@
-import { createApp } from "vue";
+import { VueQueryPlugin } from "@tanstack/vue-query";
 import { createPinia } from "pinia";
+import { createApp } from "vue";
 import App from "./App.vue";
-import router from "./router";
 import "./assets/main.css";
+import router from "./router";
 
 const app = createApp(App);
 
+app.use(VueQueryPlugin);
 app.use(createPinia());
 app.use(router);
 

src/utils/useFetchData.ts

@@ -0,0 +1,12 @@
+import { useQuery } from "@tanstack/vue-query";
+
+export const useFetchData = (url: string) => {
+  return useQuery({
+    queryKey: [url],
+    queryFn: async () => {
+      const response = await fetch(url);
+      if (!response.ok) throw new Error("Failed to fetch data");
+      return response.json();
+    },
+  });
+};

src/utils/sortData.ts → src/utils/useSortData.ts

@@ -3,7 +3,7 @@ export interface SortedData {
   dataset: number[];
 }
 
-export function sortData<T>(
+export function useSortData<T>(
   data: T[],
   keyExtractor: (item: T) => string,
   order: "asc" | "desc" = "asc",

src/views/Home.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
-import { useFetchData } from "../utils/fetchData";
+import { ref } from "vue";
+import { useFetchData } from "../utils/useFetchData";
 import { DATASET_URL } from "../utils/constants";
 import GameSelector from "../components/GameSelector.vue";
 import CountriesBarChart from "../components/CountriesBarChart.vue";
@@ -9,22 +9,20 @@ import GamesTable from "../components/GamesTable.vue";
 import CountriesTable from "../components/CountriesTable.vue";
 import GamesLineGraph from "../components/GamesLineGraph.vue";
 
-const { data, loading, fetchData } = useFetchData(DATASET_URL);
+const { data, isLoading } = useFetchData(DATASET_URL);
 const selectedGame = ref("");
 
 const handleGameSelection = (game: string) => {
   selectedGame.value = game;
 };
-
-onMounted(fetchData);
 </script>
 
 <template>
   <main class="mx-auto max-w-6xl space-y-8 p-6">
     <section
       class="rounded-2xl bg-blue-50 p-4 shadow-md dark:bg-slate-900 dark:text-gray-100 dark:shadow-inner"
     >
-      <div v-if="loading" class="flex h-16 items-center justify-center">
+      <div v-if="isLoading" class="flex h-16 items-center justify-center">
         <div
           class="h-8 w-8 animate-spin rounded-full border-t-4 border-solid border-blue-500"
         ></div>
@@ -46,7 +44,7 @@ onMounted(fetchData);
         v-if="!selectedGame"
         class="rounded-2xl bg-blue-50 p-4 shadow-md dark:bg-slate-900 dark:text-gray-100 dark:shadow-inner"
       >
-        <div v-if="loading" class="flex h-64 items-center justify-center">
+        <div v-if="isLoading" class="flex h-64 items-center justify-center">
           <div
             class="h-12 w-12 animate-spin rounded-full border-t-4 border-solid border-blue-500"
           ></div>
@@ -58,7 +56,7 @@ onMounted(fetchData);
         class="rounded-2xl bg-blue-50 p-4 shadow-md dark:bg-slate-900 dark:text-gray-100 dark:shadow-inner"
         :class="selectedGame ? 'lg:col-span-2' : ''"
       >
-        <div v-if="loading" class="flex h-64 items-center justify-center">
+        <div v-if="isLoading" class="flex h-64 items-center justify-center">
           <div
             class="h-12 w-12 animate-spin rounded-full border-t-4 border-solid border-blue-500"
           ></div>
@@ -72,7 +70,7 @@ onMounted(fetchData);
         v-if="!selectedGame"
         class="rounded-2xl bg-blue-50 p-4 shadow-md dark:bg-slate-900 dark:text-gray-100 dark:shadow-inner"
       >
-        <div v-if="loading" class="flex h-64 items-center justify-center">
+        <div v-if="isLoading" class="flex h-64 items-center justify-center">
           <div
             class="h-12 w-12 animate-spin rounded-full border-t-4 border-solid border-blue-500"
           ></div>
@@ -83,7 +81,7 @@ onMounted(fetchData);
       <section
         class="rounded-2xl bg-blue-50 p-4 shadow-md dark:bg-slate-900 dark:text-gray-100 dark:shadow-inner"
       >
-        <div v-if="loading" class="flex h-64 items-center justify-center">
+        <div v-if="isLoading" class="flex h-64 items-center justify-center">
           <div
             class="h-12 w-12 animate-spin rounded-full border-t-4 border-solid border-blue-500"
           ></div>
@@ -95,7 +93,7 @@ onMounted(fetchData);
         v-if="selectedGame"
         class="rounded-2xl bg-blue-50 p-4 shadow-md dark:bg-slate-900 dark:text-gray-100 dark:shadow-inner"
       >
-        <div v-if="loading" class="flex h-64 items-center justify-center">
+        <div v-if="isLoading" class="flex h-64 items-center justify-center">
           <div
             class="h-12 w-12 animate-spin rounded-full border-t-4 border-solid border-blue-500"
           ></div>