feat: add schema caching with 5-min staleTime and refresh button
Reduce unnecessary re-fetches on large DWH by caching schema/management queries for 5 minutes, and add a refresh button in the sidebar to force-reload when needed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,16 +1,35 @@
|
||||
import { useState } from "react";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { SchemaTree } from "@/components/schema/SchemaTree";
|
||||
import { HistoryPanel } from "@/components/history/HistoryPanel";
|
||||
import { SavedQueriesPanel } from "@/components/saved-queries/SavedQueriesPanel";
|
||||
import { AdminPanel } from "@/components/management/AdminPanel";
|
||||
import { Search } from "lucide-react";
|
||||
import { Search, RefreshCw } from "lucide-react";
|
||||
|
||||
type SidebarView = "schema" | "history" | "saved" | "admin";
|
||||
|
||||
const SCHEMA_QUERY_KEYS = [
|
||||
"databases", "schemas", "tables", "views",
|
||||
"functions", "sequences", "completionSchema", "column-details",
|
||||
];
|
||||
|
||||
export function Sidebar() {
|
||||
const [view, setView] = useState<SidebarView>("schema");
|
||||
const [search, setSearch] = useState("");
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const handleRefreshSchema = () => {
|
||||
for (const key of SCHEMA_QUERY_KEYS) {
|
||||
queryClient.invalidateQueries({ queryKey: [key] });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col bg-card">
|
||||
@@ -59,8 +78,8 @@ export function Sidebar() {
|
||||
|
||||
{view === "schema" ? (
|
||||
<>
|
||||
<div className="p-2">
|
||||
<div className="relative">
|
||||
<div className="flex items-center gap-1 p-2">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search objects..."
|
||||
@@ -69,6 +88,18 @@ export function Sidebar() {
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
onClick={handleRefreshSchema}
|
||||
>
|
||||
<RefreshCw className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom">Refresh schema</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
|
||||
<SchemaTree />
|
||||
|
||||
Reference in New Issue
Block a user