@upstash/react-redis-browser 0.1.8 → 0.1.10

package/dist/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class;// src/components/databrowser/index.tsx
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/databrowser/index.tsx
 var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react); var React3 = _interopRequireWildcard(_react); var React4 = _interopRequireWildcard(_react); var React5 = _interopRequireWildcard(_react); var React6 = _interopRequireWildcard(_react); var React7 = _interopRequireWildcard(_react); var React8 = _interopRequireWildcard(_react); var React9 = _interopRequireWildcard(_react); var React10 = _interopRequireWildcard(_react); var React11 = _interopRequireWildcard(_react); var React12 = _interopRequireWildcard(_react);
 
 // src/store.tsx
@@ -2917,181 +2917,51 @@ function Toaster() {
 
 
 
-
-
-
-
-
-
-// src/components/databrowser/hooks/use-fetch-key-type.tsx
-
-var FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type";
-var useFetchKeyType = (key) => {
-  const { redisNoPipeline: redis } = useDatabrowser();
-  return _reactquery.useQuery.call(void 0, {
-    queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key],
-    queryFn: async () => {
-      if (!key) return "none";
-      return await redis.type(key);
-    }
-  });
-};
-
-// src/components/databrowser/hooks/use-fetch-keys.ts
-
-
-// src/types/index.ts
-var DATA_TYPES = ["string", "list", "hash", "set", "zset", "json", "stream"];
-var DATA_TYPE_NAMES = {
-  string: "String",
-  list: "List",
-  hash: "Hash",
-  set: "Set",
-  zset: "Sorted Set",
-  json: "JSON",
-  stream: "Stream"
-};
-
-// src/components/databrowser/hooks/use-fetch-keys.ts
-var PAGE_SIZE = 30;
-var FETCH_COUNTS = [100, 200, 400, 800];
-var useFetchKeys = (search) => {
-  const { redisNoPipeline: redis } = useDatabrowser();
-  const cache = _react.useRef.call(void 0, );
-  const lastKey = _react.useRef.call(void 0, );
-  const fetchKeys = _react.useCallback.call(void 0, () => {
-    const newKey = JSON.stringify(search);
-    if (!cache.current || lastKey.current !== newKey) {
-      cache.current = new PaginationCache(redis, search.key, search.type);
-      lastKey.current = newKey;
-    }
-    return cache.current.fetchNewKeys();
-  }, [search]);
-  const resetCache = _react.useCallback.call(void 0, () => {
-    cache.current = void 0;
-    lastKey.current = void 0;
-  }, []);
-  return {
-    fetchKeys,
-    resetCache
-  };
-};
-var PaginationCache = (_class = class {
-  constructor(redis, searchTerm, typeFilter) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);
-    this.redis = redis;
-    this.searchTerm = searchTerm;
-    this.typeFilter = typeFilter;
-    if (typeFilter && !DATA_TYPES.includes(typeFilter)) {
-      throw new Error(`Invalid type filter: ${typeFilter}`);
-    }
-  }
-  // Cursor is 0 initially, then it is set to -1 when we reach the end
-  __init() {this.cache = Object.fromEntries(
-    DATA_TYPES.map((type) => [type, { cursor: "0", keys: [] }])
-  )}
-  __init2() {this.targetCount = 0}
-  __init3() {this.isFetching = false}
-  async fetchNewKeys() {
-    const initialKeys = new Set(this.getKeys().map(([key]) => key));
-    this.targetCount = this.getKeys().length + PAGE_SIZE;
-    void this.startFetch();
-    await new Promise((resolve) => {
-      const interval = setInterval(() => {
-        if (this.getLength() >= this.targetCount || this.isAllEnded()) {
-          clearInterval(interval);
-          resolve();
-        }
-      }, 100);
-    });
-    const hasNextPage = !this.isAllEnded();
-    return {
-      keys: this.getKeys().filter(([key]) => !initialKeys.has(key)),
-      hasNextPage
-    };
-  }
-  getLength() {
-    return Object.values(this.cache).reduce((acc, curr) => acc + curr.keys.length, 0);
-  }
-  getKeys() {
-    const keys = Object.entries(this.cache).flatMap(([type, { keys: keys2 }]) => {
-      return keys2.map((key) => [key, type]);
-    });
-    const sorted = keys.sort((a, b) => a[0].localeCompare(b[0]));
-    return sorted;
-  }
-  async startFetch() {
-    if (this.isFetching) {
-      return;
-    }
-    this.isFetching = true;
-    try {
-      await this.fetch();
-    } finally {
-      this.isFetching = false;
-    }
-  }
-  __init4() {this.fetchForType = async (type) => {
-    let i = 0;
-    while (true) {
-      const cursor = this.cache[type].cursor;
-      if (cursor === "-1" || this.getLength() >= this.targetCount) {
-        break;
-      }
-      const fetchCount = FETCH_COUNTS[Math.min(i, FETCH_COUNTS.length - 1)];
-      const [nextCursor, newKeys] = await this.redis.scan(cursor, {
-        count: fetchCount,
-        match: this.searchTerm,
-        type
-      });
-      this.cache[type].keys = [...this.cache[type].keys, ...newKeys];
-      this.cache[type].cursor = nextCursor === "0" ? "-1" : nextCursor;
-      i++;
-    }
-  }}
-  async fetch() {
-    const types = this.typeFilter ? [this.typeFilter] : DATA_TYPES;
-    await Promise.all(types.map(this.fetchForType));
-  }
-  isAllEnded() {
-    const types = this.typeFilter ? [this.typeFilter] : DATA_TYPES;
-    return types.every((type) => this.cache[type] && this.cache[type].cursor === "-1");
-  }
-}, _class);
-
-// src/components/databrowser/hooks/use-keys.tsx
-
 var KeysContext = _react.createContext.call(void 0, void 0);
 var FETCH_KEYS_QUERY_KEY = "use-fetch-keys";
+var SCAN_COUNT = 100;
 var KeysProvider = ({ children }) => {
   const { search } = useDatabrowserStore();
-  const cleanSearchKey = search.key.replace("*", "");
-  const { data: exactMatchType, isFetching, isLoading } = useFetchKeyType(cleanSearchKey);
-  const { fetchKeys, resetCache } = useFetchKeys(search);
-  const pageRef = _react.useRef.call(void 0, 0);
+  const { redisNoPipeline: redis } = useDatabrowser();
   const query = _reactquery.useInfiniteQuery.call(void 0, {
     queryKey: [FETCH_KEYS_QUERY_KEY, search],
-    initialPageParam: 0,
-    queryFn: async ({ pageParam: page }) => {
-      if (pageRef.current >= page) resetCache();
-      pageRef.current = page;
-      return await fetchKeys();
+    initialPageParam: "0",
+    queryFn: async ({ pageParam: lastCursor }) => {
+      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(["SCAN", ...args]);
+      const keys2 = [];
+      let index = 0;
+      while (true) {
+        if (search.type) {
+          if (index >= values.length) break;
+          keys2.push([values[index], search.type]);
+          index += 1;
+        } else {
+          if (index + 1 >= values.length) break;
+          keys2.push([values[index], values[index + 1]]);
+          index += 2;
+        }
+      }
+      return {
+        cursor: cursor === "0" ? void 0 : cursor,
+        keys: keys2,
+        hasNextPage: cursor !== "0"
+      };
     },
     select: (data) => data,
-    getNextPageParam: (lastPage, __, lastPageIndex) => {
-      return lastPage.hasNextPage ? lastPageIndex + 1 : void 0;
-    },
-    enabled: !isFetching,
+    getNextPageParam: ({ cursor }) => cursor,
     refetchOnMount: false
   });
-  const refetch = _react.useCallback.call(void 0, () => {
-    resetCache();
-    query.refetch();
-  }, [query, resetCache]);
   const keys = _react.useMemo.call(void 0, () => {
     const keys2 = _nullishCoalesce(_optionalChain([query, 'access', _10 => _10.data, 'optionalAccess', _11 => _11.pages, 'access', _12 => _12.flatMap, 'call', _13 => _13((page) => page.keys)]), () => ( []));
-    if (exactMatchType && exactMatchType !== "none" && (search.type === void 0 || search.type === exactMatchType)) {
-      keys2.push([cleanSearchKey, exactMatchType]);
-    }
     const keysSet = /* @__PURE__ */ new Set();
     const dedupedKeys = [];
     for (const key of keys2) {
@@ -3100,19 +2970,13 @@ var KeysProvider = ({ children }) => {
       dedupedKeys.push(key);
     }
     return dedupedKeys;
-  }, [query.data, cleanSearchKey, exactMatchType]);
+  }, [query.data]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     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
     }
@@ -3295,6 +3159,10 @@ var useAddKey = () => {
 // src/components/databrowser/hooks/use-delete-key-cache.ts
 
 
+// src/components/databrowser/hooks/use-fetch-key-type.tsx
+
+var FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type";
+
 // src/components/databrowser/hooks/use-fetch-list-items.tsx
 
 var LIST_DISPLAY_PAGE_SIZE = 50;
@@ -3443,7 +3311,6 @@ var sortObject = (obj) => {
 // src/components/databrowser/hooks/use-delete-key-cache.ts
 var useDeleteKeyCache = () => {
   const { setSelectedKey } = useDatabrowserStore();
-  const { refetch } = useKeys();
   const deleteKeyCache = _react.useCallback.call(void 0, 
     (key) => {
       setSelectedKey(void 0);
@@ -3459,9 +3326,8 @@ var useDeleteKeyCache = () => {
       queryClient.invalidateQueries({
         queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key]
       });
-      refetch();
     },
-    [setSelectedKey, refetch]
+    [setSelectedKey]
   );
   return { deleteKeyCache };
 };
@@ -4457,6 +4323,18 @@ var InfiniteScroll = ({
 // src/components/databrowser/components/display/display-header.tsx
 
 
+// src/types/index.ts
+var DATA_TYPES = ["string", "list", "hash", "set", "zset", "json", "stream"];
+var DATA_TYPE_NAMES = {
+  string: "String",
+  list: "List",
+  hash: "Hash",
+  set: "Set",
+  zset: "Sorted Set",
+  json: "JSON",
+  stream: "Stream"
+};
+
 // src/components/databrowser/components/type-tag.tsx
 
 
@@ -5720,7 +5598,7 @@ function DataTypeSelector() {
 // src/components/databrowser/components/sidebar/index.tsx
 
 function Sidebar() {
-  const { keys, query, refetch } = useKeys();
+  const { keys, query } = useKeys();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col gap-2 rounded-xl border bg-white p-1", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-10 items-center justify-between pl-1", children: [
@@ -5731,7 +5609,9 @@ function Sidebar() {
             {
               className: "h-7 w-7 px-0",
               onClick: () => {
-                refetch();
+                queryClient.invalidateQueries({
+                  queryKey: [FETCH_KEYS_QUERY_KEY]
+                });
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_LIST_ITEMS_QUERY_KEY]
                 });

package/dist/index.mjs

@@ -2914,184 +2914,54 @@ function Toaster() {
 }
 
 // src/components/databrowser/hooks/use-keys.tsx
-import {
-  createContext as createContext2,
-  useCallback as useCallback2,
-  useContext as useContext2,
-  useMemo as useMemo2,
-  useRef as useRef2
-} from "react";
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo2 } from "react";
 import { useInfiniteQuery } from "@tanstack/react-query";
-
-// src/components/databrowser/hooks/use-fetch-key-type.tsx
-import { useQuery } from "@tanstack/react-query";
-var FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type";
-var useFetchKeyType = (key) => {
-  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-fetch-keys.ts
-import { useCallback, useRef } from "react";
-
-// src/types/index.ts
-var DATA_TYPES = ["string", "list", "hash", "set", "zset", "json", "stream"];
-var DATA_TYPE_NAMES = {
-  string: "String",
-  list: "List",
-  hash: "Hash",
-  set: "Set",
-  zset: "Sorted Set",
-  json: "JSON",
-  stream: "Stream"
-};
-
-// src/components/databrowser/hooks/use-fetch-keys.ts
-var PAGE_SIZE = 30;
-var FETCH_COUNTS = [100, 200, 400, 800];
-var useFetchKeys = (search) => {
-  const { redisNoPipeline: redis } = useDatabrowser();
-  const cache = useRef();
-  const lastKey = useRef();
-  const fetchKeys = useCallback(() => {
-    const newKey = JSON.stringify(search);
-    if (!cache.current || lastKey.current !== newKey) {
-      cache.current = new PaginationCache(redis, search.key, search.type);
-      lastKey.current = newKey;
-    }
-    return cache.current.fetchNewKeys();
-  }, [search]);
-  const resetCache = useCallback(() => {
-    cache.current = void 0;
-    lastKey.current = void 0;
-  }, []);
-  return {
-    fetchKeys,
-    resetCache
-  };
-};
-var PaginationCache = class {
-  constructor(redis, searchTerm, typeFilter) {
-    this.redis = redis;
-    this.searchTerm = searchTerm;
-    this.typeFilter = typeFilter;
-    if (typeFilter && !DATA_TYPES.includes(typeFilter)) {
-      throw new Error(`Invalid type filter: ${typeFilter}`);
-    }
-  }
-  // Cursor is 0 initially, then it is set to -1 when we reach the end
-  cache = Object.fromEntries(
-    DATA_TYPES.map((type) => [type, { cursor: "0", keys: [] }])
-  );
-  targetCount = 0;
-  isFetching = false;
-  async fetchNewKeys() {
-    const initialKeys = new Set(this.getKeys().map(([key]) => key));
-    this.targetCount = this.getKeys().length + PAGE_SIZE;
-    void this.startFetch();
-    await new Promise((resolve) => {
-      const interval = setInterval(() => {
-        if (this.getLength() >= this.targetCount || this.isAllEnded()) {
-          clearInterval(interval);
-          resolve();
-        }
-      }, 100);
-    });
-    const hasNextPage = !this.isAllEnded();
-    return {
-      keys: this.getKeys().filter(([key]) => !initialKeys.has(key)),
-      hasNextPage
-    };
-  }
-  getLength() {
-    return Object.values(this.cache).reduce((acc, curr) => acc + curr.keys.length, 0);
-  }
-  getKeys() {
-    const keys = Object.entries(this.cache).flatMap(([type, { keys: keys2 }]) => {
-      return keys2.map((key) => [key, type]);
-    });
-    const sorted = keys.sort((a, b) => a[0].localeCompare(b[0]));
-    return sorted;
-  }
-  async startFetch() {
-    if (this.isFetching) {
-      return;
-    }
-    this.isFetching = true;
-    try {
-      await this.fetch();
-    } finally {
-      this.isFetching = false;
-    }
-  }
-  fetchForType = async (type) => {
-    let i = 0;
-    while (true) {
-      const cursor = this.cache[type].cursor;
-      if (cursor === "-1" || this.getLength() >= this.targetCount) {
-        break;
-      }
-      const fetchCount = FETCH_COUNTS[Math.min(i, FETCH_COUNTS.length - 1)];
-      const [nextCursor, newKeys] = await this.redis.scan(cursor, {
-        count: fetchCount,
-        match: this.searchTerm,
-        type
-      });
-      this.cache[type].keys = [...this.cache[type].keys, ...newKeys];
-      this.cache[type].cursor = nextCursor === "0" ? "-1" : nextCursor;
-      i++;
-    }
-  };
-  async fetch() {
-    const types = this.typeFilter ? [this.typeFilter] : DATA_TYPES;
-    await Promise.all(types.map(this.fetchForType));
-  }
-  isAllEnded() {
-    const types = this.typeFilter ? [this.typeFilter] : DATA_TYPES;
-    return types.every((type) => this.cache[type] && this.cache[type].cursor === "-1");
-  }
-};
-
-// src/components/databrowser/hooks/use-keys.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var KeysContext = createContext2(void 0);
 var FETCH_KEYS_QUERY_KEY = "use-fetch-keys";
+var SCAN_COUNT = 100;
 var KeysProvider = ({ children }) => {
   const { search } = useDatabrowserStore();
-  const cleanSearchKey = search.key.replace("*", "");
-  const { data: exactMatchType, isFetching, isLoading } = useFetchKeyType(cleanSearchKey);
-  const { fetchKeys, resetCache } = useFetchKeys(search);
-  const pageRef = useRef2(0);
+  const { redisNoPipeline: redis } = useDatabrowser();
   const query = useInfiniteQuery({
     queryKey: [FETCH_KEYS_QUERY_KEY, search],
-    initialPageParam: 0,
-    queryFn: async ({ pageParam: page }) => {
-      if (pageRef.current >= page) resetCache();
-      pageRef.current = page;
-      return await fetchKeys();
+    initialPageParam: "0",
+    queryFn: async ({ pageParam: lastCursor }) => {
+      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(["SCAN", ...args]);
+      const keys2 = [];
+      let index = 0;
+      while (true) {
+        if (search.type) {
+          if (index >= values.length) break;
+          keys2.push([values[index], search.type]);
+          index += 1;
+        } else {
+          if (index + 1 >= values.length) break;
+          keys2.push([values[index], values[index + 1]]);
+          index += 2;
+        }
+      }
+      return {
+        cursor: cursor === "0" ? void 0 : cursor,
+        keys: keys2,
+        hasNextPage: cursor !== "0"
+      };
     },
     select: (data) => data,
-    getNextPageParam: (lastPage, __, lastPageIndex) => {
-      return lastPage.hasNextPage ? lastPageIndex + 1 : void 0;
-    },
-    enabled: !isFetching,
+    getNextPageParam: ({ cursor }) => cursor,
     refetchOnMount: false
   });
-  const refetch = useCallback2(() => {
-    resetCache();
-    query.refetch();
-  }, [query, resetCache]);
   const keys = useMemo2(() => {
     const keys2 = query.data?.pages.flatMap((page) => page.keys) ?? [];
-    if (exactMatchType && exactMatchType !== "none" && (search.type === void 0 || search.type === exactMatchType)) {
-      keys2.push([cleanSearchKey, exactMatchType]);
-    }
     const keysSet = /* @__PURE__ */ new Set();
     const dedupedKeys = [];
     for (const key of keys2) {
@@ -3100,19 +2970,13 @@ var KeysProvider = ({ children }) => {
       dedupedKeys.push(key);
     }
     return dedupedKeys;
-  }, [query.data, cleanSearchKey, exactMatchType]);
+  }, [query.data]);
   return /* @__PURE__ */ jsx4(
     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
     }
@@ -3179,7 +3043,7 @@ Button.displayName = "Button";
 import { useMutation } from "@tanstack/react-query";
 
 // src/components/databrowser/components/sidebar/db-size.tsx
-import { useQuery as useQuery2 } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 
 // src/components/ui/skeleton.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
@@ -3198,7 +3062,7 @@ import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var FETCH_DB_SIZE_QUERY_KEY = "fetch-db-size";
 var DisplayDbSize = () => {
   const { redis } = useDatabrowser();
-  const { data: keyCount } = useQuery2({
+  const { data: keyCount } = useQuery({
     queryKey: [FETCH_DB_SIZE_QUERY_KEY],
     queryFn: async () => {
       return await redis.dbsize();
@@ -3293,7 +3157,11 @@ import { useEffect as useEffect2, useState as useState3 } from "react";
 import { useMutation as useMutation2 } from "@tanstack/react-query";
 
 // src/components/databrowser/hooks/use-delete-key-cache.ts
-import { useCallback as useCallback3 } from "react";
+import { useCallback } from "react";
+
+// src/components/databrowser/hooks/use-fetch-key-type.tsx
+import { useQuery as useQuery2 } from "@tanstack/react-query";
+var FETCH_KEY_TYPE_QUERY_KEY = "fetch-key-type";
 
 // src/components/databrowser/hooks/use-fetch-list-items.tsx
 import { useInfiniteQuery as useInfiniteQuery2 } from "@tanstack/react-query";
@@ -3443,8 +3311,7 @@ var sortObject = (obj) => {
 // src/components/databrowser/hooks/use-delete-key-cache.ts
 var useDeleteKeyCache = () => {
   const { setSelectedKey } = useDatabrowserStore();
-  const { refetch } = useKeys();
-  const deleteKeyCache = useCallback3(
+  const deleteKeyCache = useCallback(
     (key) => {
       setSelectedKey(void 0);
       queryClient.invalidateQueries({
@@ -3459,9 +3326,8 @@ var useDeleteKeyCache = () => {
       queryClient.invalidateQueries({
         queryKey: [FETCH_KEY_TYPE_QUERY_KEY, key]
       });
-      refetch();
     },
-    [setSelectedKey, refetch]
+    [setSelectedKey]
   );
   return { deleteKeyCache };
 };
@@ -4457,6 +4323,18 @@ var InfiniteScroll = ({
 // src/components/databrowser/components/display/display-header.tsx
 import { IconPlus } from "@tabler/icons-react";
 
+// src/types/index.ts
+var DATA_TYPES = ["string", "list", "hash", "set", "zset", "json", "stream"];
+var DATA_TYPE_NAMES = {
+  string: "String",
+  list: "List",
+  hash: "Hash",
+  set: "Set",
+  zset: "Sorted Set",
+  json: "JSON",
+  stream: "Stream"
+};
+
 // src/components/databrowser/components/type-tag.tsx
 import {
   IconArrowsSort,
@@ -4810,7 +4688,7 @@ var ContentTypeSelect = ({
 };
 
 // src/components/databrowser/components/display/input/custom-editor.tsx
-import { useEffect as useEffect6, useRef as useRef3 } from "react";
+import { useEffect as useEffect6, useRef } from "react";
 import { Editor, useMonaco } from "@monaco-editor/react";
 
 // src/components/databrowser/copy-button.tsx
@@ -4859,7 +4737,7 @@ var CustomEditor = ({
   readOnly
 }) => {
   const monaco = useMonaco();
-  const editorRef = useRef3();
+  const editorRef = useRef();
   useEffect6(() => {
     if (!monaco || !editorRef.current) {
       return;
@@ -5720,7 +5598,7 @@ function DataTypeSelector() {
 // src/components/databrowser/components/sidebar/index.tsx
 import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
 function Sidebar() {
-  const { keys, query, refetch } = useKeys();
+  const { keys, query } = useKeys();
   return /* @__PURE__ */ jsxs31("div", { className: "flex h-full flex-col gap-2 rounded-xl border bg-white p-1", children: [
     /* @__PURE__ */ jsxs31("div", { className: "rounded-lg bg-zinc-100 px-3 py-2", children: [
       /* @__PURE__ */ jsxs31("div", { className: "flex h-10 items-center justify-between pl-1", children: [
@@ -5731,7 +5609,9 @@ function Sidebar() {
             {
               className: "h-7 w-7 px-0",
               onClick: () => {
-                refetch();
+                queryClient.invalidateQueries({
+                  queryKey: [FETCH_KEYS_QUERY_KEY]
+                });
                 queryClient.invalidateQueries({
                   queryKey: [FETCH_LIST_ITEMS_QUERY_KEY]
                 });

package/package.json

@@ -1 +1 @@
-{ "name": "@upstash/react-redis-browser", "version": "v0.1.8", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ./src" }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-portal": "^1.1.2", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.34.8", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "postcss-prefix-selector": "^2.1.0", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }
+{ "name": "@upstash/react-redis-browser", "version": "v0.1.10", "main": "./dist/index.js", "types": "./dist/index.d.ts", "license": "MIT", "private": false, "publishConfig": { "access": "public" }, "bugs": { "url": "https://github.com/upstash/react-redis-browser/issues" }, "homepage": "https://github.com/upstash/react-redis-browser", "files": [ "./dist/**" ], "scripts": { "build": "tsup", "dev": "vite", "lint": "tsc && eslint", "fmt": "prettier --write ./src" }, "lint-staged": { "**/*.{js,ts,tsx}": [ "prettier --write", "eslint --fix" ] }, "dependencies": { "@ianvs/prettier-plugin-sort-imports": "^4.4.0", "@monaco-editor/react": "^4.6.0", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-icons": "1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-portal": "^1.1.2", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-tooltip": "^1.0.7", "@tabler/icons-react": "^3.19.0", "@tanstack/react-query": "^5.32.0", "@types/bytes": "^3.1.4", "@upstash/redis": "^1.34.8", "bytes": "^3.1.2", "react-hook-form": "^7.53.0", "react-resizable-panels": "^2.1.4", "zustand": "5.0.0" }, "devDependencies": { "postcss-prefix-selector": "^2.1.0", "@types/node": "^22.8.4", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@typescript-eslint/eslint-plugin": "8.4.0", "@typescript-eslint/parser": "8.4.0", "@vitejs/plugin-react": "^4.1.0", "autoprefixer": "^10.4.14", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "eslint": "9.10.0", "eslint-plugin-unicorn": "55.0.0", "postcss": "^8.4.31", "prettier": "^3.0.3", "prettier-plugin-tailwindcss": "^0.5.5", "react": "^18.3.1", "react-dom": "^18.3.1", "tailwind-merge": "^2.5.4", "tailwindcss": "^3.4.14", "tailwindcss-animate": "^1.0.7", "tsup": "^8.3.5", "typescript": "^5.0.4", "vite": "^5.4.10", "vite-tsconfig-paths": "^5.0.1" }, "peerDependencies": { "react": "^18.2.0 || ^19", "react-dom": "^18.2.0 || ^19" } }