refactor: move check to useNpmSearch

Author: MatteoGabriele

app/composables/useNpmRegistry.ts

@@ -18,6 +18,12 @@ import type { CachedFetchFunction } from '#shared/utils/fetch-cache-config'
 const NPM_REGISTRY = 'https://registry.npmjs.org'
 const NPM_API = 'https://api.npmjs.org'
 
+interface NpmSearchError {
+  data: {
+    code: string
+  }
+}
+
 // Cache for packument fetches to avoid duplicate requests across components
 const packumentCache = new Map<string, Promise<Packument | null>>()
 
@@ -306,6 +312,7 @@ export function useNpmSearch(
     () => `search:incremental:${toValue(query)}`,
     async (_nuxtApp, { signal }) => {
       const q = toValue(query)
+
       if (!q.trim()) {
         return emptySearchResponse
       }
@@ -321,19 +328,57 @@ export function useNpmSearch(
       // Use requested size for initial fetch
       params.set('size', String(opts.size ?? 25))
 
-      const { data: response, isStale } = await cachedFetch<NpmSearchResponse>(
-        `${NPM_REGISTRY}/-/v1/search?${params.toString()}`,
-        { signal },
-        60,
-      )
+      try {
+        const { data: response, isStale } = await cachedFetch<NpmSearchResponse>(
+          `${NPM_REGISTRY}/-/v1/search?${params.toString()}`,
+          { signal },
+          60,
+        )
 
-      cache.value = {
-        query: q,
-        objects: response.objects,
-        total: response.total,
-      }
+        cache.value = {
+          query: q,
+          objects: response.objects,
+          total: response.total,
+        }
 
-      return { ...response, isStale }
+        return { ...response, isStale }
+      } catch (error) {
+        if ((error as NpmSearchError)?.data?.code === 'ERR_TEXT_LENGTH') {
+          try {
+            const encodedName = encodePackageName(q)
+            const [{ data: pkg }, { data: downloads }] = await Promise.all([
+              cachedFetch<Packument>(`${NPM_REGISTRY}/${encodedName}`, { signal }),
+              cachedFetch<NpmDownloadCount>(`${NPM_API}/downloads/point/last-week/${encodedName}`, {
+                signal,
+              }),
+            ])
+
+            if (!pkg) {
+              throw error
+            }
+
+            const result = packumentToSearchResult(pkg, downloads?.downloads)
+
+            cache.value = {
+              query: q,
+              objects: [result],
+              total: 1,
+            }
+
+            return {
+              objects: [result],
+              total: 1,
+              isStale: false,
+              time: new Date().toISOString(),
+            }
+          } catch {
+            // If exact lookup also fails, throw original error
+            throw error
+          }
+        }
+
+        throw error
+      }
     },
     { default: () => lastSearch || emptySearchResponse },
   )

app/pages/search.vue

@@ -72,21 +72,11 @@ const {
   isLoadingMore,
   hasMore,
   fetchMore,
-  error,
 } = useNpmSearch(query, () => ({
   size: requestedSize.value,
   incremental: true,
 }))
 
-interface SearchError {
-  code?: string
-}
-
-const hasTextLengthError = computed<boolean>(() => {
-  const errorData = error.value?.data as SearchError | undefined
-  return errorData?.code === 'ERR_TEXT_LENGTH'
-})
-
 // Results to display (directly from incremental search)
 const rawVisibleResults = computed(() => results.value)
 
@@ -709,8 +699,7 @@ defineOgImageComponent('Default', {
 
           <!-- No results found -->
           <div v-else-if="status !== 'pending'" role="status" class="py-12">
-            <PackageCardExact v-if="hasTextLengthError" :query />
-            <p v-else class="text-fg-muted font-mono mb-6 text-center">
+            <p class="text-fg-muted font-mono mb-6 text-center">
               {{ $t('search.no_results', { query }) }}
             </p>