DX-1840: Add WITHTYPE support

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

@@ -6,7 +6,7 @@ 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 { FETCH_KEYS_QUERY_KEY, useKeys } from "../../hooks/use-keys"
 import { AddKeyModal } from "../add-key-modal"
 import { DisplayDbSize, FETCH_DB_SIZE_QUERY_KEY } from "./db-size"
 import { Empty } from "./empty"
@@ -17,7 +17,7 @@ import { LoadingSkeleton } from "./skeleton-buttons"
 import { DataTypeSelector } from "./type-selector"
 
 export function Sidebar() {
-  const { keys, query, refetch } = useKeys()
+  const { keys, query } = useKeys()
 
   return (
     <div className="flex h-full flex-col gap-2 rounded-xl border bg-white p-1">
@@ -29,7 +29,9 @@ export function Sidebar() {
             <Button
               className="h-7 w-7 px-0"
               onClick={() => {
-                refetch()
+                queryClient.invalidateQueries({
+                  queryKey: [FETCH_KEYS_QUERY_KEY],
+                })
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_LIST_ITEMS_QUERY_KEY],
                 })

src/components/databrowser/components/sidebar/keys-list.tsx

@@ -1,10 +1,9 @@
 import { useDatabrowserStore } from "@/store"
-import type { DataType } from "@/types"
+import type { DataType, RedisKey } from "@/types"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { TypeTag } from "@/components/databrowser/components/type-tag"
-import type { RedisKey } from "@/components/databrowser/hooks"
 
 import { useKeys } from "../../hooks/use-keys"
 import { SidebarContextMenu } from "../sidebar-context-menu"

src/components/databrowser/components/sidebar/type-selector.tsx

@@ -32,7 +32,7 @@ export function DataTypeSelector() {
 
       <SelectContent>
         <SelectGroup>
-          {Object.entries(DATA_TYPE_NAMES).map(
+          {[[ALL_TYPES_KEY, "All Types"], ...Object.entries(DATA_TYPE_NAMES)].map(
             ([key, value]) => (
               <SelectItem value={key} key={key}>
                 {value}

src/components/databrowser/hooks/index.ts

@@ -2,7 +2,6 @@ export * from "./use-add-key"
 export * from "./use-debounce"
 export * from "./use-delete-key"
 export * from "./use-edit-list-item"
-export * from "./use-fetch-keys"
 export * from "./use-fetch-list-items"
 export * from "./use-fetch-simple-key"
 export * from "./use-fetch-ttl"

src/components/databrowser/hooks/use-add-key.ts

@@ -1,11 +1,10 @@
 import { useDatabrowser } from "@/store"
-import type { DataType } from "@/types"
+import type { DataType, RedisKey } from "@/types"
 import { useMutation, type InfiniteData } from "@tanstack/react-query"
 
 import { queryClient } from "@/lib/clients"
 
 import { FETCH_DB_SIZE_QUERY_KEY } from "../components/sidebar/db-size"
-import { type RedisKey } from "./use-fetch-keys"
 import { FETCH_KEYS_QUERY_KEY } from "./use-keys"
 
 export const useAddKey = () => {

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

@@ -6,11 +6,10 @@ 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"
+import { FETCH_KEYS_QUERY_KEY } from "./use-keys"
 
 export const useDeleteKeyCache = () => {
   const { setSelectedKey } = useDatabrowserStore()
-  const { refetch } = useKeys()
 
   const deleteKeyCache = useCallback(
     (key: string) => {
@@ -27,9 +26,8 @@ export const useDeleteKeyCache = () => {
       queryClient.invalidateQueries({
         queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key],
       })
-      refetch()
     },
-    [setSelectedKey, refetch]
+    [setSelectedKey]
   )
 
   return { deleteKeyCache }

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

@@ -1,73 +1,76 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useRef,
-  type PropsWithChildren,
-} from "react"
-import { useDatabrowserStore } from "@/store"
+import { createContext, useContext, useMemo, type PropsWithChildren } from "react"
+import { useDatabrowser, useDatabrowserStore } from "@/store"
+import type { DataType, RedisKey } from "@/types"
 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<
   | {
       keys: RedisKey[]
       query: UseInfiniteQueryResult
-      refetch: () => void
     }
   | undefined
 >(undefined)
 
 export const FETCH_KEYS_QUERY_KEY = "use-fetch-keys"
 
+const SCAN_COUNT = 100
+
 export const KeysProvider = ({ children }: PropsWithChildren) => {
   const { search } = useDatabrowserStore()
-  const cleanSearchKey = search.key.replace("*", "")
 
-  const { data: exactMatchType, isFetching, isLoading } = useFetchKeyType(cleanSearchKey)
-
-  const { fetchKeys, resetCache } = useFetchKeys(search)
-  const pageRef = useRef(0)
+  const { redisNoPipeline: redis } = useDatabrowser()
 
   const query = useInfiniteQuery({
     queryKey: [FETCH_KEYS_QUERY_KEY, search],
 
-    initialPageParam: 0,
-    queryFn: async ({ pageParam: page }) => {
+    initialPageParam: "0",
+    queryFn: async ({ pageParam: lastCursor }) => {
       // We should reset the cache when the pagination is reset
-      if (pageRef.current >= page) resetCache()
-      pageRef.current = page
 
-      return await fetchKeys()
+      const args = [lastCursor]
+
+      if (search.key) {
+        args.push("MATCH", search.key)
+      }
+
+      if (search.type) {
+        args.push("TYPE", search.type)
+      }
+
+      args.push("COUNT", SCAN_COUNT.toString())
+
+      if (!search.type) args.push("WITHTYPE")
+
+      const [cursor, values] = await redis.exec<[string, string[]]>(["SCAN", ...args])
+      const keys: RedisKey[] = []
+
+      let index = 0
+      while (true) {
+        if (search.type) {
+          if (index >= values.length) break
+          keys.push([values[index], search.type as DataType])
+          index += 1
+        } else {
+          if (index + 1 >= values.length) break
+          keys.push([values[index], values[index + 1] as DataType])
+          index += 2
+        }
+      }
+
+      return {
+        cursor: cursor === "0" ? undefined : cursor,
+        keys,
+        hasNextPage: cursor !== "0",
+      }
     },
     select: (data) => data,
-    getNextPageParam: (lastPage, __, lastPageIndex) => {
-      return lastPage.hasNextPage ? lastPageIndex + 1 : undefined
-    },
-    enabled: !isFetching,
+    getNextPageParam: ({ cursor }) => cursor,
     refetchOnMount: false,
   })
 
-  const refetch = useCallback(() => {
-    resetCache()
-    query.refetch()
-  }, [query, resetCache])
-
   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[] = []
@@ -79,19 +82,13 @@ export const KeysProvider = ({ children }: PropsWithChildren) => {
       dedupedKeys.push(key)
     }
     return dedupedKeys
-  }, [query.data, cleanSearchKey, exactMatchType])
+  }, [query.data])
 
   return (
     <KeysContext.Provider
       value={{
         keys,
-        // @ts-expect-error Ignore the error with spread syntax
-        query: {
-          ...query,
-          isLoading: isLoading || query.isLoading,
-          isFetching: isFetching || query.isFetching,
-        },
-        refetch,
+        query,
       }}
     >
       {children}

src/store.tsx

@@ -89,7 +89,7 @@ const createDatabrowserStore = () =>
       set((old) => ({ ...old, selectedListItem: item }))
     },
 
-    search: { key: "", type: "string" },
+    search: { key: "", type: undefined },
     setSearch: (search) => set({ search }),
     setSearchKey: (key) => set((state) => ({ search: { ...state.search, key } })),
     setSearchType: (type) => set((state) => ({ search: { ...state.search, type } })),

src/types/index.ts

@@ -11,6 +11,8 @@ export const DATA_TYPE_NAMES = {
 
 export type DataType = (typeof DATA_TYPES)[number]
 
+export type RedisKey = [string, DataType]
+
 export const LIST_DATA_TYPES = ["set", "zset", "list", "hash", "stream"] as const
 export const SIMPLE_DATA_TYPES = ["string", "json"] as const