feat: tanstack as cross platform useAsyncData

Author: IMB11

apps/app-frontend/package.json

@@ -13,11 +13,12 @@
 		"test": "vue-tsc --noEmit"
 	},
 	"dependencies": {
-		"@sfirew/minecraft-motd-parser": "^1.1.6",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/ui": "workspace:*",
 		"@modrinth/utils": "workspace:*",
 		"@sentry/vue": "^8.27.0",
+		"@sfirew/minecraft-motd-parser": "^1.1.6",
+		"@tanstack/vue-query": "^5.90.7",
 		"@tauri-apps/api": "^2.5.0",
 		"@tauri-apps/plugin-dialog": "^2.2.1",
 		"@tauri-apps/plugin-http": "^2.5.0",
@@ -41,9 +42,9 @@
 		"vue-virtual-scroller": "v2.0.0-beta.8"
 	},
 	"devDependencies": {
-		"@modrinth/tooling-config": "workspace:*",
 		"@eslint/compat": "^1.1.1",
 		"@formatjs/cli": "^6.2.12",
+		"@modrinth/tooling-config": "workspace:*",
 		"@nuxt/eslint-config": "^0.5.6",
 		"@taijased/vue-render-tracker": "^1.0.7",
 		"@vitejs/plugin-vue": "^5.0.4",

apps/app-frontend/src/main.js

@@ -2,6 +2,7 @@ import 'floating-vue/dist/style.css'
 
 import * as Sentry from '@sentry/vue'
 import { VueScanPlugin } from '@taijased/vue-render-tracker'
+import { VueQueryPlugin } from '@tanstack/vue-query'
 import { createPlugin } from '@vintl/vintl/plugin'
 import FloatingVue from 'floating-vue'
 import { createPinia } from 'pinia'
@@ -45,6 +46,7 @@ Sentry.init({
 	tracesSampleRate: 0.1,
 })
 
+app.use(VueQueryPlugin)
 app.use(vueScan)
 app.use(router)
 app.use(pinia)

apps/frontend/package.json

@@ -38,13 +38,14 @@
 		"@formatjs/intl-localematcher": "^0.5.4",
 		"@intercom/messenger-js-sdk": "^0.0.14",
 		"@ltd/j-toml": "^1.38.0",
+		"@modrinth/api-client": "workspace:*",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/blog": "workspace:*",
 		"@modrinth/moderation": "workspace:*",
 		"@modrinth/ui": "workspace:*",
 		"@modrinth/utils": "workspace:*",
-		"@modrinth/api-client": "workspace:*",
 		"@pinia/nuxt": "^0.5.1",
+		"@tanstack/vue-query": "^5.90.7",
 		"@types/three": "^0.172.0",
 		"@vintl/vintl": "^4.4.1",
 		"@vitejs/plugin-vue": "^5.0.4",

apps/frontend/src/plugins/tanstack.ts

@@ -0,0 +1,28 @@
+// https://tanstack.com/query/v5/docs/framework/vue/examples/nuxt3
+import type { DehydratedState, VueQueryPluginOptions } from '@tanstack/vue-query'
+import { QueryClient, VueQueryPlugin, dehydrate, hydrate } from '@tanstack/vue-query'
+
+import { defineNuxtPlugin, useState } from '#imports'
+
+export default defineNuxtPlugin((nuxt) => {
+	const vueQueryState = useState<DehydratedState | null>('vue-query')
+
+	const queryClient = new QueryClient({
+		defaultOptions: { queries: { staleTime: 5000 } },
+	})
+	const options: VueQueryPluginOptions = { queryClient }
+
+	nuxt.vueApp.use(VueQueryPlugin, options)
+
+	if (import.meta.server) {
+		nuxt.hooks.hook('app:rendered', () => {
+			vueQueryState.value = dehydrate(queryClient)
+		})
+	}
+
+	if (import.meta.client) {
+		nuxt.hooks.hook('app:created', () => {
+			hydrate(queryClient, vueQueryState.value)
+		})
+	}
+})

packages/ui/package.json

@@ -21,8 +21,8 @@
 		"intl:extract": "formatjs extract \"src/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"src/**/*.d.ts\" --out-file src/locales/en-US/index.json --preserve-whitespace"
 	},
 	"devDependencies": {
-		"@modrinth/tooling-config": "workspace:*",
 		"@formatjs/cli": "^6.2.12",
+		"@modrinth/tooling-config": "workspace:*",
 		"@stripe/stripe-js": "^7.3.1",
 		"@vintl/unplugin": "^1.5.1",
 		"@vintl/vintl": "^4.4.1",
@@ -37,9 +37,10 @@
 		"@codemirror/language": "^6.9.3",
 		"@codemirror/state": "^6.3.2",
 		"@codemirror/view": "^6.22.1",
+		"@modrinth/api-client": "workspace:*",
 		"@modrinth/assets": "workspace:*",
 		"@modrinth/utils": "workspace:*",
-		"@modrinth/api-client": "workspace:*",
+		"@tanstack/vue-query": "^5.90.7",
 		"@tresjs/cientos": "^4.3.0",
 		"@tresjs/core": "^4.3.4",
 		"@tresjs/post-processing": "^2.4.0",

packages/ui/src/pages/route-helpers.ts

@@ -1,4 +1,4 @@
-import { resolve } from 'pathe'
+import { posix } from 'path'
 import type { RouteRecordRaw } from 'vue-router'
 
 interface NuxtPage {
@@ -36,7 +36,7 @@ export function createComponentResolver(baseDir: string) {
 
 	return {
 		register(component: any, relativePath: string) {
-			componentMap.set(component, resolve(baseDir, relativePath))
+			componentMap.set(component, posix.resolve(baseDir, relativePath))
 		},
 		resolve(component: any): string {
 			const path = componentMap.get(component)