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/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: [],
 })