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 3df3fab11d535159132b1288dd7cacc38282b553.

* fix: remove debug logging

* fix: lint

---------

Co-authored-by: Calum H. <calum@modrinth.com>
Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
This commit is contained in:
Truman Gao
2026-03-16 12:10:29 -07:00
committed by GitHub
parent d0c7575a23
commit 681ae5d1d8
53 changed files with 1686 additions and 1079 deletions

View File

@@ -735,10 +735,12 @@ import {
commonMessages,
commonProjectTypeCategoryMessages,
defineMessages,
injectModrinthClient,
OverflowMenu,
useVIntl,
} from '@modrinth/ui'
import { isAdmin, isStaff, UserBadge } from '@modrinth/utils'
import { useQuery } from '@tanstack/vue-query'
import { getTaxThreshold } from '@/providers/creator-withdraw.ts'
import TextLogo from '~/components/brand/TextLogo.vue'
@@ -775,10 +777,12 @@ const config = useRuntimeConfig()
const route = useNativeRoute()
const router = useNativeRouter()
const link = config.public.siteUrl + route.path.replace(/\/+$/, '')
const client = injectModrinthClient()
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: () => client.labrinth.payout_v3.getBalance(),
enabled: computed(() => !!auth.value.user),
})
const showTaxComplianceBanner = computed(() => {
@@ -1140,7 +1144,7 @@ async function onKeyDown(event) {
rCount.value++
if (randomProjects.value.length < 3) {
randomProjects.value = await useBaseFetch('projects_random?count=50').catch((err) => {
randomProjects.value = await client.labrinth.projects_v2.getRandom(50).catch((err) => {
console.error(err)
return []
})