From 058dfb676f061184692a845a7bf16bbf0ba65ee8 Mon Sep 17 00:00:00 2001
From: Sam Hillier <sam@hillier.uk>
Date: Wed, 18 Dec 2024 18:37:33 +0000
Subject: [PATCH] refactor: migrate data fetch to tanstack query

---
 package-lock.json                         | 58 +++++++++++++++++++++++
 package.json                              |  1 +
 src/components/CountriesBarChart.vue      |  4 +-
 src/components/CountriesTable.vue         |  4 +-
 src/components/GamesBarChart.vue          |  4 +-
 src/components/GamesTable.vue             |  4 +-
 src/main.ts                               |  6 ++-
 src/utils/fetchData.ts                    | 19 --------
 src/utils/useFetchData.ts                 | 12 +++++
 src/utils/{sortData.ts => useSortData.ts} |  2 +-
 src/views/Home.vue                        | 20 ++++----
 11 files changed, 93 insertions(+), 41 deletions(-)
 delete mode 100644 src/utils/fetchData.ts
 create mode 100644 src/utils/useFetchData.ts
 rename src/utils/{sortData.ts => useSortData.ts} (94%)

diff --git a/package-lock.json b/package-lock.json
index bfd225c..9259c67 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,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",
@@ -1512,6 +1513,57 @@
         "vite": "^5.2.0 || ^6"
       }
     },
+    "node_modules/@tanstack/match-sorter-utils": {
+      "version": "8.19.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
+      "integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
+      "license": "MIT",
+      "dependencies": {
+        "remove-accents": "0.5.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.62.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.62.8.tgz",
+      "integrity": "sha512-4fV31vDsUyvNGrKIOUNPrZztoyL187bThnoQOvAXEVlZbSiuPONpfx53634MKKdvsDir5NyOGm80ShFaoHS/mw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-query": {
+      "version": "5.62.8",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.62.8.tgz",
+      "integrity": "sha512-kOKTV6tu5iffq5/hOUpbohfwWH8nGhbCc9wf4UvihlhROILsWLrIPA5fOvdvc5VyozwKokdrubSdEukPZxpwXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/match-sorter-utils": "^8.19.4",
+        "@tanstack/query-core": "5.62.8",
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.1.2",
+        "vue": "^2.6.0 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tsconfig/node22": {
       "version": "22.0.0",
       "resolved": "https://registry.npmjs.org/@tsconfig/node22/-/node22-22.0.0.tgz",
@@ -3667,6 +3719,12 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
+      "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
+      "license": "MIT"
+    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
diff --git a/package.json b/package.json
index 23e42b0..446fd00 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/CountriesBarChart.vue b/src/components/CountriesBarChart.vue
index 7c21072..b291a60 100644
--- a/src/components/CountriesBarChart.vue
+++ b/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",
diff --git a/src/components/CountriesTable.vue b/src/components/CountriesTable.vue
index 38f2848..a71a112 100644
--- a/src/components/CountriesTable.vue
+++ b/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",
diff --git a/src/components/GamesBarChart.vue b/src/components/GamesBarChart.vue
index 6480a4d..7624890 100644
--- a/src/components/GamesBarChart.vue
+++ b/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);
 
diff --git a/src/components/GamesTable.vue b/src/components/GamesTable.vue
index 99df7e8..b1a0f6d 100644
--- a/src/components/GamesTable.vue
+++ b/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",
diff --git a/src/main.ts b/src/main.ts
index b5fa690..701bdbd 100644
--- a/src/main.ts
+++ b/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);
 
diff --git a/src/utils/fetchData.ts b/src/utils/fetchData.ts
deleted file mode 100644
index e6bbea2..0000000
--- a/src/utils/fetchData.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { ref } from "vue";
-
-export const useFetchData = (url: string) => {
-  const data = ref([]);
-  const loading = ref(true);
-  const fetchData = async () => {
-    try {
-      loading.value = true;
-      const response = await fetch(url);
-      if (!response.ok) throw new Error("Failed to fetch data");
-      data.value = await response.json();
-    } catch (error) {
-      console.error("Error fetching data:", error);
-    } finally {
-      loading.value = false;
-    }
-  };
-  return { data, loading, fetchData };
-};
diff --git a/src/utils/useFetchData.ts b/src/utils/useFetchData.ts
new file mode 100644
index 0000000..70c4942
--- /dev/null
+++ b/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();
+    },
+  });
+};
diff --git a/src/utils/sortData.ts b/src/utils/useSortData.ts
similarity index 94%
rename from src/utils/sortData.ts
rename to src/utils/useSortData.ts
index 1a51347..03da2ff 100644
--- a/src/utils/sortData.ts
+++ b/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",
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 6d48cfc..4d4d884 100644
--- a/src/views/Home.vue
+++ b/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,14 +9,12 @@ 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>
@@ -24,7 +22,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-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>