From fd9aa8626b566f3f09d0cc92906a7f2f656f327c Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Sat, 31 Jan 2026 21:37:40 -0700
Subject: [PATCH 1/9] refactor: most places with useAsyncData replaced with
 tanstack query

---
 .../components/ui/create/CreateLimitAlert.vue | 11 ++--
 .../ui/servers/ServerInstallation.vue         | 35 +++++-----
 apps/frontend/src/layouts/default.vue         |  8 ++-
 .../src/pages/[type]/[id]/moderation.vue      | 15 +++--
 .../pages/[type]/[id]/settings/members.vue    | 13 ++--
 apps/frontend/src/pages/admin/affiliates.vue  | 30 +++++----
 .../frontend/src/pages/admin/billing/[id].vue | 49 +++++++-------
 apps/frontend/src/pages/auth/authorize.vue    | 42 ++++++++----
 .../src/pages/dashboard/affiliate-links.vue   | 16 +++--
 .../src/pages/dashboard/analytics.vue         |  9 ++-
 .../src/pages/dashboard/collections.vue       |  9 ++-
 apps/frontend/src/pages/dashboard/index.vue   | 38 ++++++-----
 .../src/pages/dashboard/notifications.vue     | 26 +++++---
 .../src/pages/dashboard/organizations.vue     | 14 ++--
 .../src/pages/dashboard/revenue/index.vue     | 48 ++++++++------
 .../src/pages/dashboard/revenue/transfers.vue | 15 +++--
 apps/frontend/src/pages/hosting/index.vue     | 36 +++++-----
 .../manage/[id]/options/properties.vue        | 66 ++++++++++---------
 apps/frontend/src/pages/legal/cmp-info.vue    | 13 ++--
 .../src/pages/moderation/reports/[id].vue     | 28 ++++----
 .../src/pages/news/article/[slug].vue         | 25 +++----
 .../organization/[id]/settings/projects.vue   | 14 ++--
 .../src/pages/settings/applications.vue       | 13 ++--
 .../src/pages/settings/authorizations.vue     | 49 +++++++-------
 .../src/pages/settings/billing/charges.vue    | 32 ++++-----
 apps/frontend/src/pages/settings/pats.vue     |  7 +-
 apps/frontend/src/pages/settings/sessions.vue |  8 ++-
 27 files changed, 375 insertions(+), 294 deletions(-)

diff --git a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
index 35a89692c1..8dbc296769 100644
--- a/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
+++ b/apps/frontend/src/components/ui/create/CreateLimitAlert.vue
@@ -44,8 +44,11 @@
 import { MessageIcon } from '@modrinth/assets'
 import { Admonition, ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
 import { capitalizeString } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import { computed, watch } from 'vue'
 
+import { useBaseFetch } from '~/composables/fetch.js'
+
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
@@ -121,10 +124,10 @@ const apiEndpoint = computed(() => {
 	}
 })
 
-const { data: limits } = await useAsyncData<UserLimits | undefined>(
-	`limits-${props.type}`,
-	() => useBaseFetch(apiEndpoint.value, { apiVersion: 3 }) as Promise<UserLimits>,
-)
+const { data: limits } = useQuery({
+	queryKey: computed(() => ['limits', props.type]),
+	queryFn: () => useBaseFetch(apiEndpoint.value, { apiVersion: 3 }) as Promise<UserLimits>,
+})
 
 const typeName = computed<{ singular: string; plural: string }>(() => {
 	switch (props.type) {
diff --git a/apps/frontend/src/components/ui/servers/ServerInstallation.vue b/apps/frontend/src/components/ui/servers/ServerInstallation.vue
index 88a7db3ffe..f8371865a1 100644
--- a/apps/frontend/src/components/ui/servers/ServerInstallation.vue
+++ b/apps/frontend/src/components/ui/servers/ServerInstallation.vue
@@ -161,7 +161,10 @@
 import { CompassIcon, InfoIcon, SettingsIcon, TransferIcon, UploadIcon } from '@modrinth/assets'
 import { ButtonStyled, NewProjectCard, useVIntl } from '@modrinth/ui'
 import type { Loaders } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
+import { computed, ref, watch } from 'vue'
 
+import { useBaseFetch } from '~/composables/fetch.js'
 import type { ModrinthServer } from '~/composables/servers/modrinth-servers.ts'
 import type { BackupInProgressReason } from '~/pages/hosting/manage/[id].vue'
 
@@ -193,40 +196,40 @@ const data = computed(() => props.server.general)
 const {
 	data: versions,
 	error: versionsError,
-	refresh: refreshVersions,
-} = await useAsyncData(
-	`content-loader-versions-${data.value?.upstream?.project_id}`,
-	async () => {
-		if (!data.value?.upstream?.project_id) return []
+	refetch: refreshVersions,
+} = useQuery({
+	queryKey: computed(() => ['project', data.value?.upstream?.project_id, 'versions']),
+	queryFn: async () => {
 		try {
-			const result = await useBaseFetch(`project/${data.value.upstream.project_id}/version`)
+			const result = await useBaseFetch(`project/${data.value!.upstream!.project_id}/version`)
 			return result || []
 		} catch (e) {
 			console.error('couldnt fetch all versions:', e)
 			throw new Error('Failed to load modpack versions.')
 		}
 	},
-	{ default: () => [] },
-)
+	enabled: computed(() => !!data.value?.upstream?.project_id),
+	placeholderData: [],
+})
 
 const {
 	data: currentVersion,
 	error: currentVersionError,
-	refresh: refreshCurrentVersion,
-} = await useAsyncData(
-	`content-loader-version-${data.value?.upstream?.version_id}`,
-	async () => {
-		if (!data.value?.upstream?.version_id) return null
+	refetch: refreshCurrentVersion,
+} = useQuery({
+	queryKey: computed(() => ['version', data.value?.upstream?.version_id]),
+	queryFn: async () => {
 		try {
-			const result = await useBaseFetch(`version/${data.value.upstream.version_id}`)
+			const result = await useBaseFetch(`version/${data.value!.upstream!.version_id}`)
 			return result || null
 		} catch (e) {
 			console.error('couldnt fetch version:', e)
 			throw new Error('Failed to load modpack version.')
 		}
 	},
-	{ default: () => null },
-)
+	enabled: computed(() => !!data.value?.upstream?.version_id),
+	placeholderData: null,
+})
 
 const projectCardData = computed(() => ({
 	icon_url: data.value?.project?.icon_url,
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index d9451cc468..72f1db6ee8 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -720,6 +720,7 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 
 import TextLogo from '~/components/brand/TextLogo.vue'
 import BatchCreditModal from '~/components/ui/admin/BatchCreditModal.vue'
@@ -754,9 +755,10 @@ const route = useNativeRoute()
 const router = useNativeRouter()
 const link = config.public.siteUrl + route.path.replace(/\/+$/, '')
 
-const { data: payoutBalance } = await useAsyncData('payout/balance', () => {
-	if (!auth.value.user) return null
-	return useBaseFetch('payout/balance', { apiVersion: 3 })
+const { data: payoutBalance } = useQuery({
+	queryKey: ['payout', 'balance'],
+	queryFn: () => useBaseFetch('payout/balance', { apiVersion: 3 }),
+	enabled: computed(() => !!auth.value.user),
 })
 
 const showTaxComplianceBanner = computed(() => {
diff --git a/apps/frontend/src/pages/[type]/[id]/moderation.vue b/apps/frontend/src/pages/[type]/[id]/moderation.vue
index 276b911891..d3b0c621b4 100644
--- a/apps/frontend/src/pages/[type]/[id]/moderation.vue
+++ b/apps/frontend/src/pages/[type]/[id]/moderation.vue
@@ -101,8 +101,11 @@
 <script setup>
 import { CheckIcon, IssuesIcon, XIcon } from '@modrinth/assets'
 import { Badge, injectNotificationManager, injectProjectPageContext } from '@modrinth/ui'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed } from 'vue'
 
 import ConversationThread from '~/components/ui/thread/ConversationThread.vue'
+import { useBaseFetch } from '~/composables/fetch.js'
 import {
 	getProjectLink,
 	isApproved,
@@ -116,11 +119,13 @@ const { addNotification } = injectNotificationManager()
 const { projectV2: project, currentMember, refreshProject } = injectProjectPageContext()
 
 const auth = await useAuth()
+const queryClient = useQueryClient()
 
-const { data: thread } = await useAsyncData(
-	() => `thread/${project.value.thread_id}`,
-	() => useBaseFetch(`thread/${project.value.thread_id}`),
-)
+const { data: thread } = useQuery({
+	queryKey: computed(() => ['thread', project.value?.thread_id]),
+	queryFn: () => useBaseFetch(`thread/${project.value.thread_id}`),
+	enabled: computed(() => !!project.value?.thread_id),
+})
 
 async function setStatus(status) {
 	startLoading()
@@ -135,7 +140,7 @@ async function setStatus(status) {
 
 		project.value.status = status
 		await refreshProject()
-		thread.value = await useBaseFetch(`thread/${thread.value.id}`)
+		await queryClient.invalidateQueries({ queryKey: ['thread', project.value?.thread_id] })
 	} catch (err) {
 		addNotification({
 			title: 'An error occurred',
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/members.vue b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
index 28975c47fb..1e06406f46 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/members.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/members.vue
@@ -535,8 +535,10 @@ import {
 	injectProjectPageContext,
 	Toggle,
 } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
 import { Multiselect } from 'vue-multiselect'
 
+import { useBaseFetch } from '~/composables/fetch.js'
 import { removeSelfFromTeam } from '~/helpers/teams.js'
 
 const { addNotification } = injectNotificationManager()
@@ -590,10 +592,13 @@ const currentUsername = ref('')
 const openTeamMembers = ref([])
 const selectedOrganization = ref(null)
 
-const { data: organizations } = useAsyncData('organizations', () => {
-	return useBaseFetch('user/' + auth.value?.user.id + '/organizations', {
-		apiVersion: 3,
-	})
+const { data: organizations } = useQuery({
+	queryKey: computed(() => ['user', auth.value?.user?.id, 'organizations']),
+	queryFn: () =>
+		useBaseFetch('user/' + auth.value?.user.id + '/organizations', {
+			apiVersion: 3,
+		}),
+	enabled: computed(() => !!auth.value?.user?.id),
 })
 
 const UPLOAD_VERSION = 1 << 0
diff --git a/apps/frontend/src/pages/admin/affiliates.vue b/apps/frontend/src/pages/admin/affiliates.vue
index 7c9155ff5a..db13b20010 100644
--- a/apps/frontend/src/pages/admin/affiliates.vue
+++ b/apps/frontend/src/pages/admin/affiliates.vue
@@ -101,6 +101,10 @@ import {
 	injectNotificationManager,
 } from '@modrinth/ui'
 import type { AffiliateLink, User } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
+import { computed, ref } from 'vue'
+
+import { useBaseFetch } from '~/composables/fetch.js'
 
 const { handleError } = injectNotificationManager()
 
@@ -115,11 +119,12 @@ const revokeModal = useTemplateRef<typeof ConfirmModal>('revokeModal')
 const {
 	data: affiliateCodes,
 	error,
-	refresh,
-} = await useAsyncData(
-	'AffiliateLinks',
-	() => useBaseFetch('affiliate', { method: 'GET', internal: true }) as Promise<AffiliateLink[]>,
-)
+	refetch,
+} = useQuery({
+	queryKey: ['affiliate'],
+	queryFn: () =>
+		useBaseFetch('affiliate', { method: 'GET', internal: true }) as Promise<AffiliateLink[]>,
+})
 
 const filterQuery = ref('')
 const creatingLink = ref(false)
@@ -136,16 +141,13 @@ const userIds = computed(() => {
 	return Array.from(ids)
 })
 
-const { data: users } = await useAsyncData(
-	'admin-affiliates-bulk-users',
-	() => {
+const { data: users } = useQuery({
+	queryKey: computed(() => ['users-bulk', userIds.value]),
+	queryFn: () => {
 		if (userIds.value.length === 0) return Promise.resolve([])
 		return useBaseFetch(`users?ids=${JSON.stringify(userIds.value)}`) as Promise<User[]>
 	},
-	{
-		watch: [userIds],
-	},
-)
+})
 
 const userMap = computed(() => {
 	if (!users.value) {
@@ -231,7 +233,7 @@ async function createAffiliateCode(data: { sourceName: string; username?: string
 			internal: true,
 		})
 
-		await refresh()
+		await refetch()
 		createModal.value?.close()
 	} catch (err) {
 		handleError(err)
@@ -261,7 +263,7 @@ async function confirmRevokeAffiliateCode() {
 			internal: true,
 		})
 
-		await refresh()
+		await refetch()
 		revokeModal.value?.hide()
 		revokingAffiliateUsername.value = null
 		revokingAffiliateId.value = null
diff --git a/apps/frontend/src/pages/admin/billing/[id].vue b/apps/frontend/src/pages/admin/billing/[id].vue
index dbe0fd9033..d5e9b6c377 100644
--- a/apps/frontend/src/pages/admin/billing/[id].vue
+++ b/apps/frontend/src/pages/admin/billing/[id].vue
@@ -336,9 +336,11 @@ import {
 } from '@modrinth/ui'
 import { formatCategory, formatPrice } from '@modrinth/utils'
 import { DEFAULT_CREDIT_EMAIL_MESSAGE } from '@modrinth/utils/utils.ts'
+import { useQuery } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 
 import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
+import { useBaseFetch } from '~/composables/fetch.js'
 
 const { addNotification } = injectNotificationManager()
 
@@ -355,9 +357,10 @@ const messages = defineMessages({
 	},
 })
 
-const { data: user } = await useAsyncData(`user/${route.params.id}`, () =>
-	useBaseFetch(`user/${route.params.id}`),
-)
+const { data: user } = useQuery({
+	queryKey: ['user', route.params.id],
+	queryFn: () => useBaseFetch(`user/${route.params.id}`),
+})
 
 if (!user.value) {
 	throw createError({
@@ -367,27 +370,25 @@ if (!user.value) {
 	})
 }
 
-let subscriptions, charges, refreshCharges
-try {
-	;[{ data: subscriptions }, { data: charges, refresh: refreshCharges }] = await Promise.all([
-		useAsyncData(`billing/subscriptions?user_id=${route.params.id}`, () =>
-			useBaseFetch(`billing/subscriptions?user_id=${user.value.id}`, {
-				internal: true,
-			}),
-		),
-		useAsyncData(`billing/payments?user_id=${route.params.id}`, () =>
-			useBaseFetch(`billing/payments?user_id=${user.value.id}`, {
-				internal: true,
-			}),
-		),
-	])
-} catch {
-	throw createError({
-		fatal: true,
-		statusCode: 404,
-		message: formatMessage(messages.userNotFoundError),
-	})
-}
+const { data: subscriptions } = useQuery({
+	queryKey: computed(() => ['billing', 'subscriptions', user.value?.id]),
+	queryFn: () =>
+		useBaseFetch(`billing/subscriptions?user_id=${user.value.id}`, {
+			internal: true,
+		}),
+	enabled: computed(() => !!user.value?.id),
+	placeholderData: [],
+})
+
+const { data: charges, refetch: refreshCharges } = useQuery({
+	queryKey: computed(() => ['billing', 'payments', user.value?.id]),
+	queryFn: () =>
+		useBaseFetch(`billing/payments?user_id=${user.value.id}`, {
+			internal: true,
+		}),
+	enabled: computed(() => !!user.value?.id),
+	placeholderData: [],
+})
 
 const subscriptionCharges = computed(() => {
 	return subscriptions.value.map((subscription) => {
diff --git a/apps/frontend/src/pages/auth/authorize.vue b/apps/frontend/src/pages/auth/authorize.vue
index 1841d11fb9..c1f2b978c9 100644
--- a/apps/frontend/src/pages/auth/authorize.vue
+++ b/apps/frontend/src/pages/auth/authorize.vue
@@ -91,6 +91,8 @@ import {
 	normalizeChildren,
 	useVIntl,
 } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
+import { computed } from 'vue'
 
 import { useAuth } from '@/composables/auth.js'
 import { useScopes } from '@/composables/auth/scopes.ts'
@@ -163,24 +165,36 @@ const getFlowIdAuthorization = async () => {
 
 const {
 	data: authorizationData,
-	pending,
+	isPending: pending,
 	error,
-} = await useAsyncData('authorization', getFlowIdAuthorization)
+} = useQuery({
+	queryKey: computed(() => ['authorization', clientId, redirectUri, scope, state]),
+	queryFn: getFlowIdAuthorization,
+	enabled: computed(() => !!clientId && !!redirectUri && !!scope),
+})
 
-const { data: app } = await useAsyncData('oauth/app/' + clientId, () =>
-	useBaseFetch('oauth/app/' + clientId, {
-		method: 'GET',
-		internal: true,
-	}),
-)
+const { data: app } = useQuery({
+	queryKey: computed(() => ['oauth/app', clientId]),
+	queryFn: () =>
+		useBaseFetch('oauth/app/' + clientId, {
+			method: 'GET',
+			internal: true,
+		}),
+	enabled: computed(() => !!clientId),
+})
 
-const scopeDefinitions = scopesToDefinitions(BigInt(authorizationData.value?.requested_scopes || 0))
+const { data: createdBy } = useQuery({
+	queryKey: computed(() => ['user', app.value?.created_by]),
+	queryFn: () =>
+		useBaseFetch('user/' + app.value.created_by, {
+			method: 'GET',
+			apiVersion: 3,
+		}),
+	enabled: computed(() => !!app.value?.created_by),
+})
 
-const { data: createdBy } = await useAsyncData('user/' + app.value.created_by, () =>
-	useBaseFetch('user/' + app.value.created_by, {
-		method: 'GET',
-		apiVersion: 3,
-	}),
+const scopeDefinitions = computed(() =>
+	scopesToDefinitions(BigInt(authorizationData.value?.requested_scopes || 0)),
 )
 
 const onAuthorize = async () => {
diff --git a/apps/frontend/src/pages/dashboard/affiliate-links.vue b/apps/frontend/src/pages/dashboard/affiliate-links.vue
index 1cf08dbd2e..11996770f9 100644
--- a/apps/frontend/src/pages/dashboard/affiliate-links.vue
+++ b/apps/frontend/src/pages/dashboard/affiliate-links.vue
@@ -76,6 +76,7 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import type { AffiliateLink } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 
 const createModal = useTemplateRef<typeof AffiliateLinkCreateModal>('createModal')
 const revokeModal = useTemplateRef<typeof ConfirmModal>('revokeModal')
@@ -89,11 +90,12 @@ const { formatMessage } = useVIntl()
 const {
 	data: affiliateLinks,
 	error,
-	refresh,
-} = await useAsyncData(
-	'affiliateLinks',
-	() => useBaseFetch('affiliate', { method: 'GET', internal: true }) as Promise<AffiliateLink[]>,
-)
+	refetch,
+} = useQuery({
+	queryKey: ['affiliate'],
+	queryFn: () =>
+		useBaseFetch('affiliate', { method: 'GET', internal: true }) as Promise<AffiliateLink[]>,
+})
 
 const filterQuery = ref('')
 const creatingLink = ref(false)
@@ -122,7 +124,7 @@ async function createAffiliateCode(data: { sourceName: string }) {
 			internal: true,
 		})
 
-		await refresh()
+		await refetch()
 		createModal.value?.close()
 	} catch (err) {
 		handleError(err)
@@ -151,7 +153,7 @@ async function confirmRevokeAffiliateLink() {
 			internal: true,
 		})
 
-		await refresh()
+		await refetch()
 		revokeModal.value?.hide()
 		revokingTitle.value = null
 		revokingId.value = null
diff --git a/apps/frontend/src/pages/dashboard/analytics.vue b/apps/frontend/src/pages/dashboard/analytics.vue
index ae52d258c4..c16fc8701e 100644
--- a/apps/frontend/src/pages/dashboard/analytics.vue
+++ b/apps/frontend/src/pages/dashboard/analytics.vue
@@ -5,6 +5,7 @@
 </template>
 
 <script setup>
+import { useQuery } from '@tanstack/vue-query'
 import ChartDisplay from '~/components/ui/charts/ChartDisplay.vue'
 
 definePageMeta({
@@ -18,7 +19,9 @@ useHead({
 const auth = await useAuth()
 const id = auth.value?.user?.id
 
-const { data: projects } = await useAsyncData(`user/${id}/projects`, () =>
-	useBaseFetch(`user/${id}/projects`),
-)
+const { data: projects } = useQuery({
+	queryKey: computed(() => ['user', id, 'projects']),
+	queryFn: () => useBaseFetch(`user/${id}/projects`),
+	enabled: computed(() => !!id),
+})
 </script>
diff --git a/apps/frontend/src/pages/dashboard/collections.vue b/apps/frontend/src/pages/dashboard/collections.vue
index 45ac4b75c9..4a327b1fc8 100644
--- a/apps/frontend/src/pages/dashboard/collections.vue
+++ b/apps/frontend/src/pages/dashboard/collections.vue
@@ -107,8 +107,10 @@ import {
 	XIcon,
 } from '@modrinth/assets'
 import { Avatar, Button, commonMessages, defineMessages, useVIntl } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
 
 import CollectionCreateModal from '~/components/ui/create/CollectionCreateModal.vue'
+import { useBaseFetch } from '~/composables/fetch.js'
 
 const { formatMessage } = useVIntl()
 const formatCompactNumber = useCompactNumber()
@@ -153,9 +155,10 @@ if (import.meta.client) {
 
 const filterQuery = ref('')
 
-const { data: collections } = await useAsyncData(`user/${auth.value.user.id}/collections`, () =>
-	useBaseFetch(`user/${auth.value.user.id}/collections`, { apiVersion: 3 }),
-)
+const { data: collections } = useQuery({
+	queryKey: ['user', auth.value.user.id, 'collections'],
+	queryFn: () => useBaseFetch(`user/${auth.value.user.id}/collections`, { apiVersion: 3 }),
+})
 
 const orderedCollections = computed(() => {
 	if (!collections.value) return []
diff --git a/apps/frontend/src/pages/dashboard/index.vue b/apps/frontend/src/pages/dashboard/index.vue
index c170714d28..68b3d2714c 100644
--- a/apps/frontend/src/pages/dashboard/index.vue
+++ b/apps/frontend/src/pages/dashboard/index.vue
@@ -35,7 +35,7 @@
 						:auth="auth"
 						raised
 						compact
-						@update:notifications="() => refresh()"
+						@update:notifications="() => refetch()"
 					/>
 					<nuxt-link
 						v-if="extraNotifs > 0"
@@ -98,6 +98,7 @@
 <script setup>
 import { ChevronRightIcon, HistoryIcon } from '@modrinth/assets'
 import { Avatar } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
 
 import NotificationItem from '~/components/ui/NotificationItem.vue'
 import { fetchExtraNotificationData, groupNotifications } from '~/helpers/platform-notifications.ts'
@@ -108,11 +109,11 @@ useHead({
 
 const auth = await useAuth()
 
-const [{ data: projects }] = await Promise.all([
-	useAsyncData(`user/${auth.value.user.id}/projects`, () =>
-		useBaseFetch(`user/${auth.value.user.id}/projects`),
-	),
-])
+const { data: projects } = useQuery({
+	queryKey: computed(() => ['user', auth.value?.user?.id, 'projects']),
+	queryFn: async () => await useBaseFetch(`user/${auth.value?.user?.id}/projects`),
+	placeholderData: [],
+})
 
 const downloadsProjectCount = computed(
 	() => projects.value.filter((project) => project.downloads > 0).length,
@@ -121,23 +122,24 @@ const followersProjectCount = computed(
 	() => projects.value.filter((project) => project.followers > 0).length,
 )
 
-const { data, refresh } = await useAsyncData(async () => {
-	const notifications = await useBaseFetch(`user/${auth.value.user.id}/notifications`)
+const { data, refetch } = useQuery({
+	queryKey: computed(() => ['user', auth.value?.user?.id, 'notifications']),
+	queryFn: async () => {
+		const notifications = await useBaseFetch(`user/${auth.value?.user?.id}/notifications`)
 
-	const filteredNotifications = notifications.filter((notif) => !notif.read)
-	const slice = filteredNotifications.slice(0, 30) // send first 30 notifs to be grouped before trimming to 3
+		const filteredNotifications = notifications.filter((notif) => !notif.read)
+		const slice = filteredNotifications.slice(0, 30)
 
-	return fetchExtraNotificationData(slice).then((notifications) => {
-		notifications = groupNotifications(notifications).slice(0, 3)
-		return { notifications, extraNotifs: filteredNotifications.length - slice.length }
-	})
+		return fetchExtraNotificationData(slice).then((notifications) => {
+			notifications = groupNotifications(notifications).slice(0, 3)
+			return { notifications, extraNotifs: filteredNotifications.length - slice.length }
+		})
+	},
+	enabled: computed(() => !!auth.value?.user?.id),
 })
 
 const notifications = computed(() => {
-	if (data.value === null) {
-		return []
-	}
-	return data.value.notifications
+	return data.value?.notifications ?? []
 })
 
 const extraNotifs = computed(() => (data.value ? data.value.extraNotifs : 0))
diff --git a/apps/frontend/src/pages/dashboard/notifications.vue b/apps/frontend/src/pages/dashboard/notifications.vue
index 223b12fe53..f526723004 100644
--- a/apps/frontend/src/pages/dashboard/notifications.vue
+++ b/apps/frontend/src/pages/dashboard/notifications.vue
@@ -29,7 +29,7 @@
 				:format-label="(x) => (x === 'all' ? 'All' : formatProjectType(x).replace('_', ' ') + 's')"
 				:capitalize="false"
 			/>
-			<p v-if="pending">Loading notifications...</p>
+			<p v-if="isPending">Loading notifications...</p>
 			<template v-else-if="error">
 				<p>Error loading notifications:</p>
 				<pre>
@@ -45,7 +45,7 @@
 					:notification="notification"
 					:auth="auth"
 					raised
-					@update:notifications="() => refresh()"
+					@update:notifications="() => refetch()"
 				/>
 			</template>
 			<p v-else>You don't have any unread notifications.</p>
@@ -59,6 +59,7 @@
 import { CheckCheckIcon, HistoryIcon } from '@modrinth/assets'
 import { Button, Chips, Pagination } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import NotificationItem from '~/components/ui/NotificationItem.vue'
@@ -81,11 +82,19 @@ const selectedType = ref('all')
 const page = ref(1)
 const perPage = ref(50)
 
-const { data, pending, error, refresh } = await useAsyncData(
-	async () => {
+const { data, isPending, error, refetch } = useQuery({
+	queryKey: computed(() => [
+		'user',
+		auth.value?.user?.id,
+		'notifications',
+		page.value,
+		history.value,
+		selectedType.value,
+	]),
+	queryFn: async () => {
 		const pageNum = page.value - 1
 		const showRead = history.value
-		const notifications = await useBaseFetch(`user/${auth.value.user.id}/notifications`)
+		const notifications = await useBaseFetch(`user/${auth.value?.user?.id}/notifications`)
 
 		const typesInFeed = [
 			...new Set(notifications.filter((n) => showRead || !n.read).map((n) => n.type)),
@@ -107,8 +116,9 @@ const { data, pending, error, refresh } = await useAsyncData(
 			hasRead: notifications.some((n) => n.read),
 		}))
 	},
-	{ watch: [page, history, selectedType] },
-)
+	enabled: computed(() => !!auth.value?.user?.id),
+	placeholderData: { notifications: [], notifTypes: [], pages: 1, hasRead: false },
+})
 
 const notifications = computed(() =>
 	data.value ? groupNotifications(data.value.notifications, history.value) : [],
@@ -130,7 +140,7 @@ async function readAll() {
 	])
 
 	await markAsRead(ids)
-	await refresh()
+	await refetch()
 }
 
 function changePage(newPage) {
diff --git a/apps/frontend/src/pages/dashboard/organizations.vue b/apps/frontend/src/pages/dashboard/organizations.vue
index c701b35455..d610dbee11 100644
--- a/apps/frontend/src/pages/dashboard/organizations.vue
+++ b/apps/frontend/src/pages/dashboard/organizations.vue
@@ -51,6 +51,7 @@
 <script setup>
 import { PlusIcon, UsersIcon } from '@modrinth/assets'
 import { Avatar } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
 
 import OrganizationCreateModal from '~/components/ui/create/OrganizationCreateModal.vue'
 import { useAuth } from '~/composables/auth.js'
@@ -60,12 +61,13 @@ const createOrgModal = ref(null)
 const auth = await useAuth()
 const uid = computed(() => auth.value.user?.id || null)
 
-const { data: orgs, error } = useAsyncData('organizations', () => {
-	if (!uid.value) return Promise.resolve(null)
-
-	return useBaseFetch('user/' + uid.value + '/organizations', {
-		apiVersion: 3,
-	})
+const { data: orgs, error } = useQuery({
+	queryKey: computed(() => ['user', uid.value, 'organizations']),
+	queryFn: () =>
+		useBaseFetch('user/' + uid.value + '/organizations', {
+			apiVersion: 3,
+		}),
+	enabled: computed(() => !!uid.value),
 })
 
 const sortedOrgs = computed(() =>
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index f3ec3ab4e0..87878f6bd2 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -262,6 +262,7 @@
 import { ArrowUpRightIcon, InProgressIcon, UnknownIcon } from '@modrinth/assets'
 import { defineMessages, useVIntl } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import { Tooltip } from 'floating-vue'
 
@@ -355,9 +356,9 @@ const messages = defineMessages({
 	},
 })
 
-const { data: userBalance, refresh: refreshUserBalance } = await useAsyncData(
-	`payout/balance`,
-	async () => {
+const { data: userBalance, refetch: refreshUserBalance } = useQuery({
+	queryKey: ['payout', 'balance'],
+	queryFn: async () => {
 		const response = (await useBaseFetch(`payout/balance`, {
 			apiVersion: 3,
 		})) as UserBalanceResponse
@@ -369,28 +370,33 @@ const { data: userBalance, refresh: refreshUserBalance } = await useAsyncData(
 			pending: Number(response.pending),
 		}
 	},
-)
+})
 
-const { data: payouts, refresh: refreshPayouts } = await useAsyncData(`payout/history`, () =>
-	useBaseFetch(`payout/history`, {
-		apiVersion: 3,
-	}),
-)
+const { data: payouts, refetch: refreshPayouts } = useQuery({
+	queryKey: ['payout', 'history'],
+	queryFn: () =>
+		useBaseFetch(`payout/history`, {
+			apiVersion: 3,
+		}),
+})
 
 const userCountry = useUserCountry()
-const { data: preloadedPaymentMethods } = await useAsyncData(`payout/methods-preload`, async () => {
-	const defaultCountry = userCountry.value || 'US'
-	try {
-		return {
-			country: defaultCountry,
-			methods: (await useBaseFetch('payout/methods', {
-				apiVersion: 3,
-				query: { country: defaultCountry },
-			})) as PayoutMethod[],
+const { data: preloadedPaymentMethods } = useQuery({
+	queryKey: computed(() => ['payout', 'methods-preload', userCountry.value]),
+	queryFn: async () => {
+		const defaultCountry = userCountry.value || 'US'
+		try {
+			return {
+				country: defaultCountry,
+				methods: (await useBaseFetch('payout/methods', {
+					apiVersion: 3,
+					query: { country: defaultCountry },
+				})) as PayoutMethod[],
+			}
+		} catch {
+			return null
 		}
-	} catch {
-		return null
-	}
+	},
 })
 
 const sortedPayouts = computed(() => {
diff --git a/apps/frontend/src/pages/dashboard/revenue/transfers.vue b/apps/frontend/src/pages/dashboard/revenue/transfers.vue
index 3b08a8195a..4f26d29c61 100644
--- a/apps/frontend/src/pages/dashboard/revenue/transfers.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/transfers.vue
@@ -67,7 +67,7 @@
 						v-for="transaction in transactions"
 						:key="transaction.id || transaction.created"
 						:transaction="transaction"
-						@cancelled="refresh"
+						@cancelled="refetch"
 					/>
 				</div>
 			</div>
@@ -92,6 +92,7 @@ import {
 } from '@modrinth/assets'
 import { ButtonStyled, Combobox, defineMessages, useVIntl } from '@modrinth/ui'
 import { formatMoney } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 
 import RevenueTransaction from '~/components/ui/dashboard/RevenueTransaction.vue'
@@ -105,11 +106,13 @@ useHead({
 	title: 'Transaction history - Modrinth',
 })
 
-const { data: transactions, refresh } = await useAsyncData(`payout-history`, () =>
-	useBaseFetch(`payout/history`, {
-		apiVersion: 3,
-	}),
-)
+const { data: transactions, refetch } = useQuery({
+	queryKey: ['payout', 'history'],
+	queryFn: () =>
+		useBaseFetch(`payout/history`, {
+			apiVersion: 3,
+		}),
+})
 
 const allTransactions = computed(() => {
 	if (!transactions.value) return []
diff --git a/apps/frontend/src/pages/hosting/index.vue b/apps/frontend/src/pages/hosting/index.vue
index bab6725db7..4df0f3f9ed 100644
--- a/apps/frontend/src/pages/hosting/index.vue
+++ b/apps/frontend/src/pages/hosting/index.vue
@@ -648,6 +648,7 @@ import {
 } from '@modrinth/ui'
 import { monthsInInterval } from '@modrinth/ui/src/utils/billing.ts'
 import { formatPrice } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import { computed } from 'vue'
 
 import { useBaseFetch } from '@/composables/fetch.js'
@@ -1010,14 +1011,18 @@ const selectedCurrency = ref('USD')
 const loggedOut = computed(() => !auth.value.user)
 const outOfStockUrl = 'https://discord.modrinth.com'
 
-const { data: hasServers } = await useAsyncData('ServerListCountCheck', async () => {
-	try {
-		if (!auth.value.user) return false
-		const response = await useServersFetch('servers')
-		return response.servers && response.servers.length > 0
-	} catch {
-		return false
-	}
+const { data: hasServers } = useQuery({
+	queryKey: computed(() => ['servers', 'list-count', auth.value?.user?.id]),
+	queryFn: async () => {
+		try {
+			if (!auth.value.user) return false
+			const response = await useServersFetch('servers')
+			return response.servers && response.servers.length > 0
+		} catch {
+			return false
+		}
+	},
+	enabled: computed(() => !!auth.value?.user),
 })
 
 function fetchStock(region, request) {
@@ -1079,15 +1084,12 @@ async function fetchCapacityStatuses(customProduct = null) {
 	}
 }
 
-const { data: capacityStatuses, refresh: refreshCapacity } = await useAsyncData(
-	'ServerCapacityAll',
-	fetchCapacityStatuses,
-	{
-		getCachedData() {
-			return null // Dont cache stock data.
-		},
-	},
-)
+const { data: capacityStatuses, refetch: refreshCapacity } = useQuery({
+	queryKey: ['server', 'capacity', 'all'],
+	queryFn: fetchCapacityStatuses,
+	staleTime: 0, // Dont cache stock data
+	gcTime: 0,
+})
 
 const isSmallAtCapacity = computed(() => capacityStatuses.value?.small?.available === 0)
 const isMediumAtCapacity = computed(() => capacityStatuses.value?.medium?.available === 0)
diff --git a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
index 16c57e7ace..c2cfac0c95 100644
--- a/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
+++ b/apps/frontend/src/pages/hosting/manage/[id]/options/properties.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="relative h-full w-full select-none overflow-y-auto">
 		<div
-			v-if="propsData && status === 'success'"
+			v-if="propsData && isSuccess"
 			class="flex h-full w-full flex-col justify-between gap-6 overflow-y-auto"
 		>
 			<div class="card flex flex-col gap-4">
@@ -133,6 +133,7 @@
 <script setup lang="ts">
 import { EyeIcon, SearchIcon } from '@modrinth/assets'
 import { Combobox, injectModrinthClient, injectNotificationManager, Toggle } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
 import Fuse from 'fuse.js'
 import { computed, inject, ref, watch } from 'vue'
 
@@ -154,41 +155,44 @@ const searchInput = ref('')
 
 const data = computed(() => props.server.general)
 const modulesLoaded = inject<Promise<void>>('modulesLoaded')
-const { data: propsData, status } = await useAsyncData('ServerProperties', async () => {
-	await modulesLoaded
-	try {
-		const blob = await client.kyros.files_v0.downloadFile('/server.properties')
-		const rawProps = await blob.text()
-		if (!rawProps) return null
-
-		const properties: Record<string, any> = {}
-		const lines = rawProps.split('\n')
-
-		for (const line of lines) {
-			if (line.startsWith('#') || !line.includes('=')) continue
-			const [key, ...valueParts] = line.split('=')
-			const rawValue = valueParts.join('=')
-			let value: string | boolean | number = rawValue
-
-			if (rawValue.toLowerCase() === 'true' || rawValue.toLowerCase() === 'false') {
-				value = rawValue.toLowerCase() === 'true'
-			} else {
-				const intLike = /^[-+]?\d+$/.test(rawValue)
-				if (intLike) {
-					const n = Number(rawValue)
-					if (Number.isSafeInteger(n)) {
-						value = n
+const { data: propsData, isSuccess } = useQuery({
+	queryKey: computed(() => ['server', props.server.serverId, 'properties']),
+	queryFn: async () => {
+		await modulesLoaded
+		try {
+			const blob = await client.kyros.files_v0.downloadFile('/server.properties')
+			const rawProps = await blob.text()
+			if (!rawProps) return null
+
+			const properties: Record<string, any> = {}
+			const lines = rawProps.split('\n')
+
+			for (const line of lines) {
+				if (line.startsWith('#') || !line.includes('=')) continue
+				const [key, ...valueParts] = line.split('=')
+				const rawValue = valueParts.join('=')
+				let value: string | boolean | number = rawValue
+
+				if (rawValue.toLowerCase() === 'true' || rawValue.toLowerCase() === 'false') {
+					value = rawValue.toLowerCase() === 'true'
+				} else {
+					const intLike = /^[-+]?\d+$/.test(rawValue)
+					if (intLike) {
+						const n = Number(rawValue)
+						if (Number.isSafeInteger(n)) {
+							value = n
+						}
 					}
 				}
+
+				properties[key.trim()] = value
 			}
 
-			properties[key.trim()] = value
+			return properties
+		} catch {
+			return null
 		}
-
-		return properties
-	} catch {
-		return null
-	}
+	},
 })
 
 const liveProperties = ref<Record<string, any>>({})
diff --git a/apps/frontend/src/pages/legal/cmp-info.vue b/apps/frontend/src/pages/legal/cmp-info.vue
index 30f2024483..ab64add859 100644
--- a/apps/frontend/src/pages/legal/cmp-info.vue
+++ b/apps/frontend/src/pages/legal/cmp-info.vue
@@ -163,6 +163,7 @@
 
 <script lang="ts" setup>
 import { formatDate, formatMoney } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import { computed, ref } from 'vue'
 
@@ -181,11 +182,13 @@ const selectedDate = computed(() => dayjs(rawSelectedDate.value))
 const endOfMonthDate = computed(() => selectedDate.value.endOf('month'))
 const withdrawalDate = computed(() => endOfMonthDate.value.add(60, 'days'))
 
-const { data: transparencyInformation } = await useAsyncData('payout/platform_revenue', () =>
-	useBaseFetch('payout/platform_revenue', {
-		apiVersion: 3,
-	}),
-)
+const { data: transparencyInformation } = useQuery({
+	queryKey: ['payout', 'platform_revenue'],
+	queryFn: () =>
+		useBaseFetch('payout/platform_revenue', {
+			apiVersion: 3,
+		}),
+})
 
 const platformRevenue = (transparencyInformation.value as any)?.all_time
 const platformRevenueData = (transparencyInformation.value as any)?.data?.slice(0, 5) ?? []
diff --git a/apps/frontend/src/pages/moderation/reports/[id].vue b/apps/frontend/src/pages/moderation/reports/[id].vue
index de31a92e05..2d21eff133 100644
--- a/apps/frontend/src/pages/moderation/reports/[id].vue
+++ b/apps/frontend/src/pages/moderation/reports/[id].vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Report } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 
 import ModerationReportCard from '~/components/ui/moderation/ModerationReportCard.vue'
 import { enrichReportBatch } from '~/helpers/moderation.ts'
@@ -7,18 +8,21 @@ import { enrichReportBatch } from '~/helpers/moderation.ts'
 const { params } = useRoute()
 const reportId = params.id as string
 
-const { data: report } = await useAsyncData(`moderation-report-${reportId}`, async () => {
-	try {
-		const report = (await useBaseFetch(`report/${reportId}`, { apiVersion: 3 })) as Report
-		const enrichedReport = (await enrichReportBatch([report]))[0]
-		return enrichedReport
-	} catch (error) {
-		console.error('Error fetching report:', error)
-		throw createError({
-			statusCode: 404,
-			statusMessage: 'Report not found',
-		})
-	}
+const { data: report } = useQuery({
+	queryKey: computed(() => ['report', reportId]),
+	queryFn: async () => {
+		try {
+			const report = (await useBaseFetch(`report/${reportId}`, { apiVersion: 3 })) as Report
+			const enrichedReport = (await enrichReportBatch([report]))[0]
+			return enrichedReport
+		} catch (error) {
+			console.error('Error fetching report:', error)
+			throw createError({
+				statusCode: 404,
+				statusMessage: 'Report not found',
+			})
+		}
+	},
 })
 </script>
 
diff --git a/apps/frontend/src/pages/news/article/[slug].vue b/apps/frontend/src/pages/news/article/[slug].vue
index d7d78dcb63..ddb1e38c5f 100644
--- a/apps/frontend/src/pages/news/article/[slug].vue
+++ b/apps/frontend/src/pages/news/article/[slug].vue
@@ -3,6 +3,7 @@ import { GitGraphIcon, RssIcon } from '@modrinth/assets'
 import { articles as rawArticles } from '@modrinth/blog'
 import { Avatar, ButtonStyled } from '@modrinth/ui'
 import type { User } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 import { computed, onMounted } from 'vue'
 
@@ -24,19 +25,19 @@ if (!rawArticle) {
 
 const authorsUrl = `users?ids=${JSON.stringify(rawArticle.authors)}`
 
-const [authors, html] = await Promise.all([
-	rawArticle.authors
-		? useAsyncData(authorsUrl, () => useBaseFetch(authorsUrl)).then((data) => {
-				const users = data.data as Ref<User[]>
-				users.value.sort((a, b) => {
-					return rawArticle.authors.indexOf(a.id) - rawArticle.authors.indexOf(b.id)
-				})
+const { data: authors } = useQuery({
+	queryKey: computed(() => ['users', rawArticle.authors]),
+	queryFn: async () => {
+		const users = (await useBaseFetch(authorsUrl)) as User[]
+		users.sort((a, b) => {
+			return rawArticle.authors.indexOf(a.id) - rawArticle.authors.indexOf(b.id)
+		})
+		return users
+	},
+	enabled: computed(() => !!rawArticle.authors),
+})
 
-				return users
-			})
-		: Promise.resolve(),
-	rawArticle.html(),
-])
+const html = await rawArticle.html()
 
 const article = computed(() => ({
 	...rawArticle,
diff --git a/apps/frontend/src/pages/organization/[id]/settings/projects.vue b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
index 4a31e9f7b6..0a1eadd58d 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/projects.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/projects.vue
@@ -337,6 +337,7 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { formatProjectType } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import { Multiselect } from 'vue-multiselect'
 
 import ModalCreation from '~/components/ui/create/ProjectCreateModal.vue'
@@ -351,13 +352,12 @@ const { organization, projects, refresh } = injectOrganizationContext()
 
 const auth = await useAuth()
 
-const { data: userProjects, refresh: refreshUserProjects } = await useAsyncData(
-	`user/${auth.value.user.id}/projects`,
-	() => useBaseFetch(`user/${auth.value.user.id}/projects`),
-	{
-		watch: [auth],
-	},
-)
+const { data: userProjects, refetch: refreshUserProjects } = useQuery({
+	queryKey: computed(() => ['user', auth.value?.user?.id, 'projects']),
+	queryFn: () => useBaseFetch(`user/${auth.value.user.id}/projects`),
+	enabled: computed(() => !!auth.value?.user?.id),
+	placeholderData: [],
+})
 
 const usersOwnedProjects = ref([])
 
diff --git a/apps/frontend/src/pages/settings/applications.vue b/apps/frontend/src/pages/settings/applications.vue
index e62624b233..8c8375b179 100644
--- a/apps/frontend/src/pages/settings/applications.vue
+++ b/apps/frontend/src/pages/settings/applications.vue
@@ -228,6 +228,7 @@ import {
 	injectNotificationManager,
 	useVIntl,
 } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
 
 import Modal from '~/components/ui/Modal.vue'
 import {
@@ -269,16 +270,14 @@ const loading = ref(false)
 
 const auth = await useAuth()
 
-const { data: usersApps, refresh } = await useAsyncData(
-	'usersApps',
-	() =>
+const { data: usersApps, refetch: refresh } = useQuery({
+	queryKey: computed(() => ['user', auth.value?.user?.id, 'oauth_apps']),
+	queryFn: () =>
 		useBaseFetch(`user/${auth.value.user.id}/oauth_apps`, {
 			apiVersion: 3,
 		}),
-	{
-		watch: [auth],
-	},
-)
+	enabled: computed(() => !!auth.value?.user?.id),
+})
 
 const setForm = (app) => {
 	if (app?.id) {
diff --git a/apps/frontend/src/pages/settings/authorizations.vue b/apps/frontend/src/pages/settings/authorizations.vue
index 74fa5c556c..7ef5ab0838 100644
--- a/apps/frontend/src/pages/settings/authorizations.vue
+++ b/apps/frontend/src/pages/settings/authorizations.vue
@@ -98,6 +98,7 @@ import {
 	injectNotificationManager,
 	useVIntl,
 } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
 
 import { useScopes } from '~/composables/auth/scopes.ts'
 
@@ -116,42 +117,36 @@ useHead({
 	title: 'Authorizations - Modrinth',
 })
 
-const { data: usersApps, refresh } = await useAsyncData('userAuthorizations', () =>
-	useBaseFetch(`oauth/authorizations`, {
-		internal: true,
-	}),
-)
+const { data: usersApps, refetch: refresh } = useQuery({
+	queryKey: ['oauth', 'authorizations'],
+	queryFn: () =>
+		useBaseFetch(`oauth/authorizations`, {
+			internal: true,
+		}),
+})
 
-const { data: appInformation } = await useAsyncData(
-	'appInfo',
-	() => {
-		if (!usersApps.value?.length) return null
-		return useBaseFetch('oauth/apps', {
+const { data: appInformation } = useQuery({
+	queryKey: computed(() => ['oauth', 'apps', usersApps.value?.map((c) => c.app_id)]),
+	queryFn: () =>
+		useBaseFetch('oauth/apps', {
 			internal: true,
 			query: {
 				ids: JSON.stringify(usersApps.value.map((c) => c.app_id)),
 			},
-		})
-	},
-	{
-		watch: usersApps,
-	},
-)
+		}),
+	enabled: computed(() => !!usersApps.value?.length),
+})
 
-const { data: appCreatorsInformation } = await useAsyncData(
-	'appCreatorsInfo',
-	() => {
-		if (!appInformation.value?.length) return null
-		return useBaseFetch('users', {
+const { data: appCreatorsInformation } = useQuery({
+	queryKey: computed(() => ['users', appInformation.value?.map((c) => c.created_by)]),
+	queryFn: () =>
+		useBaseFetch('users', {
 			query: {
 				ids: JSON.stringify(appInformation.value.map((c) => c.created_by)),
 			},
-		})
-	},
-	{
-		watch: appInformation,
-	},
-)
+		}),
+	enabled: computed(() => !!appInformation.value?.length),
+})
 
 const appInfoLookup = computed(() => {
 	if (!usersApps.value || !appInformation.value || !appCreatorsInformation.value) {
diff --git a/apps/frontend/src/pages/settings/billing/charges.vue b/apps/frontend/src/pages/settings/billing/charges.vue
index b4c55f419d..8a5b6fccbb 100644
--- a/apps/frontend/src/pages/settings/billing/charges.vue
+++ b/apps/frontend/src/pages/settings/billing/charges.vue
@@ -40,6 +40,7 @@
 <script setup>
 import { Badge, Breadcrumbs, useVIntl } from '@modrinth/ui'
 import { formatPrice } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 
 import { products } from '~/generated/state.json'
 
@@ -49,23 +50,22 @@ definePageMeta({
 
 const vintl = useVIntl()
 
-const { data: charges } = await useAsyncData(
-	'billing/payments',
-	() => useBaseFetch('billing/payments', { internal: true }),
-	{
-		transform: (charges) => {
-			return charges
-				.filter((charge) => charge.status !== 'open' && charge.status !== 'cancelled')
-				.map((charge) => {
-					const product = products.find((product) =>
-						product.prices.some((price) => price.id === charge.price_id),
-					)
+const { data: charges } = useQuery({
+	queryKey: ['billing', 'payments'],
+	queryFn: async () => {
+		const charges = await useBaseFetch('billing/payments', { internal: true })
+		return charges
+			.filter((charge) => charge.status !== 'open' && charge.status !== 'cancelled')
+			.map((charge) => {
+				const product = products.find((product) =>
+					product.prices.some((price) => price.id === charge.price_id),
+				)
 
-					charge.product = product
+				charge.product = product
 
-					return charge
-				})
-		},
+				return charge
+			})
 	},
-)
+	placeholderData: [],
+})
 </script>
diff --git a/apps/frontend/src/pages/settings/pats.vue b/apps/frontend/src/pages/settings/pats.vue
index 8294f2ae59..27e8d64f00 100644
--- a/apps/frontend/src/pages/settings/pats.vue
+++ b/apps/frontend/src/pages/settings/pats.vue
@@ -215,6 +215,7 @@ import {
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
 
 import Modal from '~/components/ui/Modal.vue'
 import {
@@ -333,7 +334,11 @@ const deletePatIndex = ref(null)
 
 const loading = ref(false)
 
-const { data: pats, refresh } = await useAsyncData('pat', () => useBaseFetch('pat'))
+const { data: pats, refetch: refresh } = useQuery({
+	queryKey: ['pat'],
+	queryFn: () => useBaseFetch('pat'),
+	placeholderData: [],
+})
 const displayPats = computed(() => {
 	return pats.value.toSorted((a, b) => new Date(b.created) - new Date(a.created))
 })
diff --git a/apps/frontend/src/pages/settings/sessions.vue b/apps/frontend/src/pages/settings/sessions.vue
index 5cef936725..5c7cd71187 100644
--- a/apps/frontend/src/pages/settings/sessions.vue
+++ b/apps/frontend/src/pages/settings/sessions.vue
@@ -65,6 +65,7 @@ import {
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
 
 definePageMeta({
 	middleware: 'auth',
@@ -110,9 +111,10 @@ useHead({
 	title: () => `${formatMessage(commonSettingsMessages.sessions)} - Modrinth`,
 })
 
-const { data: sessions, refresh } = await useAsyncData('session/list', () =>
-	useBaseFetch('session/list'),
-)
+const { data: sessions, refetch: refresh } = useQuery({
+	queryKey: ['session', 'list'],
+	queryFn: () => useBaseFetch('session/list'),
+})
 
 async function revokeSession(id) {
 	startLoading()

From 98d95b611e6d4fe26e6151e214a4310af706c40e Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 2 Feb 2026 11:23:34 -0700
Subject: [PATCH 2/9] refactor report list and report view

---
 .../src/components/ui/report/ReportView.vue   | 130 +++++++++-------
 .../src/components/ui/report/ReportsList.vue  | 144 +++++++++++-------
 2 files changed, 165 insertions(+), 109 deletions(-)

diff --git a/apps/frontend/src/components/ui/report/ReportView.vue b/apps/frontend/src/components/ui/report/ReportView.vue
index 67594cbb92..57227bf586 100644
--- a/apps/frontend/src/components/ui/report/ReportView.vue
+++ b/apps/frontend/src/components/ui/report/ReportView.vue
@@ -21,9 +21,13 @@
 	</div>
 </template>
 <script setup>
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed } from 'vue'
+
 import Breadcrumbs from '~/components/ui/Breadcrumbs.vue'
 import ReportInfo from '~/components/ui/report/ReportInfo.vue'
 import ConversationThread from '~/components/ui/thread/ConversationThread.vue'
+import { useBaseFetch } from '~/composables/fetch.js'
 import { addReportMessage } from '~/helpers/threads.js'
 
 const props = defineProps({
@@ -41,74 +45,90 @@ const props = defineProps({
 	},
 })
 
-const report = ref(null)
+const queryClient = useQueryClient()
 
-await fetchReport().then((result) => {
-	report.value = result
+// Fetch raw report
+const { data: rawReport } = useQuery({
+	queryKey: computed(() => ['report', props.reportId]),
+	queryFn: async () => {
+		const data = await useBaseFetch(`report/${props.reportId}`)
+		data.item_id = data.item_id.replace(/"/g, '')
+		return data
+	},
 })
 
-const { data: rawThread } = await useAsyncData(`thread/${report.value.thread_id}`, () =>
-	useBaseFetch(`thread/${report.value.thread_id}`),
-)
-const thread = computed(() => addReportMessage(rawThread.value, report.value))
+// Compute user IDs needed
+const userIds = computed(() => {
+	if (!rawReport.value) return []
+	const ids = [rawReport.value.reporter]
+	if (rawReport.value.item_type === 'user') {
+		ids.push(rawReport.value.item_id)
+	}
+	return ids
+})
 
-async function updateThread(newThread) {
-	rawThread.value = newThread
-	report.value = await fetchReport()
-}
+// Fetch users
+const { data: users } = useQuery({
+	queryKey: computed(() => ['users', userIds.value]),
+	queryFn: () => useBaseFetch(`users?ids=${encodeURIComponent(JSON.stringify(userIds.value))}`),
+	enabled: computed(() => userIds.value.length > 0),
+})
 
-async function fetchReport() {
-	const { data: rawReport } = await useAsyncData(`report/${props.reportId}`, () =>
-		useBaseFetch(`report/${props.reportId}`),
-	)
-	rawReport.value.item_id = rawReport.value.item_id.replace(/"/g, '')
+// Version ID if applicable
+const versionId = computed(() =>
+	rawReport.value?.item_type === 'version' ? rawReport.value.item_id : null,
+)
 
-	const userIds = []
-	userIds.push(rawReport.value.reporter)
-	if (rawReport.value.item_type === 'user') {
-		userIds.push(rawReport.value.item_id)
-	}
+// Fetch version
+const { data: version } = useQuery({
+	queryKey: computed(() => ['version', versionId.value]),
+	queryFn: () => useBaseFetch(`version/${versionId.value}`),
+	enabled: computed(() => !!versionId.value),
+})
 
-	const versionId = rawReport.value.item_type === 'version' ? rawReport.value.item_id : null
+// Project ID
+const projectId = computed(() => {
+	if (version.value) return version.value.project_id
+	if (rawReport.value?.item_type === 'project') return rawReport.value.item_id
+	return null
+})
 
-	let users = []
-	if (userIds.length > 0) {
-		const { data: usersVal } = await useAsyncData(`users?ids=${JSON.stringify(userIds)}`, () =>
-			useBaseFetch(`users?ids=${encodeURIComponent(JSON.stringify(userIds))}`),
-		)
-		users = usersVal.value
-	}
+// Fetch project
+const { data: project } = useQuery({
+	queryKey: computed(() => ['project', projectId.value]),
+	queryFn: () => useBaseFetch(`project/${projectId.value}`),
+	enabled: computed(() => !!projectId.value),
+})
 
-	let version = null
-	if (versionId) {
-		const { data: versionVal } = await useAsyncData(`version/${versionId}`, () =>
-			useBaseFetch(`version/${versionId}`),
-		)
-		version = versionVal.value
+// Assemble the full report object
+const report = computed(() => {
+	if (!rawReport.value) return null
+	return {
+		...rawReport.value,
+		project: project.value ?? null,
+		version: version.value ?? null,
+		reporterUser: (users.value || []).find((user) => user.id === rawReport.value.reporter),
+		user:
+			rawReport.value.item_type === 'user'
+				? (users.value || []).find((user) => user.id === rawReport.value.item_id)
+				: undefined,
 	}
+})
 
-	const projectId = version
-		? version.project_id
-		: rawReport.value.item_type === 'project'
-			? rawReport.value.item_id
-			: null
+// Fetch thread
+const { data: rawThread } = useQuery({
+	queryKey: computed(() => ['thread', report.value?.thread_id]),
+	queryFn: () => useBaseFetch(`thread/${report.value.thread_id}`),
+	enabled: computed(() => !!report.value?.thread_id),
+})
 
-	let project = null
-	if (projectId) {
-		const { data: projectVal } = await useAsyncData(`project/${projectId}`, () =>
-			useBaseFetch(`project/${projectId}`),
-		)
-		project = projectVal.value
-	}
+const thread = computed(() =>
+	rawThread.value && report.value ? addReportMessage(rawThread.value, report.value) : null,
+)
 
-	const reportData = rawReport.value
-	reportData.project = project
-	reportData.version = version
-	reportData.reporterUser = users.find((user) => user.id === rawReport.value.reporter)
-	if (rawReport.value.item_type === 'user') {
-		reportData.user = users.find((user) => user.id === rawReport.value.item_id)
-	}
-	return reportData
+async function updateThread(newThread) {
+	queryClient.setQueryData(['thread', report.value?.thread_id], newThread)
+	await queryClient.invalidateQueries({ queryKey: ['report', props.reportId] })
 }
 </script>
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/components/ui/report/ReportsList.vue b/apps/frontend/src/components/ui/report/ReportsList.vue
index d0e97403a3..4346a43c7f 100644
--- a/apps/frontend/src/components/ui/report/ReportsList.vue
+++ b/apps/frontend/src/components/ui/report/ReportsList.vue
@@ -25,8 +25,11 @@
 </template>
 <script setup>
 import { Chips } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
+import { computed, ref } from 'vue'
 
 import ReportInfo from '~/components/ui/report/ReportInfo.vue'
+import { useBaseFetch } from '~/composables/fetch.js'
 import { addReportMessage } from '~/helpers/threads.js'
 import { asEncodedJsonArray, fetchSegmented } from '~/utils/fetch-helpers.ts'
 
@@ -43,77 +46,110 @@ const props = defineProps({
 
 const viewMode = ref('open')
 const reasonFilter = ref('All')
-const reports = ref([])
 
 const MAX_REPORTS = 1500
 
-let { data: rawReports } = await useAsyncData('report', () =>
-	useBaseFetch(`report?count=${MAX_REPORTS}`),
-)
-
-rawReports = rawReports.value.map((report) => {
-	report.item_id = report.item_id.replace(/"/g, '')
-	return report
+const { data: rawReportsData } = useQuery({
+	queryKey: ['reports', MAX_REPORTS],
+	queryFn: () => useBaseFetch(`report?count=${MAX_REPORTS}`),
+	placeholderData: [],
 })
 
-const reporterUsers = rawReports.map((report) => report.reporter)
-const reportedUsers = rawReports
-	.filter((report) => report.item_type === 'user')
-	.map((report) => report.item_id)
-const versionReports = rawReports.filter((report) => report.item_type === 'version')
-const versionIds = [...new Set(versionReports.map((report) => report.item_id))]
-const userIds = [...new Set(reporterUsers.concat(reportedUsers))]
-const threadIds = [
-	...new Set(rawReports.filter((report) => report.thread_id).map((report) => report.thread_id)),
-]
-const reasons = ['All', ...new Set(rawReports.map((report) => report.report_type))]
+const rawReports = computed(() =>
+	rawReportsData.value.map((report) => ({
+		...report,
+		item_id: report.item_id.replace(/"/g, ''),
+	})),
+)
 
-const [{ data: users }, { data: versions }, { data: threads }] = await Promise.all([
-	await useAsyncData(`users?ids=${JSON.stringify(userIds)}`, () =>
-		fetchSegmented(userIds, (ids) => `users?ids=${asEncodedJsonArray(ids)}`),
-	),
-	await useAsyncData(`versions?ids=${JSON.stringify(versionIds)}`, () =>
-		fetchSegmented(versionIds, (ids) => `versions?ids=${asEncodedJsonArray(ids)}`),
-	),
-	await useAsyncData(`threads?ids=${JSON.stringify(threadIds)}`, () =>
-		fetchSegmented(threadIds, (ids) => `threads?ids=${asEncodedJsonArray(ids)}`),
+const reporterUsers = computed(() => rawReports.value.map((report) => report.reporter))
+const reportedUsers = computed(() =>
+	rawReports.value.filter((report) => report.item_type === 'user').map((report) => report.item_id),
+)
+const versionReports = computed(() =>
+	rawReports.value.filter((report) => report.item_type === 'version'),
+)
+const versionIds = computed(() => [
+	...new Set(versionReports.value.map((report) => report.item_id)),
+])
+const userIds = computed(() => [...new Set(reporterUsers.value.concat(reportedUsers.value))])
+const threadIds = computed(() => [
+	...new Set(
+		rawReports.value.filter((report) => report.thread_id).map((report) => report.thread_id),
 	),
 ])
+const reasons = computed(() => [
+	'All',
+	...new Set(rawReports.value.map((report) => report.report_type)),
+])
 
-const reportedProjects = rawReports
-	.filter((report) => report.item_type === 'project')
-	.map((report) => report.item_id)
-const versionProjects = versions.value.map((version) => version.project_id)
-const projectIds = [...new Set(reportedProjects.concat(versionProjects))]
+const { data: users } = useQuery({
+	queryKey: computed(() => ['users', userIds.value]),
+	queryFn: () => fetchSegmented(userIds.value, (ids) => `users?ids=${asEncodedJsonArray(ids)}`),
+	enabled: computed(() => userIds.value.length > 0),
+	placeholderData: [],
+})
+
+const { data: versions } = useQuery({
+	queryKey: computed(() => ['versions', versionIds.value]),
+	queryFn: () =>
+		fetchSegmented(versionIds.value, (ids) => `versions?ids=${asEncodedJsonArray(ids)}`),
+	enabled: computed(() => versionIds.value.length > 0),
+	placeholderData: [],
+})
+
+const { data: threads } = useQuery({
+	queryKey: computed(() => ['threads', threadIds.value]),
+	queryFn: () => fetchSegmented(threadIds.value, (ids) => `threads?ids=${asEncodedJsonArray(ids)}`),
+	enabled: computed(() => threadIds.value.length > 0),
+	placeholderData: [],
+})
 
-const { data: projects } = await useAsyncData(`projects?ids=${JSON.stringify(projectIds)}`, () =>
-	fetchSegmented(projectIds, (ids) => `projects?ids=${asEncodedJsonArray(ids)}`),
+const reportedProjects = computed(() =>
+	rawReports.value
+		.filter((report) => report.item_type === 'project')
+		.map((report) => report.item_id),
 )
+const versionProjects = computed(() => versions.value.map((version) => version.project_id))
+const projectIds = computed(() => [
+	...new Set(reportedProjects.value.concat(versionProjects.value)),
+])
 
-reports.value = rawReports.map((report) => {
-	report.reporterUser = users.value.find((user) => user.id === report.reporter)
-	if (report.item_type === 'user') {
-		report.user = users.value.find((user) => user.id === report.item_id)
-	} else if (report.item_type === 'project') {
-		report.project = projects.value.find((project) => project.id === report.item_id)
-	} else if (report.item_type === 'version') {
-		report.version = versions.value.find((version) => version.id === report.item_id)
-		report.project = projects.value.find((project) => project.id === report.version.project_id)
-	}
-	if (report.thread_id) {
-		report.thread = addReportMessage(
-			threads.value.find((thread) => report.thread_id === thread.id),
-			report,
-		)
-	}
-	report.open = true
-	return report
+const { data: projects } = useQuery({
+	queryKey: computed(() => ['projects', projectIds.value]),
+	queryFn: () =>
+		fetchSegmented(projectIds.value, (ids) => `projects?ids=${asEncodedJsonArray(ids)}`),
+	enabled: computed(() => projectIds.value.length > 0),
+	placeholderData: [],
 })
 
+const reports = computed(() =>
+	rawReports.value.map((report) => {
+		const enrichedReport = { ...report }
+		enrichedReport.reporterUser = users.value.find((user) => user.id === report.reporter)
+		if (report.item_type === 'user') {
+			enrichedReport.user = users.value.find((user) => user.id === report.item_id)
+		} else if (report.item_type === 'project') {
+			enrichedReport.project = projects.value.find((project) => project.id === report.item_id)
+		} else if (report.item_type === 'version') {
+			enrichedReport.version = versions.value.find((version) => version.id === report.item_id)
+			enrichedReport.project = projects.value.find(
+				(project) => project.id === enrichedReport.version?.project_id,
+			)
+		}
+		if (report.thread_id) {
+			const thread = threads.value.find((thread) => report.thread_id === thread.id)
+			enrichedReport.thread = thread ? addReportMessage(thread, report) : null
+		}
+		enrichedReport.open = true
+		return enrichedReport
+	}),
+)
+
 const filteredReports = computed(() =>
 	reports.value?.filter(
 		(x) =>
-			(props.moderation || x.reporterUser.id === props.auth.user.id) &&
+			(props.moderation || x.reporterUser?.id === props.auth.user.id) &&
 			(viewMode.value === 'open' ? x.open : !x.open) &&
 			(reasonFilter.value === 'All' || reasonFilter.value === x.report_type),
 	),

From 4cd21502345ee8b0e392210cf2426e955799c9be Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 2 Feb 2026 12:01:21 -0700
Subject: [PATCH 3/9] refactor organization page to use tanstack query

---
 apps/frontend/src/pages/organization/[id].vue | 160 ++++++++++--------
 1 file changed, 92 insertions(+), 68 deletions(-)

diff --git a/apps/frontend/src/pages/organization/[id].vue b/apps/frontend/src/pages/organization/[id].vue
index b6a2673a70..83332035fd 100644
--- a/apps/frontend/src/pages/organization/[id].vue
+++ b/apps/frontend/src/pages/organization/[id].vue
@@ -217,8 +217,8 @@
 							:follows="project.followers.toString()"
 							:icon-url="project.icon_url"
 							:categories="project.categories"
-							:client-side="project.client_side"
-							:server-side="project.server_side"
+							:client-side="project.client_side as string"
+							:server-side="project.server_side as string"
 							:status="
 								auth.user &&
 								(auth.user.id! === (user as any).id || tags.staffRoles.includes(auth.user.role))
@@ -271,6 +271,7 @@ import {
 } from '@modrinth/ui'
 import type { Organization, ProjectStatus, ProjectType, ProjectV3 } from '@modrinth/utils'
 import { formatNumber } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 
 import UpToDate from '~/assets/images/illustrations/up_to_date.svg?component'
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
@@ -309,65 +310,74 @@ if (route.path.includes('settings')) {
 // hacky way to show the edit button on the corner of the card.
 const routeHasSettings = computed(() => route.path.includes('settings'))
 
-const [
-	{ data: organization, refresh: refreshOrganization },
-	{ data: projects, refresh: refreshProjects },
-] = await Promise.all([
-	useAsyncData(
-		`organization/${orgId}`,
-		() => useBaseFetch(`organization/${orgId}`, { apiVersion: 3 }) as Promise<Organization>,
-	),
-	useAsyncData(
-		`organization/${orgId}/projects`,
-		() => useBaseFetch(`organization/${orgId}/projects`, { apiVersion: 3 }) as Promise<ProjectV3[]>,
-		{
-			transform: (projects) => {
-				for (const project of projects) {
-					project.categories = project.categories.concat(project.loaders)
-
-					if (project.mrpack_loaders) {
-						project.categories = project.categories.concat(project.mrpack_loaders)
-					}
-
-					const singleplayer = project.singleplayer && project.singleplayer[0]
-					const clientAndServer = project.client_and_server && project.client_and_server[0]
-					const clientOnly = project.client_only && project.client_only[0]
-					const serverOnly = project.server_only && project.server_only[0]
-
-					// quick and dirty hack to show envs as legacy
-					if (singleplayer && clientAndServer && !clientOnly && !serverOnly) {
-						project.client_side = 'required'
-						project.server_side = 'required'
-					} else if (singleplayer && clientAndServer && clientOnly && !serverOnly) {
-						project.client_side = 'required'
-						project.server_side = 'unsupported'
-					} else if (singleplayer && clientAndServer && !clientOnly && serverOnly) {
-						project.client_side = 'unsupported'
-						project.server_side = 'required'
-					} else if (singleplayer && clientAndServer && clientOnly && serverOnly) {
-						project.client_side = 'optional'
-						project.server_side = 'optional'
-					}
-				}
-
-				return projects
-			},
-		},
-	),
-])
+const {
+	data: organization,
+	refetch: refreshOrganization,
+	isError,
+	error,
+} = useQuery({
+	queryKey: computed(() => ['organization', orgId]),
+	queryFn: async (): Promise<Organization> => {
+		const org = await useBaseFetch(`organization/${orgId}`, {
+			apiVersion: 3,
+		})
+
+		if (!org) {
+			throw createError({
+				fatal: true,
+				statusCode: 404,
+				message: 'Organization not found',
+			})
+		}
+		return org as Organization
+	},
+})
+
+const { data: projects, refetch: refreshProjects } = useQuery({
+	queryKey: computed(() => ['organization', orgId, 'projects']),
+	queryFn: async () => {
+		const projects = (await useBaseFetch(`organization/${orgId}/projects`, {
+			apiVersion: 3,
+		})) as ProjectV3[]
+
+		for (const project of projects) {
+			project.categories = project.categories.concat(project.loaders)
+
+			if (project.mrpack_loaders) {
+				project.categories = project.categories.concat(project.mrpack_loaders as string[])
+			}
+
+			const singleplayer = project.singleplayer && (project.singleplayer as string[])[0]
+			const clientAndServer =
+				project.client_and_server && (project.client_and_server as string[])[0]
+			const clientOnly = project.client_only && (project.client_only as string[])[0]
+			const serverOnly = project.server_only && (project.server_only as string[])[0]
+
+			// quick and dirty hack to show envs as legacy
+			if (singleplayer && clientAndServer && !clientOnly && !serverOnly) {
+				project.client_side = 'required'
+				project.server_side = 'required'
+			} else if (singleplayer && clientAndServer && clientOnly && !serverOnly) {
+				project.client_side = 'required'
+				project.server_side = 'unsupported'
+			} else if (singleplayer && clientAndServer && !clientOnly && serverOnly) {
+				project.client_side = 'unsupported'
+				project.server_side = 'required'
+			} else if (singleplayer && clientAndServer && clientOnly && serverOnly) {
+				project.client_side = 'optional'
+				project.server_side = 'optional'
+			}
+		}
+
+		return projects
+	},
+	placeholderData: [],
+})
 
 const refresh = async () => {
 	await Promise.all([refreshOrganization(), refreshProjects()])
 }
 
-if (!organization.value) {
-	throw createError({
-		fatal: true,
-		statusCode: 404,
-		message: 'Organization not found',
-	})
-}
-
 // Filter accepted, sort by role, then by name and Owner role always goes first
 const acceptedMembers = computed(() => {
 	const acceptedMembers = organization.value?.members?.filter((x) => x.accepted) ?? []
@@ -382,7 +392,7 @@ const acceptedMembers = computed(() => {
 		}
 	})
 
-	return [owner, ...rest]
+	return [owner, ...rest].filter(Boolean)
 })
 
 const isInvited = computed(() => {
@@ -420,21 +430,35 @@ const onDeclineInvite = useClientTry(async () => {
 	await refreshOrganization()
 })
 
-const organizationContext = new OrganizationContext(organization, projects, auth, tags, refresh)
+const organizationContext = new OrganizationContext(
+	organization as Ref<Organization | null>,
+	projects as Ref<ProjectV3[] | null>,
+	auth,
+	tags,
+	refresh,
+)
 const { currentMember } = organizationContext
 
 provideOrganizationContext(organizationContext)
 
-const title = `${organization.value.name} - Organization`
-const description = `${organization.value.description} - View the organization ${organization.value.name} on Modrinth`
-
-useSeoMeta({
-	title,
-	description,
-	ogTitle: title,
-	ogDescription: organization.value.description,
-	ogImage: organization.value.icon_url ?? 'https://cdn.modrinth.com/placeholder.png',
-})
+watch(
+	organization,
+	(org) => {
+		if (org) {
+			const title = `${org.name} - Organization`
+			const description = `${org.description} - View the organization ${org.name} on Modrinth`
+
+			useSeoMeta({
+				title,
+				description,
+				ogTitle: title,
+				ogDescription: org.description,
+				ogImage: org.icon_url ?? 'https://cdn.modrinth.com/placeholder.png',
+			})
+		}
+	},
+	{ immediate: true },
+)
 
 const navLinks = computed(() => [
 	{

From 33246438b5e4da057202504b443390c09663f759 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 2 Feb 2026 12:05:54 -0700
Subject: [PATCH 4/9] fix types

---
 apps/frontend/src/pages/organization/[id].vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/pages/organization/[id].vue b/apps/frontend/src/pages/organization/[id].vue
index 83332035fd..7bbbe8d9d8 100644
--- a/apps/frontend/src/pages/organization/[id].vue
+++ b/apps/frontend/src/pages/organization/[id].vue
@@ -382,7 +382,7 @@ const refresh = async () => {
 const acceptedMembers = computed(() => {
 	const acceptedMembers = organization.value?.members?.filter((x) => x.accepted) ?? []
 	const owner = acceptedMembers.find((x) => x.is_owner)
-	const rest = acceptedMembers.filter((x) => !x.is_owner) || []
+	const rest = acceptedMembers.filter((x) => !x.is_owner) ?? []
 
 	rest.sort((a, b) => {
 		if (a.role === b.role) {
@@ -392,7 +392,7 @@ const acceptedMembers = computed(() => {
 		}
 	})
 
-	return [owner, ...rest].filter(Boolean)
+	return owner ? [owner, ...rest] : rest
 })
 
 const isInvited = computed(() => {

From ce639deda5566f1aaf5c7e0966bef51267cc7f05 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 2 Feb 2026 12:37:04 -0700
Subject: [PATCH 5/9] refactor collection page and include proper loading state

---
 apps/frontend/src/pages/collection/[id].vue | 897 +++++++++++---------
 1 file changed, 478 insertions(+), 419 deletions(-)

diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index 4e2e15638b..d29a61d850 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -1,362 +1,367 @@
 <template>
-	<ConfirmModal
-		v-if="canEdit"
-		ref="deleteModal"
-		:title="formatMessage(messages.deleteModalTitle)"
-		:description="formatMessage(messages.deleteModalDescription)"
-		:has-to-type="false"
-		:proceed-label="formatMessage(commonMessages.deleteLabel)"
-		@proceed="deleteCollection()"
-	/>
-	<NewModal v-if="canEdit" ref="editModal" :header="formatMessage(messages.editingCollection)">
-		<div class="flex w-[30rem] flex-col gap-3">
-			<div class="flow-root">
-				<div class="group relative float-end ml-4">
-					<OverflowMenu
-						v-tooltip="formatMessage(messages.editIconButton)"
-						class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
-						:options="[
-							{
-								id: 'select',
-								action: () => {
-									const input = iconInputRef?.$el?.querySelector('input')
-									input?.click()
+	<div v-if="isLoading" class="flex min-h-[50vh] items-center justify-center">
+		<SpinnerIcon class="h-12 w-12 animate-spin text-brand" />
+	</div>
+	<template v-else-if="collection && creator">
+		<ConfirmModal
+			v-if="canEdit"
+			ref="deleteModal"
+			:title="formatMessage(messages.deleteModalTitle)"
+			:description="formatMessage(messages.deleteModalDescription)"
+			:has-to-type="false"
+			:proceed-label="formatMessage(commonMessages.deleteLabel)"
+			@proceed="deleteCollection()"
+		/>
+		<NewModal v-if="canEdit" ref="editModal" :header="formatMessage(messages.editingCollection)">
+			<div class="flex w-[30rem] flex-col gap-3">
+				<div class="flow-root">
+					<div class="group relative float-end ml-4">
+						<OverflowMenu
+							v-tooltip="formatMessage(messages.editIconButton)"
+							class="m-0 cursor-pointer appearance-none border-none bg-transparent p-0 transition-transform group-active:scale-95"
+							:options="[
+								{
+									id: 'select',
+									action: () => {
+										const input = iconInputRef?.$el?.querySelector('input')
+										input?.click()
+									},
 								},
-							},
-							{
-								id: 'remove',
-								color: 'danger',
-								action: () => {
-									deletedIcon = true
-									previewImage = null
+								{
+									id: 'remove',
+									color: 'danger',
+									action: () => {
+										deletedIcon = true
+										previewImage = null
+									},
+									shown: !deletedIcon && (previewImage || collection.icon_url),
 								},
-								shown: !deletedIcon && (previewImage || collection.icon_url),
-							},
-						]"
-					>
-						<Avatar
-							:src="deletedIcon ? null : previewImage ? previewImage : collection.icon_url"
-							size="108px"
-							class="!border-4 group-hover:brightness-75"
-							no-shadow
-						/>
-						<div class="absolute right-0 top-0 m-2">
-							<div
-								class="m-0 flex aspect-square items-center justify-center rounded-full border-[1px] border-solid border-button-border bg-button-bg p-2 text-primary"
-							>
-								<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
+							]"
+						>
+							<Avatar
+								:src="deletedIcon ? null : previewImage ? previewImage : collection.icon_url"
+								size="108px"
+								class="!border-4 group-hover:brightness-75"
+								no-shadow
+							/>
+							<div class="absolute right-0 top-0 m-2">
+								<div
+									class="m-0 flex aspect-square items-center justify-center rounded-full border-[1px] border-solid border-button-border bg-button-bg p-2 text-primary"
+								>
+									<EditIcon aria-hidden="true" class="h-4 w-4 text-primary" />
+								</div>
 							</div>
-						</div>
-						<template #select>
-							<UploadIcon />
-							{{
-								previewImage || collection.icon_url
-									? formatMessage(messages.replaceIcon)
-									: formatMessage(messages.selectIcon)
-							}}
-						</template>
-						<template #remove>
-							<XIcon />
-							{{ formatMessage(messages.removeIconButton) }}
-						</template>
-					</OverflowMenu>
-					<FileInput
-						id="collection-icon-input"
-						ref="iconInputRef"
-						:max-size="262144"
-						:show-icon="false"
-						accept="image/png,image/jpeg,image/gif,image/webp"
-						class="hidden"
-						aria-label="Upload icon"
-						@change="showPreviewImage"
-					/>
-				</div>
-				<div class="overflow-hidden">
-					<label class="mb-2 block text-lg font-semibold text-contrast" for="collection-title">
-						{{ formatMessage(commonMessages.titleLabel) }}
+							<template #select>
+								<UploadIcon />
+								{{
+									previewImage || collection.icon_url
+										? formatMessage(messages.replaceIcon)
+										: formatMessage(messages.selectIcon)
+								}}
+							</template>
+							<template #remove>
+								<XIcon />
+								{{ formatMessage(messages.removeIconButton) }}
+							</template>
+						</OverflowMenu>
+						<FileInput
+							id="collection-icon-input"
+							ref="iconInputRef"
+							:max-size="262144"
+							:show-icon="false"
+							accept="image/png,image/jpeg,image/gif,image/webp"
+							class="hidden"
+							aria-label="Upload icon"
+							@change="showPreviewImage"
+						/>
+					</div>
+					<div class="overflow-hidden">
+						<label class="mb-2 block text-lg font-semibold text-contrast" for="collection-title">
+							{{ formatMessage(commonMessages.titleLabel) }}
+						</label>
+						<input
+							id="collection-title"
+							v-model="current.name"
+							maxlength="255"
+							type="text"
+							autocomplete="off"
+							class="w-full"
+						/>
+					</div>
+					<label
+						class="mb-2 mt-4 block text-lg font-semibold text-contrast"
+						for="collection-description"
+					>
+						{{ formatMessage(commonMessages.descriptionLabel) }}
 					</label>
-					<input
-						id="collection-title"
-						v-model="current.name"
-						maxlength="255"
-						type="text"
-						autocomplete="off"
-						class="w-full"
-					/>
-				</div>
-				<label
-					class="mb-2 mt-4 block text-lg font-semibold text-contrast"
-					for="collection-description"
-				>
-					{{ formatMessage(commonMessages.descriptionLabel) }}
-				</label>
-				<div class="textarea-wrapper h-24">
-					<textarea id="collection-description" v-model="current.description" maxlength="255" />
+					<div class="textarea-wrapper h-24">
+						<textarea id="collection-description" v-model="current.description" maxlength="255" />
+					</div>
+					<label for="visibility" class="mb-2 mt-4 block text-lg font-semibold text-contrast">
+						{{ formatMessage(commonMessages.visibilityLabel) }}
+					</label>
+					<RadioButtons v-model="current.status" :items="['listed', 'unlisted', 'private']">
+						<template #default="{ item }">
+							<span class="flex items-center gap-1">
+								{{
+									item === 'listed'
+										? formatMessage(commonMessages.publicLabel)
+										: formatMessage(commonMessages[`${item}Label`])
+								}}
+							</span>
+						</template>
+					</RadioButtons>
 				</div>
-				<label for="visibility" class="mb-2 mt-4 block text-lg font-semibold text-contrast">
-					{{ formatMessage(commonMessages.visibilityLabel) }}
-				</label>
-				<RadioButtons v-model="current.status" :items="['listed', 'unlisted', 'private']">
-					<template #default="{ item }">
-						<span class="flex items-center gap-1">
+				<div class="flex justify-end gap-2">
+					<ButtonStyled class="w-24">
+						<button @click="() => editModal?.hide()">
+							<XIcon aria-hidden="true" />
+							{{ formatMessage(commonMessages.cancelButton) }}
+						</button>
+					</ButtonStyled>
+					<ButtonStyled color="brand" class="w-36">
+						<button :disabled="saving" @click="save()">
+							<SpinnerIcon v-if="saving" class="animate-spin" aria-hidden="true" />
+							<SaveIcon v-else aria-hidden="true" />
 							{{
-								item === 'listed'
-									? formatMessage(commonMessages.publicLabel)
-									: formatMessage(commonMessages[`${item}Label`])
+								saving
+									? formatMessage(commonMessages.savingButton)
+									: formatMessage(commonMessages.saveButton)
 							}}
-						</span>
-					</template>
-				</RadioButtons>
-			</div>
-			<div class="flex justify-end gap-2">
-				<ButtonStyled class="w-24">
-					<button @click="() => editModal?.hide()">
-						<XIcon aria-hidden="true" />
-						{{ formatMessage(commonMessages.cancelButton) }}
-					</button>
-				</ButtonStyled>
-				<ButtonStyled color="brand" class="w-36">
-					<button :disabled="saving" @click="save()">
-						<SpinnerIcon v-if="saving" class="animate-spin" aria-hidden="true" />
-						<SaveIcon v-else aria-hidden="true" />
-						{{
-							saving
-								? formatMessage(commonMessages.savingButton)
-								: formatMessage(commonMessages.saveButton)
-						}}
-					</button>
-				</ButtonStyled>
+						</button>
+					</ButtonStyled>
+				</div>
 			</div>
-		</div>
-	</NewModal>
-	<NormalPage :sidebar="cosmetics.leftContentLayout ? 'left' : 'right'">
-		<template #header>
-			<div class="flex flex-col gap-6">
-				<ClientOnly>
-					<nuxt-link
-						v-if="returnLink"
-						:to="returnLink.link"
-						class="flex w-fit items-center gap-1 text-brand-blue hover:underline"
-					>
-						<ChevronLeftIcon aria-hidden="true" />
-						{{ formatMessage(returnLink.message, { user: creator.username }) }}
-					</nuxt-link>
-				</ClientOnly>
-				<div class="grid grid-cols-[auto_1fr] gap-4 sm:grid-cols-[auto_1fr_auto]">
-					<Avatar :src="collection.icon_url" size="64px" />
-					<div class="flex flex-col gap-3">
-						<h1 class="heading-2xl">
-							{{ collection.name }}
-						</h1>
-						<div class="flex items-center gap-2">
-							<template v-if="canEdit || collection.status !== 'listed'">
-								<div class="flex items-center gap-1">
-									<template v-if="collection.status === 'listed'">
-										<GlobeIcon aria-hidden="true" />
-										{{ formatMessage(commonMessages.publicLabel) }}
-									</template>
-									<template v-else-if="collection.status === 'unlisted'">
-										<LinkIcon aria-hidden="true" />
-										{{ formatMessage(commonMessages.unlistedLabel) }}
-									</template>
-									<template v-else-if="collection.status === 'private'">
-										<LockIcon aria-hidden="true" />
-										{{ formatMessage(commonMessages.privateLabel) }}
-									</template>
-									<template v-else-if="collection.status === 'rejected'">
-										<XIcon aria-hidden="true" />
-										{{ formatMessage(commonMessages.rejectedLabel) }}
-									</template>
-								</div>
-								<span class="text-secondary">•</span>
+		</NewModal>
+		<NormalPage :sidebar="cosmetics.leftContentLayout ? 'left' : 'right'">
+			<template #header>
+				<div class="flex flex-col gap-6">
+					<ClientOnly>
+						<nuxt-link
+							v-if="returnLink"
+							:to="returnLink.link"
+							class="flex w-fit items-center gap-1 text-brand-blue hover:underline"
+						>
+							<ChevronLeftIcon aria-hidden="true" />
+							{{ formatMessage(returnLink.message, { user: creator.username }) }}
+						</nuxt-link>
+					</ClientOnly>
+					<div class="grid grid-cols-[auto_1fr] gap-4 sm:grid-cols-[auto_1fr_auto]">
+						<Avatar :src="collection.icon_url" size="64px" />
+						<div class="flex flex-col gap-3">
+							<h1 class="heading-2xl">
+								{{ collection.name }}
+							</h1>
+							<div class="flex items-center gap-2">
+								<template v-if="canEdit || collection.status !== 'listed'">
+									<div class="flex items-center gap-1">
+										<template v-if="collection.status === 'listed'">
+											<GlobeIcon aria-hidden="true" />
+											{{ formatMessage(commonMessages.publicLabel) }}
+										</template>
+										<template v-else-if="collection.status === 'unlisted'">
+											<LinkIcon aria-hidden="true" />
+											{{ formatMessage(commonMessages.unlistedLabel) }}
+										</template>
+										<template v-else-if="collection.status === 'private'">
+											<LockIcon aria-hidden="true" />
+											{{ formatMessage(commonMessages.privateLabel) }}
+										</template>
+										<template v-else-if="collection.status === 'rejected'">
+											<XIcon aria-hidden="true" />
+											{{ formatMessage(commonMessages.rejectedLabel) }}
+										</template>
+									</div>
+									<span class="text-secondary">•</span>
+								</template>
+								<span>
+									<IntlFormatted
+										:message-id="messages.projectsCountLabel"
+										:values="{
+											count: formatCompactNumber(projects?.length || 0),
+											type: formatMessage(
+												commonProjectTypeSentenceMessages[
+													projectTypes.length === 1 ? projectTypes[0] : 'project'
+												],
+												{ count: projects?.length || 0 },
+											),
+										}"
+									>
+										<template #stat="{ children }">
+											<span class="primary-stat__counter">
+												<component :is="() => normalizeChildren(children)" />
+											</span>
+										</template>
+									</IntlFormatted>
+								</span>
+							</div>
+						</div>
+						<div class="col-span-2 flex gap-2 sm:col-span-1">
+							<template v-if="canEdit">
+								<ButtonStyled>
+									<button @click="openEditModal">
+										<EditIcon aria-hidden="true" />
+										{{ formatMessage(commonMessages.editButton) }}
+									</button>
+								</ButtonStyled>
+								<ButtonStyled color="red" color-fill="text">
+									<button @click="() => $refs.deleteModal.show()">
+										<TrashIcon aria-hidden="true" />
+										{{ formatMessage(commonMessages.deleteLabel) }}
+									</button>
+								</ButtonStyled>
 							</template>
-							<span>
-								<IntlFormatted
-									:message-id="messages.projectsCountLabel"
-									:values="{
-										count: formatCompactNumber(projects?.length || 0),
-										type: formatMessage(
-											commonProjectTypeSentenceMessages[
-												projectTypes.length === 1 ? projectTypes[0] : 'project'
-											],
-											{ count: projects?.length || 0 },
-										),
-									}"
-								>
-									<template #stat="{ children }">
-										<span class="primary-stat__counter">
-											<component :is="() => normalizeChildren(children)" />
-										</span>
-									</template>
-								</IntlFormatted>
-							</span>
 						</div>
 					</div>
-					<div class="col-span-2 flex gap-2 sm:col-span-1">
-						<template v-if="canEdit">
-							<ButtonStyled>
-								<button @click="openEditModal">
-									<EditIcon aria-hidden="true" />
-									{{ formatMessage(commonMessages.editButton) }}
-								</button>
-							</ButtonStyled>
-							<ButtonStyled color="red" color-fill="text">
-								<button @click="() => $refs.deleteModal.show()">
-									<TrashIcon aria-hidden="true" />
-									{{ formatMessage(commonMessages.deleteLabel) }}
-								</button>
-							</ButtonStyled>
-						</template>
-					</div>
+					<HorizontalRule />
 				</div>
-				<HorizontalRule />
-			</div>
-		</template>
-		<template #sidebar>
-			<SidebarCard
-				v-if="collection.description"
-				:title="formatMessage(commonMessages.descriptionLabel)"
-			>
-				<p class="m-0">{{ collection.description }}</p>
-			</SidebarCard>
-			<SidebarCard
-				v-if="collection.id !== 'following'"
-				:title="formatMessage(messages.curatedByLabel)"
-			>
-				<nuxt-link
-					class="group flex w-fit items-center gap-2 leading-[1.2] text-primary"
-					:to="`/user/${creator.username}`"
+			</template>
+			<template #sidebar>
+				<SidebarCard
+					v-if="collection.description"
+					:title="formatMessage(commonMessages.descriptionLabel)"
+				>
+					<p class="m-0">{{ collection.description }}</p>
+				</SidebarCard>
+				<SidebarCard
+					v-if="collection.id !== 'following'"
+					:title="formatMessage(messages.curatedByLabel)"
 				>
-					<Avatar :src="creator.avatar_url" :alt="creator.username" size="32px" circle />
-					<div class="flex flex-col">
+					<nuxt-link
+						class="group flex w-fit items-center gap-2 leading-[1.2] text-primary"
+						:to="`/user/${creator.username}`"
+					>
+						<Avatar :src="creator.avatar_url" :alt="creator.username" size="32px" circle />
+						<div class="flex flex-col">
+							<span
+								class="grid w-full grid-cols-[1fr_auto] flex-nowrap items-center gap-1 group-hover:underline"
+							>
+								<span class="min-w-0 overflow-hidden truncate">{{ creator.username }}</span>
+							</span>
+						</div>
+					</nuxt-link>
+				</SidebarCard>
+				<AdPlaceholder v-if="!auth.user" />
+				<SidebarCard
+					v-if="collection.id !== 'following'"
+					:title="formatMessage(commonMessages.detailsLabel)"
+				>
+					<div class="flex flex-col gap-2">
 						<span
-							class="grid w-full grid-cols-[1fr_auto] flex-nowrap items-center gap-1 group-hover:underline"
+							v-tooltip="dayjs(collection.created).format('MMMM D, YYYY [at] h:mm A')"
+							class="flex w-fit items-center gap-2"
 						>
-							<span class="min-w-0 overflow-hidden truncate">{{ creator.username }}</span>
+							<CalendarIcon aria-hidden="true" />
+							{{
+								formatMessage(messages.createdAtLabel, {
+									ago: formatRelativeTime(collection.created),
+								})
+							}}
+						</span>
+						<span
+							v-if="showUpdatedDate"
+							v-tooltip="dayjs(collection.updated).format('MMMM D, YYYY [at] h:mm A')"
+							class="flex w-fit items-center gap-2"
+						>
+							<UpdatedIcon aria-hidden="true" />
+							{{
+								formatMessage(messages.updatedAtLabel, {
+									ago: formatRelativeTime(collection.updated),
+								})
+							}}
 						</span>
 					</div>
-				</nuxt-link>
-			</SidebarCard>
-			<AdPlaceholder v-if="!auth.user" />
-			<SidebarCard
-				v-if="collection.id !== 'following'"
-				:title="formatMessage(commonMessages.detailsLabel)"
-			>
-				<div class="flex flex-col gap-2">
-					<span
-						v-tooltip="dayjs(collection.created).format('MMMM D, YYYY [at] h:mm A')"
-						class="flex w-fit items-center gap-2"
-					>
-						<CalendarIcon aria-hidden="true" />
-						{{
-							formatMessage(messages.createdAtLabel, {
-								ago: formatRelativeTime(collection.created),
-							})
-						}}
-					</span>
-					<span
-						v-if="showUpdatedDate"
-						v-tooltip="dayjs(collection.updated).format('MMMM D, YYYY [at] h:mm A')"
-						class="flex w-fit items-center gap-2"
-					>
-						<UpdatedIcon aria-hidden="true" />
-						{{
-							formatMessage(messages.updatedAtLabel, {
-								ago: formatRelativeTime(collection.updated),
-							})
-						}}
-					</span>
-				</div>
-			</SidebarCard>
-		</template>
-		<NavTabs
-			v-if="projects && projectTypes.length > 1"
-			:links="[
-				{
-					label: formatMessage(commonMessages.allProjectType),
-					href: `/collection/${collection.id}`,
-				},
-				...projectTypes.map((x) => {
-					return {
-						label: formatMessage(commonProjectTypeCategoryMessages[x]),
-						href: `/collection/${collection.id}/${x}s`,
-					}
-				}),
-			]"
-		/>
+				</SidebarCard>
+			</template>
+			<NavTabs
+				v-if="projects && projectTypes.length > 1"
+				:links="[
+					{
+						label: formatMessage(commonMessages.allProjectType),
+						href: `/collection/${collection.id}`,
+					},
+					...projectTypes.map((x) => {
+						return {
+							label: formatMessage(commonProjectTypeCategoryMessages[x]),
+							href: `/collection/${collection.id}/${x}s`,
+						}
+					}),
+				]"
+			/>
 
-		<div
-			v-if="projects && projects?.length > 0"
-			:class="'project-list display-mode--' + (cosmetics.searchDisplayMode.collection || 'list')"
-		>
-			<ProjectCard
-				v-for="project in (route.params.projectType !== undefined
-					? projects.filter(
-							(x) =>
-								x.project_type ===
-								route.params.projectType.substr(0, route.params.projectType.length - 1),
-						)
-					: projects
-				)
-					.slice()
-					.sort((a, b) => b.downloads - a.downloads)"
-				:id="project.id"
-				:key="project.id"
-				:type="project.project_type"
-				:categories="project.categories"
-				:created-at="project.published"
-				:updated-at="project.updated"
-				:description="project.description"
-				:downloads="project.downloads ? project.downloads.toString() : '0'"
-				:follows="project.followers ? project.followers.toString() : '0'"
-				:featured-image="project.gallery.find((element) => element.featured)?.url"
-				:icon-url="project.icon_url"
-				:name="project.title"
-				:client-side="project.client_side"
-				:server-side="project.server_side"
-				:color="project.color"
-				:show-updated-date="!canEdit && collection.id !== 'following'"
-				:show-created-date="!canEdit && collection.id !== 'following'"
+			<div
+				v-if="projects && projects.length > 0"
+				:class="'project-list display-mode--' + (cosmetics.searchDisplayMode.collection || 'list')"
 			>
-				<button
-					v-if="canEdit"
-					class="iconified-button remove-btn"
-					:disabled="removing"
-					@click="() => removeProject(project)"
-				>
-					<SpinnerIcon v-if="removing" class="animate-spin" aria-hidden="true" />
-					<XIcon v-else aria-hidden="true" />
-					{{ formatMessage(messages.removeProjectButton) }}
-				</button>
-				<button
-					v-if="collection.id === 'following'"
-					class="iconified-button"
-					@click="unfollowProject(project)"
+				<ProjectCard
+					v-for="project in (route.params.projectType !== undefined
+						? projects.filter(
+								(x) =>
+									x.project_type ===
+									route.params.projectType.substr(0, route.params.projectType.length - 1),
+							)
+						: projects
+					)
+						.slice()
+						.sort((a, b) => b.downloads - a.downloads)"
+					:id="project.id"
+					:key="project.id"
+					:type="project.project_type"
+					:categories="project.categories"
+					:created-at="project.published"
+					:updated-at="project.updated"
+					:description="project.description"
+					:downloads="project.downloads ? project.downloads.toString() : '0'"
+					:follows="project.followers ? project.followers.toString() : '0'"
+					:featured-image="project.gallery.find((element) => element.featured)?.url"
+					:icon-url="project.icon_url"
+					:name="project.title"
+					:client-side="project.client_side"
+					:server-side="project.server_side"
+					:color="project.color"
+					:show-updated-date="!canEdit && collection.id !== 'following'"
+					:show-created-date="!canEdit && collection.id !== 'following'"
 				>
-					<HeartMinusIcon aria-hidden="true" />
-					{{ formatMessage(messages.unfollowProjectButton) }}
-				</button>
-			</ProjectCard>
-		</div>
-		<div v-else>
-			<div class="mx-auto flex flex-col justify-center gap-8 p-6 text-center">
-				<EmptyIllustration class="h-[120px] w-auto" />
-				<div class="-mt-4 flex flex-col gap-4">
-					<div class="flex flex-col items-center gap-1.5">
-						<span class="text-lg text-contrast md:text-2xl">{{
-							formatMessage(messages.noProjectsLabel)
-						}}</span>
+					<button
+						v-if="canEdit"
+						class="iconified-button remove-btn"
+						:disabled="removing"
+						@click="() => removeProject(project)"
+					>
+						<SpinnerIcon v-if="removing" class="animate-spin" aria-hidden="true" />
+						<XIcon v-else aria-hidden="true" />
+						{{ formatMessage(messages.removeProjectButton) }}
+					</button>
+					<button
+						v-if="collection.id === 'following'"
+						class="iconified-button"
+						@click="unfollowProject(project)"
+					>
+						<HeartMinusIcon aria-hidden="true" />
+						{{ formatMessage(messages.unfollowProjectButton) }}
+					</button>
+				</ProjectCard>
+			</div>
+			<div v-else>
+				<div class="mx-auto flex flex-col justify-center gap-8 p-6 text-center">
+					<EmptyIllustration class="h-[120px] w-auto" />
+					<div class="-mt-4 flex flex-col gap-4">
+						<div class="flex flex-col items-center gap-1.5">
+							<span class="text-lg text-contrast md:text-2xl">{{
+								formatMessage(messages.noProjectsLabel)
+							}}</span>
+						</div>
+						<ButtonStyled v-if="auth.user && auth.user.id === creator.id" color="brand">
+							<nuxt-link class="mx-auto w-min" to="/discover/mods">
+								<CompassIcon class="size-5" />
+								Discover mods
+							</nuxt-link>
+						</ButtonStyled>
 					</div>
-					<ButtonStyled v-if="auth.user && auth.user.id === creator.id" color="brand">
-						<nuxt-link class="mx-auto w-min" to="/discover/mods">
-							<CompassIcon class="size-5" />
-							Discover mods
-						</nuxt-link>
-					</ButtonStyled>
 				</div>
 			</div>
-		</div>
-	</NormalPage>
+		</NormalPage>
+	</template>
 </template>
 
 <script setup>
@@ -402,6 +407,7 @@ import {
 	useVIntl,
 } from '@modrinth/ui'
 import { isAdmin } from '@modrinth/utils'
+import { useQuery } from '@tanstack/vue-query'
 import dayjs from 'dayjs'
 
 import AdPlaceholder from '~/components/ui/AdPlaceholder.vue'
@@ -518,76 +524,121 @@ const returnLink = computed(() => {
 	return null
 })
 
-let collection, refreshCollection, creator, projects
-
-try {
-	if (route.params.id === 'following') {
-		collection = ref({
-			id: 'following',
-			icon_url: 'https://cdn.modrinth.com/follow-collection.png',
-			name: formatMessage(commonMessages.followedProjectsLabel),
-			description: formatMessage(messages.followingCollectionDescription),
-			status: 'private',
-			user: auth.value.user.id,
-			created: auth.value.user.created,
-			updated: auth.value.user.created,
-		})
-		;[{ data: projects }] = await Promise.all([
-			useAsyncData(
-				`user/${auth.value.user.id}/follows`,
-				() => useBaseFetch(`user/${auth.value.user.id}/follows`),
-				{
-					transform: (projects) => {
-						for (const project of projects) {
-							project.categories = project.categories.concat(project.loaders)
-						}
+const isFollowingCollection = computed(() => route.params.id === 'following')
+const collectionId = computed(() => route.params.id)
+
+// Static collection for "following" page
+const followingCollection = computed(() =>
+	isFollowingCollection.value
+		? {
+				id: 'following',
+				icon_url: 'https://cdn.modrinth.com/follow-collection.png',
+				name: formatMessage(commonMessages.followedProjectsLabel),
+				description: formatMessage(messages.followingCollectionDescription),
+				status: 'private',
+				user: auth.value.user?.id,
+				created: auth.value.user?.created,
+				updated: auth.value.user?.created,
+			}
+		: null,
+)
 
-						return projects
-					},
-				},
-			),
-		])
-		creator = ref(auth.value.user)
-		refreshCollection = async () => {}
-	} else {
-		const val = await useAsyncData(`collection/${route.params.id}`, () =>
-			useBaseFetch(`collection/${route.params.id}`, { apiVersion: 3 }),
-		)
-		collection = val.data
-		refreshCollection = val.refresh
-		;[{ data: creator }, { data: projects }] = await Promise.all([
-			await useAsyncData(`user/${collection.value.user}`, () =>
-				useBaseFetch(`user/${collection.value.user}`),
-			),
-			useAsyncData(
-				`projects?ids=${encodeURIComponent(JSON.stringify(collection.value.projects))}`,
-				() =>
-					fetchSegmented(
-						collection.value.projects,
-						(ids) => `projects?ids=${asEncodedJsonArray(ids)}`,
-					),
-				{
-					transform: (projects) => {
-						for (const project of projects) {
-							project.categories = project.categories.concat(project.loaders)
-						}
+// Query for regular collections
+const {
+	data: fetchedCollection,
+	refetch: refreshFetchedCollection,
+	isError: collectionIsError,
+	isPending: collectionIsPending,
+} = useQuery({
+	queryKey: computed(() => ['collection', collectionId.value]),
+	queryFn: async () => {
+		const data = await useBaseFetch(`collection/${collectionId.value}`, { apiVersion: 3 })
+		if (!data) {
+			throw createError({
+				fatal: true,
+				statusCode: 404,
+				message: formatMessage(messages.collectionNotFoundError),
+			})
+		}
+		return data
+	},
+	enabled: computed(() => !isFollowingCollection.value),
+})
 
-						return projects
-					},
-				},
-			),
-		])
+// Unified collection ref
+const collection = computed(() => followingCollection.value ?? fetchedCollection.value)
+const refreshCollection = async () => {
+	if (!isFollowingCollection.value) {
+		await refreshFetchedCollection()
 	}
-} catch (err) {
-	console.error(err)
-	throw createError({
-		fatal: true,
-		statusCode: 404,
-		message: formatMessage(messages.collectionNotFoundError),
-	})
 }
 
-if (!collection.value) {
+// Query for creator (only for regular collections)
+const { data: fetchedCreator, isPending: creatorIsPending } = useQuery({
+	queryKey: computed(() => ['user', collection.value?.user]),
+	queryFn: () => useBaseFetch(`user/${collection.value?.user}`),
+	enabled: computed(() => !isFollowingCollection.value && !!collection.value?.user),
+})
+
+// Unified creator ref
+const creator = computed(() =>
+	isFollowingCollection.value ? auth.value.user : fetchedCreator.value,
+)
+
+// Query for followed projects
+const {
+	data: followedProjects,
+	refetch: refetchFollowedProjects,
+	isPending: followedProjectsIsPending,
+} = useQuery({
+	queryKey: computed(() => ['user', auth.value.user?.id, 'follows']),
+	queryFn: async () => {
+		const projects = await useBaseFetch(`user/${auth.value.user.id}/follows`)
+		for (const project of projects) {
+			project.categories = project.categories.concat(project.loaders)
+		}
+		return projects
+	},
+	enabled: computed(() => isFollowingCollection.value && !!auth.value.user?.id),
+	placeholderData: [],
+})
+
+// Query for collection projects
+const {
+	data: collectionProjects,
+	refetch: refetchCollectionProjects,
+	isFetching: collectionProjectsIsFetching,
+} = useQuery({
+	queryKey: computed(() => ['projects', collection.value?.projects]),
+	queryFn: async () => {
+		const projects = await fetchSegmented(
+			collection.value.projects,
+			(ids) => `projects?ids=${asEncodedJsonArray(ids)}`,
+		)
+		for (const project of projects) {
+			project.categories = project.categories.concat(project.loaders)
+		}
+		return projects
+	},
+	enabled: computed(() => !isFollowingCollection.value && !!collection.value?.projects?.length),
+	placeholderData: [],
+})
+
+// Unified projects ref
+const projects = computed(() =>
+	isFollowingCollection.value ? followedProjects.value : collectionProjects.value,
+)
+
+// Loading state
+const isLoading = computed(() => {
+	if (isFollowingCollection.value) {
+		return followedProjectsIsPending.value
+	}
+	return collectionIsPending.value || creatorIsPending.value || collectionProjectsIsFetching.value
+})
+
+// Handle 404 for regular collections
+if (collectionIsError.value) {
 	throw createError({
 		fatal: true,
 		statusCode: 404,
@@ -596,25 +647,33 @@ if (!collection.value) {
 }
 
 const title = computed(() =>
-	formatMessage(messages.collectionTitle, { name: collection.value.name }),
+	collection.value ? formatMessage(messages.collectionTitle, { name: collection.value.name }) : '',
 )
 
-useSeoMeta({
-	title,
-	description: () =>
-		formatMessage(messages.collectionDescription, {
-			name: collection.value.name,
-			description: collection.value.description,
-			username: creator.value.username,
-		}),
-	ogTitle: title,
-	ogDescription: collection.value.description,
-	ogImage: collection.value.icon_url ?? 'https://cdn.modrinth.com/placeholder.png',
-	robots: collection.value.status === 'listed' ? 'all' : 'noindex',
-})
+watch(
+	[collection, creator],
+	([col, cre]) => {
+		if (col && cre) {
+			useSeoMeta({
+				title: formatMessage(messages.collectionTitle, { name: col.name }),
+				description: formatMessage(messages.collectionDescription, {
+					name: col.name,
+					description: col.description,
+					username: cre.username,
+				}),
+				ogTitle: formatMessage(messages.collectionTitle, { name: col.name }),
+				ogDescription: col.description,
+				ogImage: col.icon_url ?? 'https://cdn.modrinth.com/placeholder.png',
+				robots: col.status === 'listed' ? 'all' : 'noindex',
+			})
+		}
+	},
+	{ immediate: true },
+)
 
 const canEdit = computed(
 	() =>
+		collection.value &&
 		auth.value.user &&
 		(auth.value.user.id === collection.value.user || isAdmin(auth.value.user)) &&
 		collection.value.id !== 'following',
@@ -650,9 +709,9 @@ const {
 	save: saveCollection,
 } = useSavable(
 	() => ({
-		name: collection.value.name,
-		description: collection.value.description || null,
-		status: collection.value.status,
+		name: collection.value?.name ?? '',
+		description: collection.value?.description || null,
+		status: collection.value?.status ?? 'private',
 	}),
 	async (changes) => {
 		saving.value = true
@@ -689,7 +748,7 @@ const {
 
 async function unfollowProject(project) {
 	await userFollowProject(project)
-	projects.value = projects.value.filter((x) => x.id !== project.id)
+	await refetchFollowedProjects()
 }
 
 async function removeProject(project) {
@@ -704,7 +763,7 @@ async function removeProject(project) {
 		})
 
 		await refreshCollection()
-		projects.value = projects.value.filter((x) => x.id !== project.id)
+		await refetchCollectionProjects()
 		await initUserCollections()
 	} catch (err) {
 		handleError(err)

From 40d9865f2ef837d6fab8c27c6b0305f6b8a18266 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 2 Feb 2026 12:41:16 -0700
Subject: [PATCH 6/9] fix followed projects proper loading state

---
 apps/frontend/src/pages/collection/[id].vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index d29a61d850..4364516440 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -589,7 +589,7 @@ const creator = computed(() =>
 const {
 	data: followedProjects,
 	refetch: refetchFollowedProjects,
-	isPending: followedProjectsIsPending,
+	isFetching: followedProjectsIsFetching,
 } = useQuery({
 	queryKey: computed(() => ['user', auth.value.user?.id, 'follows']),
 	queryFn: async () => {
@@ -632,7 +632,7 @@ const projects = computed(() =>
 // Loading state
 const isLoading = computed(() => {
 	if (isFollowingCollection.value) {
-		return followedProjectsIsPending.value
+		return followedProjectsIsFetching.value
 	}
 	return collectionIsPending.value || creatorIsPending.value || collectionProjectsIsFetching.value
 })

From 4930830e65cf750c09f355809a8b2a417d2218d7 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 2 Feb 2026 12:45:00 -0700
Subject: [PATCH 7/9] fix 404 handling

---
 apps/frontend/src/pages/collection/[id].vue | 22 +++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index 4364516440..1608bc6b66 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -637,14 +637,20 @@ const isLoading = computed(() => {
 	return collectionIsPending.value || creatorIsPending.value || collectionProjectsIsFetching.value
 })
 
-// Handle 404 for regular collections
-if (collectionIsError.value) {
-	throw createError({
-		fatal: true,
-		statusCode: 404,
-		message: formatMessage(messages.collectionNotFoundError),
-	})
-}
+// 404 handling - throw error when collection fetch fails
+watch(
+	collectionIsError,
+	(isError) => {
+		if (isError) {
+			throw createError({
+				fatal: true,
+				statusCode: 404,
+				message: formatMessage(messages.collectionNotFoundError),
+			})
+		}
+	},
+	{ immediate: true },
+)
 
 const title = computed(() =>
 	collection.value ? formatMessage(messages.collectionTitle, { name: collection.value.name }) : '',

From 56167a33288c9f3597049b2c96bc6c48b2dff0f5 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 2 Feb 2026 12:50:46 -0700
Subject: [PATCH 8/9] fix organization loading and 404 states

---
 apps/frontend/src/pages/organization/[id].vue | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/pages/organization/[id].vue b/apps/frontend/src/pages/organization/[id].vue
index 7bbbe8d9d8..f53a3169c3 100644
--- a/apps/frontend/src/pages/organization/[id].vue
+++ b/apps/frontend/src/pages/organization/[id].vue
@@ -1,6 +1,9 @@
 <template>
+	<div v-if="isLoading" class="flex min-h-[50vh] items-center justify-center">
+		<SpinnerIcon class="h-12 w-12 animate-spin text-brand" />
+	</div>
 	<div
-		v-if="organization"
+		v-else-if="organization"
 		class="experimental-styles-within new-page sidebar"
 		:class="{ 'alt-layout': cosmetics.leftContentLayout || routeHasSettings }"
 	>
@@ -258,6 +261,7 @@ import {
 	MoreVerticalIcon,
 	OrganizationIcon,
 	SettingsIcon,
+	SpinnerIcon,
 	UsersIcon,
 	XIcon,
 } from '@modrinth/assets'
@@ -315,6 +319,7 @@ const {
 	refetch: refreshOrganization,
 	isError,
 	error,
+	isPending: organizationIsPending,
 } = useQuery({
 	queryKey: computed(() => ['organization', orgId]),
 	queryFn: async (): Promise<Organization> => {
@@ -333,7 +338,11 @@ const {
 	},
 })
 
-const { data: projects, refetch: refreshProjects } = useQuery({
+const {
+	data: projects,
+	refetch: refreshProjects,
+	isFetching: projectsIsFetching,
+} = useQuery({
 	queryKey: computed(() => ['organization', orgId, 'projects']),
 	queryFn: async () => {
 		const projects = (await useBaseFetch(`organization/${orgId}/projects`, {
@@ -378,6 +387,27 @@ const refresh = async () => {
 	await Promise.all([refreshOrganization(), refreshProjects()])
 }
 
+// Loading state
+const isLoading = computed(() => {
+	if (isError.value) return false
+	return organizationIsPending.value || projectsIsFetching.value
+})
+
+// 404 handling - throw error when organization fetch fails
+watch(
+	isError,
+	(hasError) => {
+		if (hasError) {
+			throw createError({
+				fatal: true,
+				statusCode: 404,
+				message: 'Organization not found',
+			})
+		}
+	},
+	{ immediate: true },
+)
+
 // Filter accepted, sort by role, then by name and Owner role always goes first
 const acceptedMembers = computed(() => {
 	const acceptedMembers = organization.value?.members?.filter((x) => x.accepted) ?? []

From d65db6a32073e375f96ec13b446c7828c8742ba3 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Mon, 2 Feb 2026 13:10:27 -0700
Subject: [PATCH 9/9] pnpm prepr

---
 apps/frontend/src/pages/dashboard/analytics.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/frontend/src/pages/dashboard/analytics.vue b/apps/frontend/src/pages/dashboard/analytics.vue
index c16fc8701e..b73d9cf5d2 100644
--- a/apps/frontend/src/pages/dashboard/analytics.vue
+++ b/apps/frontend/src/pages/dashboard/analytics.vue
@@ -6,6 +6,7 @@
 
 <script setup>
 import { useQuery } from '@tanstack/vue-query'
+
 import ChartDisplay from '~/components/ui/charts/ChartDisplay.vue'
 
 definePageMeta({