feat: Add fetching for exact match for faster results (#12)

* fix: search input not clearing when pressing "X" button

* feat: add use-fetch-key-type

* feat: add fetching for exact match on search for quicker results

* fix: send exact match request before other requests

Author: ytkimirti

src/components/databrowser/components/sidebar/index.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button"
 import { Spinner } from "@/components/ui/spinner"
 
 import { FETCH_LIST_ITEMS_QUERY_KEY, FETCH_SIMPLE_KEY_QUERY_KEY } from "../../hooks"
+import { FETCH_KEY_TYPE_QUERY_KEY } from "../../hooks/use-fetch-key-type"
 import { useKeys } from "../../hooks/use-keys"
 import { AddKeyModal } from "../add-key-modal"
 import { DisplayDbSize, FETCH_DB_SIZE_QUERY_KEY } from "./db-size"
@@ -38,6 +39,9 @@ export function Sidebar() {
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_DB_SIZE_QUERY_KEY],
                 })
+                queryClient.invalidateQueries({
+                  queryKey: [FETCH_KEY_TYPE_QUERY_KEY],
+                })
               }}
             >
               <Spinner isLoading={query.isFetching}>
@@ -58,9 +62,10 @@ export function Sidebar() {
         </div>
       </div>
 
-      {query.isLoading ? (
+      {query.isLoading && keys.length === 0 ? (
         <LoadingSkeleton />
       ) : keys.length > 0 ? (
+        // Infinite scroll already has a loader at the bottom
         <InfiniteScroll query={query}>
           <KeysList />
         </InfiniteScroll>

src/components/databrowser/components/sidebar/search-input.tsx

@@ -29,14 +29,15 @@ export const SearchInput = () => {
         }}
         value={state}
       />
-      {search.key && (
+      {state && (
         <Button
           type="button"
           variant="link"
           size="icon"
           className="absolute right-1 top-1/2 h-5 w-5 -translate-y-1/2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
           onClick={() => {
             setSearchKey("")
+            setState("")
           }}
         >
           <IconX size={16} />

src/components/databrowser/hooks/use-delete-key-cache.ts

@@ -3,6 +3,8 @@ import { useDatabrowserStore } from "@/store"
 
 import { queryClient } from "@/lib/clients"
 
+import { FETCH_KEY_TYPE_QUERY_KEY } from "./use-fetch-key-type"
+import { FETCH_LIST_ITEMS_QUERY_KEY } from "./use-fetch-list-items"
 import { FETCH_SIMPLE_KEY_QUERY_KEY } from "./use-fetch-simple-key"
 import { FETCH_KEYS_QUERY_KEY, useKeys } from "./use-keys"
 
@@ -19,6 +21,12 @@ export const useDeleteKeyCache = () => {
       queryClient.invalidateQueries({
         queryKey: [FETCH_SIMPLE_KEY_QUERY_KEY, key],
       })
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_LIST_ITEMS_QUERY_KEY, key],
+      })
+      queryClient.invalidateQueries({
+        queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key],
+      })
       refetch()
     },
     [setSelectedKey, refetch]

src/components/databrowser/hooks/use-fetch-key-type.tsx

@@ -0,0 +1,17 @@
+import { useDatabrowser } from "@/store"
+import { useQuery } from "@tanstack/react-query"
+
+export const FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type"
+
+export const useFetchKeyType = (key: string | undefined) => {
+  const { redisNoPipeline: redis } = useDatabrowser()
+
+  return useQuery({
+    queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key],
+    queryFn: async () => {
+      if (!key) return "none"
+
+      return await redis.type(key)
+    },
+  })
+}

src/components/databrowser/hooks/use-keys.tsx

@@ -9,6 +9,7 @@ import {
 import { useDatabrowserStore } from "@/store"
 import { useInfiniteQuery, type UseInfiniteQueryResult } from "@tanstack/react-query"
 
+import { useFetchKeyType } from "./use-fetch-key-type"
 import { useFetchKeys, type RedisKey } from "./use-fetch-keys"
 
 const KeysContext = createContext<
@@ -24,6 +25,9 @@ export const FETCH_KEYS_QUERY_KEY = "use-fetch-keys"
 
 export const KeysProvider = ({ children }: PropsWithChildren) => {
   const { search } = useDatabrowserStore()
+  const cleanSearchKey = search.key.replace("*", "")
+
+  const { data: exactMatchType } = useFetchKeyType(cleanSearchKey)
 
   const { fetchKeys, resetCache } = useFetchKeys(search)
   const pageRef = useRef(0)
@@ -54,6 +58,15 @@ export const KeysProvider = ({ children }: PropsWithChildren) => {
   const keys = useMemo(() => {
     const keys = query.data?.pages.flatMap((page) => page.keys) ?? []
 
+    // Include the exact match if it exists before SCAN returns
+    if (
+      exactMatchType &&
+      exactMatchType !== "none" &&
+      (search.type === undefined || search.type === exactMatchType)
+    ) {
+      keys.push([cleanSearchKey, exactMatchType])
+    }
+
     // deduplication
     const keysSet = new Set<string>()
     const dedupedKeys: RedisKey[] = []
@@ -65,7 +78,7 @@ export const KeysProvider = ({ children }: PropsWithChildren) => {
       dedupedKeys.push(key)
     }
     return dedupedKeys
-  }, [query.data])
+  }, [query.data, cleanSearchKey, exactMatchType])
 
   return (
     <KeysContext.Provider