Replace swrv with built-in client.swr

ui/components.d.ts

@@ -38,7 +38,6 @@ declare module '@vue/runtime-core' {
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiCheckboxBlankCircleOutline: typeof import('~icons/mdi/checkbox-blank-circle-outline')['default']
     MdiCheckCircle: typeof import('~icons/mdi/check-circle')['default']
-    MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     MdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default']
     MdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     MdiCodeTags: typeof import('~icons/mdi/code-tags')['default']

ui/package.json

@@ -16,13 +16,12 @@
   },
   "dependencies": {
     "@servicestack/client": "^2.0.8",
-    "@servicestack/vue": "^3.0.70",
+    "@servicestack/vue": "^3.0.76",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.9",
     "@vueuse/core": "^9.13.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.33",
-    "swrv": "^1.0.3",
     "vue": "^3.2.47"
   },
   "devDependencies": {

ui/src/api.ts

@@ -1,9 +1,6 @@
-import type { IReturn, JsonServiceClient } from "@servicestack/client"
-import { appendQueryString, nameOf, JsonApiClient } from "@servicestack/client"
+import {JsonApiClient } from "@servicestack/client"
 import { useMetadata } from "@servicestack/vue"
 import { Authenticate } from "./dtos"
-import { IResponse } from "swrv/dist/types"
-import useSWRV from "swrv"
 
 declare var API_URL:string //defined in vite.config.ts
 
@@ -24,18 +21,6 @@ export function useApp() {
     }
 }
 
-class SwrClient {
-    client:JsonServiceClient
-    constructor(client:JsonServiceClient) { this.client = client }
-    get<T>(fn: () => IReturn<T> | string) : IResponse<T, any> {
-        return useSWRV(() => {
-            let request = fn()
-            return appendQueryString(`SwrClient:${nameOf(request)}`, request)
-        }, key => this.client.get(fn()))
-    }
-}
-export const swrClient = new SwrClient(client)
-
 export async function checkAuth() {
     try {
         return await client.post(new Authenticate())

ui/src/components/HelloApi.vue

@@ -1,13 +1,20 @@
 <template>
-  <div v-if="error" class="ml-2 text-red-500">{{ error.message }}</div>
-  <div v-else class="ml-3 mt-2 text-2xl">{{ data ? data.result : 'loading...' }}</div>
+  <div v-if="api.error" class="ml-2 text-red-500">{{ api.error!.message }}</div>
+  <div v-else class="ml-3 mt-2 text-2xl">{{ api.response ? api.response.result : 'loading...' }}</div>
 </template>
 
 <script setup lang="ts">
-import { Hello } from "@/dtos"
-import { swrClient } from "@/api"
+import { ref } from "vue"
+import { Hello, HelloResponse } from "@/dtos"
+import { ApiResult } from "@servicestack/client"
+import { useClient } from "@servicestack/vue"
+
+const client = useClient()
 
 const props = defineProps<{ name: string }>()
+const api = ref(new ApiResult<HelloResponse>())
 
-const { data, error } = swrClient.get(() => new Hello({ name: props.name }))
+const update = () => client.swr(new Hello({ name: props.name }), r => api.value = r) 
+watch([props], update)
+update()
 </script>