single API requests before recieving the data

src/components/PlayerChart.vue

@@ -179,8 +179,8 @@ export default defineComponent({
       }
     },
     players (): { [key: string]: Player } {
-      const data = this.store.getPlayerList(this.filters || {})?.data
+      const data = this.store.getPlayerList(this.filters || {})?.value.data
-      if (!data) return {}
+      if (!data) return this.store.fetchPlayers(this.filters || {}).value.data
       const cut = Object.entries(data).sort((a, b) => {
         if (a[1].kills < b[1].kills) {
           return 1

src/components/PlayerList.vue

@@ -46,7 +46,9 @@ export default defineComponent({
   computed: {
     players (): { [key: string]: Player } {
       const { player: _, ...withoutPlayer } = this.filters
-      return this.store.getPlayerList(withoutPlayer)?.data || {}
+      const data = this.store.getPlayerList(withoutPlayer)?.value.data
+      if (!data) return this.store.fetchPlayers(withoutPlayer).value.data
+      return data
     }
   },
   watch: {

src/components/WeaponChart.vue

@@ -137,11 +137,8 @@ export default defineComponent({
     },
     weapons (): { [key: string]: Weapon } {
       const { weapon: _, ...withoutWeapon } = this.filters || {}
-      const data = this.store.getWeaponList(withoutWeapon)?.data
+      const data = this.store.getWeaponList(withoutWeapon)?.value.data
-      if (!data) {
+      if (!data) return this.store.fetchWeapons(withoutWeapon).value.data
-        this.store.fetchWeapons(withoutWeapon)
-        return {}
-      }
       return data
     },
     sortedWeaponList (): string[] {

src/stores/kill.ts

@@ -1,10 +1,22 @@
 import { defineStore } from 'pinia'
 import * as assert from 'assert'
+import { Ref, ref } from 'vue'
 
-function removeNullEntries (a:any) {
+export interface Filters {
-  return Object.fromEntries(Object.entries(a).filter(e => e[1] !== undefined && e[1] !== null))
+  server?: string;
+  player?: string;
+  weapon?: string;
+  host?: string;
+  map?: string;
+  gamemode?: string;
 }
-function objectEqual (a:any, b:any) {
+
+function removeNullEntries (a: Filters) {
+  return Object.fromEntries(
+    Object.entries(a).filter((e) => e[1] !== undefined && e[1] !== null)
+  )
+}
+function objectEqual (a: Filters, b: Filters) {
   try {
     a = removeNullEntries(a)
     b = removeNullEntries(b)
@@ -14,14 +26,6 @@ function objectEqual (a:any, b:any) {
     return false
   }
 }
-export interface Filters {
-  server?: string;
-  player?: string;
-  weapon?: string;
-  host?: string;
-  map?: string;
-  gamemode?: string;
-}
 
 export interface Kill {
   deaths: number;
@@ -53,11 +57,11 @@ export interface Server extends Kill {
 
 // define your typings for the store state
 export interface State {
-  servers: KillData<Server>[];
+  servers: Ref<KillData<Server>>[];
-  players: KillData<Player>[];
+  players: Ref<KillData<Player>>[];
-  weapons: KillData<Weapon>[];
+  weapons: Ref<KillData<Weapon>>[];
-  maps: KillData<Kill>[];
+  maps: Ref<KillData<Kill>>[];
-  gamemodes: KillData<Kill>[];
+  gamemodes: Ref<KillData<Kill>>[];
   hosts: { [key: number]: string };
 }
 
@@ -71,43 +75,63 @@ export const useKillStore = defineStore('kill', {
     hosts: {}
   }),
   getters: {
-    getPlayerList: (state) => (filters: Filters) => state.players.find((e) => objectEqual(e.filter, filters)),
+    getPlayerList: (state) => (filters: Filters) => {
-    getWeaponList: (state) => (filters: Filters) => state.weapons.find((e) => objectEqual(e.filter, filters)),
+      return state.players.find((e) => objectEqual(e.value.filter, filters))
-    getServerList: (state) => (filters: Filters) => state.servers.find((e) => objectEqual(e.filter, filters))
+    },
+    getWeaponList: (state) => (filters: Filters) =>
+      state.weapons.find((e) => objectEqual(e.value.filter, filters)),
+    getServerList: (state) => (filters: Filters) =>
+      state.servers.find((e) => objectEqual(e.value.filter, filters))
   },
   actions: {
-    async fetchPlayers (filter: Filters) {
+    fetchPlayers (filter: Filters) {
       filter = removeNullEntries(filter)
-      const response = await fetch(
+      let entry = this.players.find((e) => objectEqual(e.value.filter, filter))
+      if (entry === undefined) {
+        entry = ref({ filter, data: {} })
+        this.players.push(entry)
+      }
+      fetch(
         'https://tone.sleepycat.date/v2/client/players?' +
           new URLSearchParams(filter as Record<keyof Filters, string>)
-      )
+      ).then(async response => {
-      const data = await response.json()
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const entry = this.players.find((e) => objectEqual(e.filter, filter))
+        entry!.value.data = await response.json()
-      if (!entry) return this.players.push({ filter, data })
+      })
-      entry.data = data
+      return entry
     },
-    async fetchWeapons (filter: Filters) {
+    fetchWeapons (filter: Filters) {
       filter = removeNullEntries(filter)
-      const response = await fetch(
+      let entry = this.weapons.find((e) => objectEqual(e.value.filter, filter))
+      if (!entry) {
+        entry = ref({ filter, data: {} })
+        this.weapons.push(entry)
+      }
+
+      fetch(
         'https://tone.sleepycat.date/v2/client/weapons?' +
           new URLSearchParams(filter as Record<keyof Filters, string>)
-      )
+      ).then(async response => {
-      const data = await response.json()
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const entry = this.weapons.find((e) => objectEqual(e.filter, filter))
+        entry!.value.data = await response.json()
-      if (!entry) return this.weapons.push({ filter, data })
+      })
-      entry.data = data
+      return entry
     },
-    async fetchServers (filter: Filters) {
+    fetchServers (filter: Filters) {
       filter = removeNullEntries(filter)
-      const response = await fetch(
+      let entry = this.servers.find((e) => objectEqual(e.value.filter, filter))
+      if (!entry) {
+        entry = ref({ filter, data: {} })
+        this.servers.push(entry)
+      }
+      fetch(
         'https://tone.sleepycat.date/v2/client/servers?' +
           new URLSearchParams(filter as Record<keyof Filters, string>)
-      )
+      ).then(async response => {
-      const data = await response.json()
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const entry = this.servers.find((e) => objectEqual(e.filter, filter))
+        entry!.value.data = await response.json()
-      if (!entry) return this.servers.push({ filter, data })
+      })
-      entry.data = data
+      return entry
     }
   }
 })

src/views/PlayerView.vue

@@ -58,12 +58,10 @@ export default defineComponent({
   },
   computed: {
     servers (): { [key: string]: Server } {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { server: _, player: _1, ...withoutServer } = this.filters
-      const data = this.store.getServerList(withoutServer)?.data
+      const data = this.store.getServerList(withoutServer)?.value.data
-      if (!data) {
+      if (!data) return this.store.fetchServers(withoutServer).value.data
-        this.store.fetchServers(withoutServer)
-        return {}
-      }
       return data
     },
     groupedServers () {
@@ -75,21 +73,17 @@ export default defineComponent({
       return hosts
     },
     weapons (): { [key: string]: Weapon } {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { weapon: _, player: _1, ...withoutWeapons } = this.filters
-      const data = this.store.getWeaponList(withoutWeapons)?.data
+      const data = this.store.getWeaponList(withoutWeapons)?.value.data
-      if (!data) {
+      if (!data) return this.store.fetchWeapons(withoutWeapons).value.data
-        this.store.fetchWeapons(withoutWeapons)
-        return {}
-      }
       return data
     },
     players (): { [key: string]: Player } {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { player: _, ...withoutPlayers } = this.filters
-      const data = this.store.getPlayerList(withoutPlayers)?.data
+      const data = this.store.getPlayerList(withoutPlayers)?.value.data
-      if (!data) {
+      if (!data) return this.store.fetchPlayers(withoutPlayers).value.data
-        this.store.fetchPlayers(withoutPlayers)
-        return {}
-      }
       return data
     },
     sortedWeaponList (): string[] {