Pinia colada query setup

src/components/Map.vue

@@ -2,11 +2,9 @@
 import type { ApiResponse } from '@/types/Api'
 import type { BikeParking } from '@/types/Bikes'
 import { API_BASE_URL, API_LIMIT } from '@/utils/const'
-import { ref } from 'vue'
+import { useQuery } from '@pinia/colada'
-
-
-const res = ref<BikeParking[]>([])
 
+async function fetchAllBikeParkings(): Promise<BikeParking[]> {
   const firstPage = await fetch(`${API_BASE_URL}?limit=${API_LIMIT}`).then(r => r.json()) as ApiResponse
   const { total_count } = firstPage
 
@@ -17,10 +15,16 @@ const remainingPages = await Promise.all(
     )
   )
 
-res.value = [
+  return [
     ...(firstPage.results ?? []),
     ...remainingPages.flatMap(page => page.results ?? [])
   ]
+}
+
+const { state } = useQuery({
+  key: ['bike-parkings'],
+  query: fetchAllBikeParkings,
+})
 </script>
 
 <template>
@@ -31,8 +35,8 @@ res.value = [
   </header>
 
   <main class="h-screen w-screen grid place-items-center">
-    <pre>
+    <div v-if="state.status === 'pending'">Loading...</div>
-      {{ res }}
+    <div v-else-if="state.status === 'error'">Error: {{ state.error.message }}</div>
-    </pre>
+    <pre v-else>{{ state.data }}</pre>
   </main>
 </template>