refactor: removing useAsyncData for tanstack query

apps/frontend/src/components/ui/NewsletterButton.vue

@@ -1,19 +1,42 @@
 <script setup lang="ts">
 import { CheckIcon, MailIcon } from '@modrinth/assets'
-import { ButtonStyled } from '@modrinth/ui'
-import { ref } from 'vue'
+import { ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import { computed, ref } from 'vue'
 
 import { useBaseFetch } from '~/composables/fetch.js'
 
-const auth = await useAuth()
+const { formatMessage } = useVIntl()
+
+const messages = defineMessages({
+	tooltipSubscribe: {
+		id: 'ui.newsletter-button.tooltip',
+		defaultMessage: 'Subscribe to the Modrinth newsletter',
+	},
+	subscribe: {
+		id: 'ui.newsletter-button.subscribe',
+		defaultMessage: 'Subscribe',
+	},
+	subscribed: {
+		id: 'ui.newsletter-button.subscribed',
+		defaultMessage: 'Subscribed!',
+	},
+})
+
+const auth = (await useAuth()) as unknown as {
+	value: { user: { id: string; username: string; email: string; created: string } }
+}
+const queryClient = useQueryClient()
 const showSubscriptionConfirmation = ref(false)
-const showSubscribeButton = useAsyncData(
-	async () => {
+
+const { data: showSubscribeButton, isSuccess } = useQuery({
+	queryKey: computed(() => ['newsletter', 'subscribed', auth.value?.user?.id]),
+	queryFn: async () => {
 		if (auth.value?.user) {
 			try {
-				const { subscribed } = await useBaseFetch('auth/email/subscribe', {
+				const { subscribed } = (await useBaseFetch('auth/email/subscribe', {
 					method: 'GET',
-				})
+				})) as { subscribed: boolean }
 				return !subscribed
 			} catch {
 				return true
@@ -22,8 +45,8 @@ const showSubscribeButton = useAsyncData(
 			return false
 		}
 	},
-	{ watch: [auth], server: false },
-)
+	enabled: computed(() => !!auth.value?.user),
+})
 
 async function subscribe() {
 	try {
@@ -36,22 +59,19 @@ async function subscribe() {
 	} finally {
 		setTimeout(() => {
 			showSubscriptionConfirmation.value = false
-			showSubscribeButton.status.value = 'success'
-			showSubscribeButton.data.value = false
+			queryClient.setQueryData(['newsletter', 'subscribed', auth.value?.user?.id], false)
 		}, 2500)
 	}
 }
 </script>
 
 <template>
-	<ButtonStyled
-		v-if="showSubscribeButton.status.value === 'success' && showSubscribeButton.data.value"
-		color="brand"
-		type="outlined"
-	>
-		<button v-tooltip="`Subscribe to the Modrinth newsletter`" @click="subscribe">
-			<template v-if="!showSubscriptionConfirmation"> <MailIcon /> Subscribe </template>
-			<template v-else> <CheckIcon /> Subscribed! </template>
+	<ButtonStyled v-if="isSuccess && showSubscribeButton" color="brand" type="outlined">
+		<button v-tooltip="formatMessage(messages.tooltipSubscribe)" @click="subscribe">
+			<template v-if="!showSubscriptionConfirmation">
+				<MailIcon /> {{ formatMessage(messages.subscribe) }}
+			</template>
+			<template v-else> <CheckIcon /> {{ formatMessage(messages.subscribed) }} </template>
 		</button>
 	</ButtonStyled>
 </template>

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) {

apps/frontend/src/components/ui/report/ReportInfo.vue

@@ -1,7 +1,8 @@
 <template>
-	<div class="report">
+	<div v-if="report" class="report">
 		<div v-if="report.item_type === 'project'" class="item-info">
 			<nuxt-link
+				v-if="report.project"
 				:to="`/${$getProjectTypeForUrl(report.project.project_type, report.project.loaders)}/${
 					report.project.slug
 				}`"
@@ -38,27 +39,29 @@
 			</div>
 		</div>
 		<div v-else-if="report.item_type === 'version'" class="item-info">
-			<nuxt-link
-				:to="`/project/${report.project.slug}/version/${report.version.id}`"
-				class="iconified-link"
-			>
-				<div class="backed-svg" :class="{ raised: raised }">
-					<VersionIcon />
-				</div>
-				<span class="title">{{ report.version.name }}</span>
-			</nuxt-link>
-			of
-			<nuxt-link :to="`/project/${report.project.slug}`" class="iconified-stacked-link">
-				<Avatar :src="report.project.icon_url" size="xs" no-shadow :raised="raised" />
-				<div class="stacked">
-					<span class="title">{{ report.project.title }}</span>
-					<span>{{
-						formatProjectType(
-							getProjectTypeForUrl(report.project.project_type, report.project.loaders),
-						)
-					}}</span>
-				</div>
-			</nuxt-link>
+			<template v-if="report.version && report.project">
+				<nuxt-link
+					:to="`/project/${report.project.slug}/version/${report.version.id}`"
+					class="iconified-link"
+				>
+					<div class="backed-svg" :class="{ raised: raised }">
+						<VersionIcon />
+					</div>
+					<span class="title">{{ report.version.name }}</span>
+				</nuxt-link>
+				of
+				<nuxt-link :to="`/project/${report.project.slug}`" class="iconified-stacked-link">
+					<Avatar :src="report.project.icon_url" size="xs" no-shadow :raised="raised" />
+					<div class="stacked">
+						<span class="title">{{ report.project.title }}</span>
+						<span>{{
+							formatProjectType(
+								getProjectTypeForUrl(report.project.project_type, report.project.loaders),
+							)
+						}}</span>
+					</div>
+				</nuxt-link>
+			</template>
 		</div>
 		<div v-else class="item-info">
 			<div class="backed-svg" :class="{ raised: raised }">
@@ -79,7 +82,7 @@
 			:link="`/${moderation ? 'moderation' : 'dashboard'}/report/${report.id}`"
 			:auth="auth"
 		/>
-		<div class="reporter-info">
+		<div v-if="report.reporterUser" class="reporter-info">
 			<ReportIcon class="inline-svg" />
 			Reported by
 			<span v-if="auth.user.id === report.reporterUser.id">you</span>

apps/frontend/src/components/ui/report/ReportView.vue

@@ -9,7 +9,7 @@
 			<h2>Report details</h2>
 			<ReportInfo :report="report" :show-thread="false" :show-message="false" :auth="auth" />
 		</section>
-		<section class="universal-card">
+		<section v-if="report && thread" class="universal-card">
 			<h2>Messages</h2>
 			<ConversationThread
 				:thread="thread"
@@ -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>