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

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

This reverts commit f4f33db701.

* fix: bugs

* fix: analytics

* fix: lint

apps/frontend/src/pages/settings/applications.vue

@@ -253,6 +253,7 @@ import {
 	CopyCode,
 	defineMessages,
 	FileInput,
+	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
 	normalizeChildren,
@@ -272,6 +273,7 @@ import {
 	useScopes,
 } from '~/composables/auth/scopes.ts'
 
+const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const formatDate = useFormatDateTime()
@@ -494,10 +496,7 @@ const auth = await useAuth()
 
 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,
-		}),
+	queryFn: () => client.labrinth.oauth_internal.getUserApps(auth.value.user.id),
 	enabled: computed(() => !!auth.value?.user?.id),
 })
 
@@ -551,14 +550,7 @@ async function onImageSelection(files) {
 		const file = files[0]
 		const extFromType = file.type.split('/')[1]
 
-		await useBaseFetch('oauth/app/' + editingId.value + '/icon', {
-			method: 'PATCH',
-			internal: true,
-			body: file,
-			query: {
-				ext: extFromType,
-			},
-		})
+		await client.labrinth.oauth_internal.uploadAppIcon(editingId.value, file, extFromType).promise
 
 		await refresh()
 
@@ -579,15 +571,10 @@ async function createApp() {
 	startLoading()
 	loading.value = true
 	try {
-		const createdAppInfo = await useBaseFetch('oauth/app', {
-			method: 'POST',
-			internal: true,
-			body: {
-				name: name.value,
-				icon_url: icon.value,
-				max_scopes: Number(scopesVal.value), // JS is 52 bit for ints so we're good for now
-				redirect_uris: redirectUris.value,
-			},
+		const createdAppInfo = await client.labrinth.oauth_internal.createApp({
+			name: name.value,
+			max_scopes: Number(scopesVal.value),
+			redirect_uris: redirectUris.value,
 		})
 
 		createdApps.value.push(createdAppInfo)
@@ -637,7 +624,7 @@ async function editApp() {
 
 		const body = {
 			name: name.value,
-			max_scopes: Number(scopesVal.value), // JS is 52 bit for ints so we're good for now
+			max_scopes: Number(scopesVal.value),
 			redirect_uris: redirectUris.value,
 		}
 
@@ -653,11 +640,7 @@ async function editApp() {
 			body.icon_url = icon.value
 		}
 
-		await useBaseFetch('oauth/app/' + editingId.value, {
-			method: 'PATCH',
-			internal: true,
-			body,
-		})
+		await client.labrinth.oauth_internal.editApp(editingId.value, body)
 
 		await refresh()
 		setForm(null)
@@ -681,10 +664,7 @@ async function removeApp() {
 		if (!editingId.value) {
 			throw new Error('No editing id')
 		}
-		await useBaseFetch(`oauth/app/${editingId.value}`, {
-			internal: true,
-			method: 'DELETE',
-		})
+		await client.labrinth.oauth_internal.deleteApp(editingId.value)
 		await refresh()
 		editingId.value = null
 	} catch (err) {

apps/frontend/src/pages/settings/authorizations.vue

@@ -95,6 +95,7 @@ import {
 	Button,
 	commonSettingsMessages,
 	ConfirmModal,
+	injectModrinthClient,
 	injectNotificationManager,
 	useVIntl,
 } from '@modrinth/ui'
@@ -102,6 +103,7 @@ import { useQuery } from '@tanstack/vue-query'
 
 import { useScopes } from '~/composables/auth/scopes.ts'
 
+const client = injectModrinthClient()
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
@@ -119,32 +121,19 @@ useHead({
 
 const { data: usersApps, refetch: refresh } = useQuery({
 	queryKey: ['oauth', 'authorizations'],
-	queryFn: () =>
-		useBaseFetch(`oauth/authorizations`, {
-			internal: true,
-		}),
+	queryFn: () => client.labrinth.oauth_internal.getAuthorizations(),
 })
 
 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)),
-			},
-		}),
+	queryFn: () => client.labrinth.oauth_internal.getApps(usersApps.value.map((c) => c.app_id)),
 	enabled: computed(() => !!usersApps.value?.length),
 })
 
 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)),
-			},
-		}),
+		client.labrinth.users_v2.getMultiple(appInformation.value.map((c) => c.created_by)),
 	enabled: computed(() => !!appInformation.value?.length),
 })
 
@@ -165,13 +154,7 @@ const appInfoLookup = computed(() => {
 
 async function revokeApp(id) {
 	try {
-		await useBaseFetch(`oauth/authorizations`, {
-			internal: true,
-			method: 'DELETE',
-			query: {
-				client_id: id,
-			},
-		})
+		await client.labrinth.oauth_internal.revokeAuthorization(id)
 		revokingId.value = null
 		await refresh()
 	} catch (err) {

apps/frontend/src/pages/settings/billing/charges.vue

@@ -38,7 +38,13 @@
 	</div>
 </template>
 <script setup>
-import { Badge, Breadcrumbs, useFormatDateTime, useFormatPrice } from '@modrinth/ui'
+import {
+	Badge,
+	Breadcrumbs,
+	injectModrinthClient,
+	useFormatDateTime,
+	useFormatPrice,
+} from '@modrinth/ui'
 import { useQuery } from '@tanstack/vue-query'
 
 import { products } from '~/generated/state.json'
@@ -47,6 +53,8 @@ definePageMeta({
 	middleware: 'auth',
 })
 
+const client = injectModrinthClient()
+
 const formatPrice = useFormatPrice()
 const formatDate = useFormatDateTime({
 	year: 'numeric',
@@ -57,7 +65,7 @@ const formatDate = useFormatDateTime({
 const { data: charges } = useQuery({
 	queryKey: ['billing', 'payments'],
 	queryFn: async () => {
-		const charges = await useBaseFetch('billing/payments', { internal: true })
+		const charges = await client.labrinth.billing_internal.getPayments()
 		return charges
 			.filter((charge) => charge.status !== 'open' && charge.status !== 'cancelled')
 			.map((charge) => {

apps/frontend/src/pages/settings/billing/index.vue

@@ -458,8 +458,7 @@
 			:country="country"
 			:publishable-key="config.public.stripePublishableKey"
 			:send-billing-request="
-				async (body) =>
-					await useBaseFetch('billing/payment', { internal: true, method: 'POST', body })
+				async (body) => await client.labrinth.billing_internal.initiatePayment(body)
 			"
 			:on-error="
 				(err) =>
@@ -613,6 +612,7 @@ import {
 	CopyCode,
 	defineMessages,
 	getPaymentMethodIcon,
+	injectModrinthClient,
 	injectNotificationManager,
 	OverflowMenu,
 	paymentMethodMessages,
@@ -626,13 +626,12 @@ import { calculateSavings, getCurrency } from '@modrinth/utils'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
-import { useBaseFetch } from '@/composables/fetch.js'
 import ModrinthServersIcon from '~/components/ui/servers/ModrinthServersIcon.vue'
 import ServersUpgradeModalWrapper from '~/components/ui/servers/ServersUpgradeModalWrapper.vue'
-import { useServersFetch } from '~/composables/servers/servers-fetch.ts'
 import { products } from '~/generated/state.json'
 
 const { addNotification, handleError } = injectNotificationManager()
+const client = injectModrinthClient()
 definePageMeta({
 	middleware: 'auth',
 })
@@ -742,27 +741,27 @@ const queryClient = useQueryClient()
 
 const { data: paymentMethods } = useQuery({
 	queryKey: ['billing', 'payment_methods'],
-	queryFn: () => useBaseFetch('billing/payment_methods', { internal: true }),
+	queryFn: () => client.labrinth.billing_internal.getPaymentMethods(),
 })
 const { data: charges } = useQuery({
 	queryKey: ['billing', 'payments'],
-	queryFn: () => useBaseFetch('billing/payments', { internal: true }),
+	queryFn: () => client.labrinth.billing_internal.getPayments(),
 })
 const { data: customer } = useQuery({
 	queryKey: ['billing', 'customer'],
-	queryFn: () => useBaseFetch('billing/customer', { internal: true }),
+	queryFn: () => client.labrinth.billing_internal.getCustomer(),
 })
 const { data: subscriptions } = useQuery({
 	queryKey: ['billing', 'subscriptions'],
-	queryFn: () => useBaseFetch('billing/subscriptions', { internal: true }),
+	queryFn: () => client.labrinth.billing_internal.getSubscriptions(),
 })
 const { data: productsData } = useQuery({
 	queryKey: ['billing', 'products'],
-	queryFn: () => useBaseFetch('billing/products', { internal: true }),
+	queryFn: () => client.labrinth.billing_internal.getProducts(),
 })
 const { data: serversData } = useQuery({
 	queryKey: ['servers'],
-	queryFn: () => useServersFetch('servers'),
+	queryFn: () => client.archon.servers_v0.list(),
 })
 
 const midasProduct = ref(products.find((x) => x.metadata?.type === 'midas'))
@@ -826,10 +825,7 @@ function addPaymentMethod() {
 }
 
 async function createSetupIntent() {
-	return await useBaseFetch('billing/payment_method', {
-		internal: true,
-		method: 'POST',
-	})
+	return await client.labrinth.billing_internal.addPaymentMethodFlow()
 }
 
 const removePaymentMethodIndex = ref()
@@ -844,12 +840,8 @@ async function switchMidasInterval(interval) {
 	changingInterval.value = true
 	startLoading()
 	try {
-		await useBaseFetch(`billing/subscription/${midasSubscription.value.id}`, {
-			internal: true,
-			method: 'PATCH',
-			body: {
-				interval,
-			},
+		await client.labrinth.billing_internal.editSubscription(midasSubscription.value.id, {
+			interval,
 		})
 		await refresh()
 	} catch (error) {
@@ -862,12 +854,8 @@ async function switchMidasInterval(interval) {
 async function editPaymentMethod(index, primary) {
 	startLoading()
 	try {
-		await useBaseFetch(`billing/payment_method/${paymentMethods.value[index].id}`, {
-			internal: true,
-			method: 'PATCH',
-			data: {
-				primary,
-			},
+		await client.labrinth.billing_internal.editPaymentMethod(paymentMethods.value[index].id, {
+			primary,
 		})
 		await refresh()
 	} catch (err) {
@@ -883,10 +871,7 @@ async function editPaymentMethod(index, primary) {
 async function removePaymentMethod(index) {
 	startLoading()
 	try {
-		await useBaseFetch(`billing/payment_method/${paymentMethods.value[index].id}`, {
-			internal: true,
-			method: 'DELETE',
-		})
+		await client.labrinth.billing_internal.removePaymentMethod(paymentMethods.value[index].id)
 		await refresh()
 	} catch (err) {
 		addNotification({
@@ -902,12 +887,8 @@ const cancelSubscriptionId = ref(null)
 async function cancelSubscription(id, cancelled) {
 	startLoading()
 	try {
-		await useBaseFetch(`billing/subscription/${id}`, {
-			internal: true,
-			method: 'PATCH',
-			body: {
-				cancelled,
-			},
+		await client.labrinth.billing_internal.editSubscription(id, {
+			cancelled,
 		})
 		await refresh()
 	} catch (err) {
@@ -975,12 +956,8 @@ const showPyroUpgradeModal = (subscription) => {
 
 const resubscribePyro = async (subscriptionId, wasSuspended) => {
 	try {
-		await useBaseFetch(`billing/subscription/${subscriptionId}`, {
-			internal: true,
-			method: 'PATCH',
-			body: {
-				cancelled: false,
-			},
+		await client.labrinth.billing_internal.editSubscription(subscriptionId, {
+			cancelled: false,
 		})
 		await refresh()
 		if (wasSuspended) {

apps/frontend/src/pages/settings/pats.vue

@@ -196,6 +196,7 @@ import {
 	ConfirmModal,
 	CopyCode,
 	defineMessages,
+	injectModrinthClient,
 	injectNotificationManager,
 	IntlFormatted,
 	StyledInput,
@@ -203,7 +204,7 @@ import {
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 
 import Modal from '~/components/ui/Modal.vue'
 import {
@@ -215,6 +216,8 @@ import {
 	useScopes,
 } from '~/composables/auth/scopes.ts'
 
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 
@@ -327,9 +330,9 @@ const deletePatIndex = ref(null)
 
 const loading = ref(false)
 
-const { data: pats, refetch: refresh } = useQuery({
+const { data: pats } = useQuery({
 	queryKey: ['pat'],
-	queryFn: () => useBaseFetch('pat'),
+	queryFn: () => client.labrinth.pats_v2.list(),
 	placeholderData: [],
 })
 const displayPats = computed(() => {
@@ -395,13 +398,10 @@ async function createPat() {
 	startLoading()
 	loading.value = true
 	try {
-		const res = await useBaseFetch('pat', {
-			method: 'POST',
-			body: {
-				name: name.value,
-				scopes: Number(scopesVal.value),
-				expires: data.$dayjs(expires.value).toISOString(),
-			},
+		const res = await client.labrinth.pats_v2.create({
+			name: name.value,
+			scopes: Number(scopesVal.value),
+			expires: data.$dayjs(expires.value).toISOString(),
 		})
 		pats.value.push(res)
 		patModal.value.hide()
@@ -420,15 +420,12 @@ async function editPat() {
 	startLoading()
 	loading.value = true
 	try {
-		await useBaseFetch(`pat/${editPatId.value}`, {
-			method: 'PATCH',
-			body: {
-				name: name.value,
-				scopes: Number(scopesVal.value),
-				expires: data.$dayjs(expires.value).toISOString(),
-			},
+		await client.labrinth.pats_v2.modify(editPatId.value, {
+			name: name.value,
+			scopes: Number(scopesVal.value),
+			expires: data.$dayjs(expires.value).toISOString(),
 		})
-		await refresh()
+		await queryClient.invalidateQueries({ queryKey: ['pat'] })
 		patModal.value.hide()
 	} catch (err) {
 		addNotification({
@@ -445,10 +442,8 @@ async function removePat(id) {
 	startLoading()
 	try {
 		pats.value = pats.value.filter((x) => x.id !== id)
-		await useBaseFetch(`pat/${id}`, {
-			method: 'DELETE',
-		})
-		await refresh()
+		await client.labrinth.pats_v2.delete(id)
+		await queryClient.invalidateQueries({ queryKey: ['pat'] })
 	} catch (err) {
 		addNotification({
 			title: formatMessage(commonMessages.errorNotificationTitle),

apps/frontend/src/pages/settings/sessions.vue

@@ -47,17 +47,20 @@ import {
 	commonMessages,
 	commonSettingsMessages,
 	defineMessages,
+	injectModrinthClient,
 	injectNotificationManager,
 	useFormatDateTime,
 	useRelativeTime,
 	useVIntl,
 } from '@modrinth/ui'
-import { useQuery } from '@tanstack/vue-query'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
 
 definePageMeta({
 	middleware: 'auth',
 })
 
+const client = injectModrinthClient()
+const queryClient = useQueryClient()
 const { addNotification } = injectNotificationManager()
 const { formatMessage } = useVIntl()
 const formatRelativeTime = useRelativeTime()
@@ -102,19 +105,17 @@ useHead({
 	title: () => `${formatMessage(commonSettingsMessages.sessions)} - Modrinth`,
 })
 
-const { data: sessions, refetch: refresh } = useQuery({
+const { data: sessions } = useQuery({
 	queryKey: ['session', 'list'],
-	queryFn: () => useBaseFetch('session/list'),
+	queryFn: () => client.labrinth.sessions_v2.list(),
 })
 
 async function revokeSession(id) {
 	startLoading()
 	try {
 		sessions.value = sessions.value.filter((x) => x.id !== id)
-		await useBaseFetch(`session/${id}`, {
-			method: 'DELETE',
-		})
-		await refresh()
+		await client.labrinth.sessions_v2.delete(id)
+		await queryClient.invalidateQueries({ queryKey: ['session', 'list'] })
 	} catch (err) {
 		addNotification({
 			title: formatMessage(commonMessages.errorNotificationTitle),