refactor: remove useBaseFetch for @modrinth/api-client (#5596)

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

This reverts commit f4f33db7019ea861addb2c66c204d736800b7b6c.

* fix: bugs

* fix: analytics

* fix: lint

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

@@ -328,6 +328,7 @@ import {
 	Categories,
 	CopyCode,
 	DoubleIcon,
+	injectModrinthClient,
 	injectNotificationManager,
 	ProjectStatusBadge,
 	useFormatDateTime,
@@ -341,6 +342,7 @@ import { acceptTeamInvite, removeSelfFromTeam } from '~/helpers/teams'
 
 import ThreadSummary from './thread/ThreadSummary.vue'
 
+const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
 const emit = defineEmits(['update:notifications'])
 const formatRelativeTime = useRelativeTime()
@@ -407,7 +409,7 @@ async function read() {
 				? props.notification.grouped_notifs.map((notif) => notif.id)
 				: []),
 		]
-		const updateNotifs = await markAsRead(ids)
+		const updateNotifs = await markAsRead(client, ids)
 		const newNotifs = updateNotifs(props.notifications)
 		emit('update:notifications', newNotifs)
 	} catch (err) {

apps/frontend/src/components/ui/charts/ChartDisplay.vue

@@ -357,7 +357,7 @@ const props = withDefaults(
 	},
 )
 
-const projects = ref(props.projects || [])
+const projects = computed(() => props.projects || [])
 
 // const selectedChart = ref('downloads')
 const selectedChart = computed({
@@ -389,6 +389,13 @@ const tinyRevenueChart = ref()
 
 const selectedDisplayProjects = ref(props.projects || [])
 
+watch(
+	() => props.projects,
+	(newProjects) => {
+		selectedDisplayProjects.value = newProjects || []
+	},
+)
+
 const removeProjectFromDisplay = (id: string) => {
 	selectedDisplayProjects.value = selectedDisplayProjects.value.filter((p) => p.id !== id)
 }

apps/frontend/src/components/ui/create/CreateLimitAlert.vue

@@ -42,13 +42,18 @@
 
 <script setup lang="ts">
 import { MessageIcon } from '@modrinth/assets'
-import { Admonition, ButtonStyled, defineMessages, useVIntl } from '@modrinth/ui'
+import {
+	Admonition,
+	ButtonStyled,
+	defineMessages,
+	injectModrinthClient,
+	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 client = injectModrinthClient()
 const { formatMessage } = useVIntl()
 
 const messages = defineMessages({
@@ -100,33 +105,24 @@ const messages = defineMessages({
 	},
 })
 
-interface UserLimits {
-	current: number
-	max: number
-}
-
 const props = defineProps<{
 	type: 'project' | 'org' | 'collection'
 }>()
 
 const model = defineModel<boolean>()
 
-const apiEndpoint = computed(() => {
-	switch (props.type) {
-		case 'project':
-			return 'limits/projects'
-		case 'org':
-			return 'limits/organizations'
-		case 'collection':
-			return 'limits/collections'
-		default:
-			return 'limits/projects'
-	}
-})
-
 const { data: limits } = useQuery({
 	queryKey: computed(() => ['limits', props.type]),
-	queryFn: () => useBaseFetch(apiEndpoint.value, { apiVersion: 3 }) as Promise<UserLimits>,
+	queryFn: () => {
+		switch (props.type) {
+			case 'org':
+				return client.labrinth.limits_v3.getOrganizationLimits()
+			case 'collection':
+				return client.labrinth.limits_v3.getCollectionLimits()
+			default:
+				return client.labrinth.limits_v3.getProjectLimits()
+		}
+	},
 })
 
 const typeName = computed<{ singular: string; plural: string }>(() => {

apps/frontend/src/components/ui/dashboard/CreatorWithdrawModal.vue

@@ -107,6 +107,7 @@
 </template>
 
 <script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import {
 	ArrowLeftRightIcon,
 	ChevronRightIcon,
@@ -131,7 +132,6 @@ import {
 	getTaxThreshold,
 	getTaxThresholdActual,
 	type PaymentProvider,
-	type PayoutMethod,
 	provideWithdrawContext,
 	type WithdrawStage,
 } from '@/providers/creator-withdraw.ts'
@@ -146,21 +146,9 @@ import MuralpayKycStage from './withdraw-stages/MuralpayKycStage.vue'
 import TaxFormStage from './withdraw-stages/TaxFormStage.vue'
 import TremendousDetailsStage from './withdraw-stages/TremendousDetailsStage.vue'
 
-type FormCompletionStatus = 'unknown' | 'unrequested' | 'unsigned' | 'tin-mismatch' | 'complete'
-
-interface UserBalanceResponse {
-	available: number
-	withdrawn_lifetime: number
-	withdrawn_ytd: number
-	pending: number
-	dates: Record<string, number>
-	requested_form_type: string | null
-	form_completion_status: FormCompletionStatus | null
-}
-
 const props = defineProps<{
-	balance: UserBalanceResponse | null
-	preloadedPaymentData?: { country: string; methods: PayoutMethod[] } | null
+	balance: Labrinth.Payout.v3.PayoutBalance | null | undefined
+	preloadedPaymentData?: { country: string; methods: Labrinth.Payout.v3.PayoutMethod[] } | null
 }>()
 
 const emit = defineEmits<{

apps/frontend/src/components/ui/dashboard/RevenueTransaction.vue

@@ -66,6 +66,7 @@
 </template>
 
 <script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
 import {
 	ArrowDownIcon,
 	ArrowUpIcon,
@@ -89,31 +90,7 @@ import { Tooltip } from 'floating-vue'
 import { useGeneratedState } from '~/composables/generated'
 import { findRail } from '~/utils/muralpay-rails'
 
-type PayoutStatus = 'in-transit' | 'cancelling' | 'cancelled' | 'success' | 'failed'
-type PayoutMethodType = 'paypal' | 'venmo' | 'tremendous' | 'muralpay'
-type PayoutSource = 'creator_rewards' | 'affilites'
-
-type WithdrawalTransaction = {
-	type: 'withdrawal'
-	id: string
-	status: PayoutStatus
-	created: string
-	amount: number
-	fee?: number | null
-	method_type?: PayoutMethodType | null
-	method?: string
-	method_id?: string
-	method_address?: string | null
-}
-
-type PayoutAvailableTransaction = {
-	type: 'payout_available'
-	created: string
-	payout_source: PayoutSource
-	amount: number
-}
-
-type Transaction = WithdrawalTransaction | PayoutAvailableTransaction
+type Transaction = Labrinth.Payout.v3.TransactionItem
 
 const props = defineProps<{
 	transaction: Transaction

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

@@ -21,13 +21,13 @@
 	</div>
 </template>
 <script setup>
+import { injectModrinthClient } from '@modrinth/ui'
 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({
@@ -45,16 +45,13 @@ const props = defineProps({
 	},
 })
 
+const client = injectModrinthClient()
 const queryClient = useQueryClient()
 
 // 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
-	},
+	queryFn: () => client.labrinth.reports_v3.get(props.reportId),
 })
 
 // Compute user IDs needed
@@ -70,7 +67,7 @@ const userIds = computed(() => {
 // Fetch users
 const { data: users } = useQuery({
 	queryKey: computed(() => ['users', userIds.value]),
-	queryFn: () => useBaseFetch(`users?ids=${encodeURIComponent(JSON.stringify(userIds.value))}`),
+	queryFn: () => client.labrinth.users_v2.getMultiple(userIds.value),
 	enabled: computed(() => userIds.value.length > 0),
 })
 
@@ -82,7 +79,7 @@ const versionId = computed(() =>
 // Fetch version
 const { data: version } = useQuery({
 	queryKey: computed(() => ['version', versionId.value]),
-	queryFn: () => useBaseFetch(`version/${versionId.value}`),
+	queryFn: () => client.labrinth.versions_v2.getVersion(versionId.value),
 	enabled: computed(() => !!versionId.value),
 })
 
@@ -96,7 +93,7 @@ const projectId = computed(() => {
 // Fetch project
 const { data: project } = useQuery({
 	queryKey: computed(() => ['project', projectId.value]),
-	queryFn: () => useBaseFetch(`project/${projectId.value}`),
+	queryFn: () => client.labrinth.projects_v2.get(projectId.value),
 	enabled: computed(() => !!projectId.value),
 })
 
@@ -118,7 +115,7 @@ const report = computed(() => {
 // Fetch thread
 const { data: rawThread } = useQuery({
 	queryKey: computed(() => ['thread', report.value?.thread_id]),
-	queryFn: () => useBaseFetch(`thread/${report.value.thread_id}`),
+	queryFn: () => client.labrinth.threads_v3.getThread(report.value.thread_id),
 	enabled: computed(() => !!report.value?.thread_id),
 })
 

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

@@ -24,14 +24,13 @@
 	<p v-if="filteredReports.length === 0">You don't have any active reports.</p>
 </template>
 <script setup>
-import { Chips } from '@modrinth/ui'
+import { Chips, injectModrinthClient } 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'
+import { fetchSegmentedWith } from '~/utils/fetch-helpers.ts'
 
 const props = defineProps({
 	moderation: {
@@ -44,6 +43,7 @@ const props = defineProps({
 	},
 })
 
+const client = injectModrinthClient()
 const viewMode = ref('open')
 const reasonFilter = ref('All')
 
@@ -51,16 +51,11 @@ const MAX_REPORTS = 1500
 
 const { data: rawReportsData } = useQuery({
 	queryKey: ['reports', MAX_REPORTS],
-	queryFn: () => useBaseFetch(`report?count=${MAX_REPORTS}`),
+	queryFn: () => client.labrinth.reports_v3.list({ count: MAX_REPORTS }),
 	placeholderData: [],
 })
 
-const rawReports = computed(() =>
-	rawReportsData.value.map((report) => ({
-		...report,
-		item_id: report.item_id.replace(/"/g, ''),
-	})),
-)
+const rawReports = computed(() => rawReportsData.value)
 
 const reporterUsers = computed(() => rawReports.value.map((report) => report.reporter))
 const reportedUsers = computed(() =>
@@ -85,7 +80,8 @@ const reasons = computed(() => [
 
 const { data: users } = useQuery({
 	queryKey: computed(() => ['users', userIds.value]),
-	queryFn: () => fetchSegmented(userIds.value, (ids) => `users?ids=${asEncodedJsonArray(ids)}`),
+	queryFn: () =>
+		fetchSegmentedWith(userIds.value, (ids) => client.labrinth.users_v2.getMultiple(ids)),
 	enabled: computed(() => userIds.value.length > 0),
 	placeholderData: [],
 })
@@ -93,14 +89,15 @@ const { data: users } = useQuery({
 const { data: versions } = useQuery({
 	queryKey: computed(() => ['versions', versionIds.value]),
 	queryFn: () =>
-		fetchSegmented(versionIds.value, (ids) => `versions?ids=${asEncodedJsonArray(ids)}`),
+		fetchSegmentedWith(versionIds.value, (ids) => client.labrinth.versions_v2.getVersions(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)}`),
+	queryFn: () =>
+		fetchSegmentedWith(threadIds.value, (ids) => client.labrinth.threads_v3.getMultiple(ids)),
 	enabled: computed(() => threadIds.value.length > 0),
 	placeholderData: [],
 })
@@ -118,7 +115,7 @@ const projectIds = computed(() => [
 const { data: projects } = useQuery({
 	queryKey: computed(() => ['projects', projectIds.value]),
 	queryFn: () =>
-		fetchSegmented(projectIds.value, (ids) => `projects?ids=${asEncodedJsonArray(ids)}`),
+		fetchSegmentedWith(projectIds.value, (ids) => client.labrinth.projects_v2.getMultiple(ids)),
 	enabled: computed(() => projectIds.value.length > 0),
 	placeholderData: [],
 })