fix: use useFetch for useDependencyAnalysis (#551)

Author: OrbisK

app/components/PackageVulnerabilityTree.vue

@@ -7,17 +7,11 @@ const props = defineProps<{
   version: string
 }>()
 
-const {
-  data: vulnTree,
-  status,
-  fetch: fetchVulnTree,
-} = useDependencyAnalysis(
+const { data: vulnTree, status } = useDependencyAnalysis(
   () => props.packageName,
   () => props.version,
 )
 
-onMounted(() => fetchVulnTree())
-
 const isExpanded = shallowRef(false)
 const showAllPackages = shallowRef(false)
 const showAllVulnerabilities = shallowRef(false)

app/composables/useDependencyAnalysis.ts

@@ -1,5 +1,3 @@
-import type { VulnerabilityTreeResult } from '#shared/types/dependency-analysis'
-
 /**
  * Shared composable for dependency analysis data (vulnerabilities, deprecated packages).
  * Fetches once and caches the result so multiple components can use it.
@@ -9,44 +7,8 @@ export function useDependencyAnalysis(
   packageName: MaybeRefOrGetter<string>,
   version: MaybeRefOrGetter<string>,
 ) {
-  // Build a stable key from the current values
-  const name = toValue(packageName)
-  const ver = toValue(version)
-  const key = `dep-analysis:v1:${name}@${ver}`
-
-  // Use useState for SSR-safe caching across components
-  const data = useState<VulnerabilityTreeResult | null>(key, () => null)
-  const status = useState<'idle' | 'pending' | 'success' | 'error'>(`${key}:status`, () => 'idle')
-  const error = useState<Error | null>(`${key}:error`, () => null)
-
-  async function fetch() {
-    const pkgName = toValue(packageName)
-    const pkgVersion = toValue(version)
-
-    if (!pkgName || !pkgVersion) return
-
-    // Already fetched or fetching
-    if (status.value === 'success' || status.value === 'pending') return
-
-    status.value = 'pending'
-    error.value = null
-
-    try {
-      const result = await $fetch<VulnerabilityTreeResult>(
-        `/api/registry/vulnerabilities/${encodePackageName(pkgName)}/v/${pkgVersion}`,
-      )
-      data.value = result
-      status.value = 'success'
-    } catch (e) {
-      error.value = e instanceof Error ? e : new Error('Failed to fetch dependency analysis')
-      status.value = 'error'
-    }
-  }
-
-  return {
-    data: readonly(data),
-    status: readonly(status),
-    error: readonly(error),
-    fetch,
-  }
+  return useFetch(
+    () =>
+      `/api/registry/vulnerabilities/${encodePackageName(toValue(packageName))}/v/${toValue(version)}`,
+  )
 }

app/pages/[...package].vue

@@ -93,24 +93,9 @@ const { copied: copiedPkgName, copy: copyPkgName } = useClipboard({
 
 // Fetch dependency analysis (lazy, client-side)
 // This is the same composable used by PackageVulnerabilityTree and PackageDeprecatedTree
-const {
-  data: vulnTree,
-  status: vulnTreeStatus,
-  fetch: fetchVulnTree,
-} = useDependencyAnalysis(packageName, () => displayVersion.value?.version ?? '')
-onMounted(() => {
-  // Fetch vulnerability tree once displayVersion is available
-  if (displayVersion.value) {
-    fetchVulnTree()
-  }
-})
-watch(
-  () => displayVersion.value?.version,
-  () => {
-    if (displayVersion.value) {
-      fetchVulnTree()
-    }
-  },
+const { data: vulnTree, status: vulnTreeStatus } = useDependencyAnalysis(
+  packageName,
+  () => displayVersion.value?.version ?? '',
 )
 
 // Keep latestVersion for comparison (to show "(latest)" badge)