feat: ssr fixes + switch project page to tanstack (#5192)

* feat: ssr fixes

* feat: lazy load non-core data

* feat: ssr timing debugging

* feat: go back to all parallel

* feat: migrate to DI + set up mutators

* feat: remove double get versions request, only call v3

* refactor: [version].vue page to use composition API and typescript

* feat: gallery.vue start

* fix: remove left behind console log

* fix: type issues + gallery

* fix: versionsummary modal + version page direct join

* fix: projectRaw guard

* fix: currentMember val fix

* fix: actualProjectType

* fix: vers summary link same page

* fix: lint

---------

Co-authored-by: tdgao <mr.trumgao@gmail.com>

apps/frontend/src/composables/queries/project.ts

@@ -0,0 +1,52 @@
+import type { AbstractModrinthClient } from '@modrinth/api-client'
+
+const STALE_TIME = 1000 * 60 * 5 // 5 minutes
+
+export const projectQueryOptions = {
+	v2: (projectId: string, client: AbstractModrinthClient) => ({
+		queryKey: ['project', 'v2', projectId] as const,
+		queryFn: () => client.labrinth.projects_v2.get(projectId),
+		staleTime: STALE_TIME,
+	}),
+
+	v3: (projectId: string, client: AbstractModrinthClient) => ({
+		queryKey: ['project', 'v3', projectId] as const,
+		queryFn: () => client.labrinth.projects_v3.get(projectId),
+		staleTime: STALE_TIME,
+	}),
+
+	members: (projectId: string, client: AbstractModrinthClient) => ({
+		queryKey: ['project', projectId, 'members'] as const,
+		queryFn: () => client.labrinth.projects_v3.getMembers(projectId),
+		staleTime: STALE_TIME,
+	}),
+
+	dependencies: (projectId: string, client: AbstractModrinthClient) => ({
+		queryKey: ['project', projectId, 'dependencies'] as const,
+		queryFn: () => client.labrinth.projects_v2.getDependencies(projectId),
+		staleTime: STALE_TIME,
+	}),
+
+	versionsV2: (projectId: string, client: AbstractModrinthClient) => ({
+		queryKey: ['project', projectId, 'versions', 'v2'] as const,
+		queryFn: () =>
+			client.labrinth.versions_v3.getProjectVersions(projectId, { include_changelog: false }),
+		staleTime: STALE_TIME,
+	}),
+
+	versionsV3: (projectId: string, client: AbstractModrinthClient) => ({
+		queryKey: ['project', projectId, 'versions', 'v3'] as const,
+		queryFn: () =>
+			client.labrinth.versions_v3.getProjectVersions(projectId, {
+				include_changelog: false,
+				apiVersion: 3,
+			}),
+		staleTime: STALE_TIME,
+	}),
+
+	organization: (projectId: string, client: AbstractModrinthClient) => ({
+		queryKey: ['project', projectId, 'organization'] as const,
+		queryFn: () => client.labrinth.projects_v3.getOrganization(projectId),
+		staleTime: STALE_TIME,
+	}),
+}

apps/frontend/src/composables/query-client.ts

@@ -0,0 +1,14 @@
+import type { QueryClient } from '@tanstack/vue-query'
+import { useQueryClient } from '@tanstack/vue-query'
+import { getCurrentInstance } from 'vue'
+
+export function useAppQueryClient(): QueryClient {
+	// In components, use the standard composable
+	if (getCurrentInstance()) {
+		return useQueryClient()
+	}
+
+	// In middleware/server context, use the provided instance
+	const nuxtApp = useNuxtApp()
+	return nuxtApp.$queryClient as QueryClient
+}