fix: ssr search endppoint (#467)

Author: AmirSa12

packages/app/app/components/RepoSearch.vue

@@ -1,7 +1,23 @@
 <script lang="ts" setup>
 import type { RepoNode } from "../../server/utils/types";
 
-const search = useSessionStorage("search", "");
+const route = useRoute();
+const router = useRouter();
+const search = computed({
+  get: () => {
+    const q = route.query.q;
+    return typeof q === "string" ? q : "";
+  },
+  set: (value: string) => {
+    const queryText = value.trim();
+    router.replace({
+      query: {
+        ...route.query,
+        q: queryText || undefined,
+      },
+    });
+  },
+});
 const searchResults = ref<RepoNode[]>([]);
 const isLoading = ref(false);
 
@@ -24,11 +40,10 @@ watch(
     isLoading.value = true;
 
     try {
-      const response = await fetch(
-        `/api/repo/search?text=${encodeURIComponent(query)}`,
-        { signal: controller.signal },
-      );
-      const data = await response.json();
+      const data = await $fetch<{ nodes?: RepoNode[] }>("/api/repo/search", {
+        query: { q: query },
+        signal: controller.signal,
+      });
 
       if (abortController !== controller) {
         return;
@@ -47,7 +62,7 @@ watch(
       }
     }
   },
-  { immediate: false },
+  { immediate: true },
 );
 
 const examples = [
@@ -78,7 +93,6 @@ const examples = [
   },
 ];
 
-const router = useRouter();
 function openFirstResult() {
   const [first] = searchResults.value;
   if (first) {

packages/app/server/api/repo/search.get.ts

@@ -5,7 +5,7 @@ import { useBucket } from "../../utils/bucket";
 import { useOctokitApp } from "../../utils/octokit";
 
 const querySchema = z.object({
-  text: z.string(),
+  q: z.string().optional(),
 });
 
 const REPO_INDEX_CACHE_KEY = "repo-search:index";
@@ -168,15 +168,16 @@ export default defineEventHandler(async (event) => {
   const query = await getValidatedQuery(event, (data) =>
     querySchema.parse(data),
   );
+  const searchQuery = (query.q ?? "").trim();
 
-  if (!query.text) {
+  if (!searchQuery) {
     return { nodes: [] };
   }
 
   const { repos, cacheStatus } = await getIndexedRepos(event);
   setResponseHeader(event, "x-repo-index-cache", cacheStatus);
 
   return {
-    nodes: findMatches(repos, query.text),
+    nodes: findMatches(repos, searchQuery),
   };
 });