refactor: removing useAsyncData for tanstack query (#5262)

* refactor: most places with useAsyncData replaced with tanstack query

* refactor report list and report view

* refactor organization page to use tanstack query

* fix types

* refactor collection page and include proper loading state

* fix followed projects proper loading state

* fix 404 handling

* fix organization loading and 404 states

* pnpm prepr

* refactor: remove useAsyncData on newsletter button

* refactor: remove useAsyncData on auth globals fetch

* refactor: settings/billing/index.vue to useQuery instead of useAsyncData

* refactor: user page to remove useAsyncData

* pnpm prepr

* fix reports pages

* fix notifications page

* fix billing page cannot read properties of null and prop warnings

* fix refresh causing 404 by removing useBaseFetch and use api-client

* fix stale data after removing organization from project

* pnpm prepr

* fix news erroring in build

* fix: project page loads header only after content

* fix: user page tanstack problems (start on migrating away from useBaseFetch)

* fix: start swapping useBaseFetch usages to api-client

* Revert "fix: start swapping useBaseFetch usages to api-client"

This reverts commit 3df3fab11d.

* fix: remove debug logging

* fix: lint

---------

Co-authored-by: Calum H. <calum@modrinth.com>
Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>

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>