feat: add vue query

package.json

@@ -28,6 +28,7 @@
     "@heroicons/vue": "^2.0.18",
     "@sidebase/nuxt-auth": "0.6.0-rc.1",
     "@tailwindcss/forms": "^0.5.6",
+    "@tanstack/vue-query": "^5.8.1",
     "@tanstack/vue-virtual": "3.0.0-beta.68",
     "@vueuse/components": "^10.5.0",
     "@vueuse/core": "^10.5.0",

plugins/vue-query.client.ts

@@ -0,0 +1,44 @@
+import type { DehydratedState, VueQueryPluginOptions } from '@tanstack/vue-query'
+import { dehydrate, hydrate, QueryClient, VueQueryPlugin } from '@tanstack/vue-query'
+// Nuxt 3 app aliases
+import { defineNuxtPlugin, useState } from '#imports'
+
+/**
+ * @see https://github.com/TanStack/query/blob/main/examples/vue/nuxt3/plugins/vue-query.ts
+ */
+export default defineNuxtPlugin((nuxt) => {
+	const vueQueryState = useState<DehydratedState | null>('vue-query')
+
+	const queryClient = new QueryClient({
+		defaultOptions: {
+			queries: {
+				// Do not refetch
+				refetchOnMount: false,
+				refetchOnWindowFocus: false,
+				refetchOnReconnect: false,
+				refetchIntervalInBackground: false,
+				refetchInterval: false,
+
+				staleTime: 5000,
+
+				// Disable retries, it is handled by Nuxt
+				retry: false
+			}
+		}
+	})
+	const options: VueQueryPluginOptions = { queryClient }
+
+	nuxt.vueApp.use(VueQueryPlugin, options)
+
+	if (process.server) {
+		nuxt.hooks.hook('app:rendered', () => {
+			vueQueryState.value = dehydrate(queryClient)
+		})
+	}
+
+	if (process.client) {
+		nuxt.hooks.hook('app:created', () => {
+			hydrate(queryClient, vueQueryState.value)
+		})
+	}
+})