From 018ac807e4f1ffa587bb46615bb870dfcee62cfa Mon Sep 17 00:00:00 2001 From: kemal Date: Thu, 28 Aug 2025 13:54:46 +0100 Subject: [PATCH] feat: working query select again --- .../QueryInsights/QueryMetricExplorer.tsx | 264 +++++++-- .../QueryInsights/QueryQuickGlance.tsx | 29 +- .../QueryInsights/QueryRowExplorer.tsx | 516 ++++-------------- .../insights-single-ql-query.ts | 26 +- 4 files changed, 366 insertions(+), 469 deletions(-) diff --git a/apps/studio/components/interfaces/QueryInsights/QueryMetricExplorer.tsx b/apps/studio/components/interfaces/QueryInsights/QueryMetricExplorer.tsx index 3e2f17fae38..628e442ccfc 100644 --- a/apps/studio/components/interfaces/QueryInsights/QueryMetricExplorer.tsx +++ b/apps/studio/components/interfaces/QueryInsights/QueryMetricExplorer.tsx @@ -1,4 +1,4 @@ -import { useState, useMemo } from 'react' +import { useState, useMemo, useEffect, useCallback } from 'react' import { Tabs_Shadcn_, TabsContent_Shadcn_, @@ -17,6 +17,13 @@ import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import ComposedChart from 'components/ui/Charts/ComposedChart' import { MultiAttribute } from 'components/ui/Charts/ComposedChart.utils' import dayjs from 'dayjs' +import { type InsightsQuery } from 'data/query-insights/insights-queries-query' +import { + useInsightsSingleQueryLatency, + useInsightsSingleQueryCalls, + useInsightsSingleQueryRows, + useInsightsSingleQueryRowsWritten, +} from 'data/query-insights/insights-single-ql-query' interface QueryMetricExplorerProps { startTime?: string @@ -29,6 +36,17 @@ export const QueryMetricExplorer = ({ startTime, endTime }: QueryMetricExplorerP 'rows_read' | 'query_latency' | 'queries_per_second' | 'calls' | 'cache_hits' >('query_latency') + // State to track selected query for chart highlighting + const [selectedQuery, setSelectedQuery] = useState() + const [selectedQueryId, setSelectedQueryId] = useState() + + // Debug logging for query selection (commented out to reduce console noise) + // console.log('QueryMetricExplorer Query Selection:', { + // selectedQuery: selectedQuery?.query_id, + // selectedQueryId, + // selectedQueryQuery: selectedQuery?.query?.substring(0, 50) + '...', + // }) + // State to control which percentile lines are visible for query latency const [visiblePercentiles, setVisiblePercentiles] = useState({ p50: true, @@ -62,30 +80,58 @@ export const QueryMetricExplorer = ({ startTime, endTime }: QueryMetricExplorerP // Pre-fetch query data for the QueryRowExplorer useInsightsPrefetchQuery(project?.ref, effectiveStartTime, effectiveEndTime) - // Debug logging - console.log('QueryMetricExplorer Debug:', { - props: { startTime, endTime }, - effective: { startTime: effectiveStartTime, endTime: effectiveEndTime }, - project: { ref: project?.ref, hasConnectionString: !!project?.connectionString }, - selectedMetric, - }) + // Debug logging (commented out to reduce console noise) + // console.log('QueryMetricExplorer Debug:', { + // props: { startTime, endTime }, + // effective: { startTime: effectiveStartTime, endTime: effectiveEndTime }, + // project: { ref: project?.ref, hasConnectionString: !!project?.connectionString }, + // selectedMetric, + // projectRefUndefined: !project?.ref, + // }) const { data: metricsData, isLoading, error, - } = useInsightsMetricsQuery(project?.ref, selectedMetric, effectiveStartTime, effectiveEndTime) - - // Debug logging for query results - console.log('QueryMetricExplorer Query Results:', { - metricsData, - isLoading, - error, - dataLength: metricsData?.length, + } = useInsightsMetricsQuery(project?.ref, selectedMetric, effectiveStartTime, effectiveEndTime, { + enabled: !!project?.ref, }) + // Calculate the average value for the selected query based on the current metric + const selectedQueryAverage = useMemo(() => { + if (!selectedQuery) return undefined + + switch (selectedMetric) { + case 'query_latency': + return selectedQuery.mean_exec_time + case 'calls': + return selectedQuery.calls + case 'rows_read': + return selectedQuery.rows_read || 0 + case 'cache_hits': + // Calculate cache hit rate from shared_blks_hit and shared_blks_read + const totalBlocks = + (selectedQuery.shared_blks_hit || 0) + (selectedQuery.shared_blks_read || 0) + return totalBlocks > 0 ? ((selectedQuery.shared_blks_hit || 0) / totalBlocks) * 100 : 0 + case 'queries_per_second': + // Calculate QPS from calls and total_time + const totalTimeSeconds = (selectedQuery.total_time || 0) / 1000 + return totalTimeSeconds > 0 ? (selectedQuery.calls || 0) / totalTimeSeconds : 0 + default: + return undefined + } + }, [selectedQuery, selectedMetric]) + + // Debug logging for query results (commented out to reduce console noise) + // console.log('QueryMetricExplorer Query Results:', { + // metricsData, + // isLoading, + // error, + // dataLength: metricsData?.length, + // }) + // Define chart attributes based on selected metric - const getChartAttributes = (): MultiAttribute[] => { + const getChartAttributes = useMemo((): MultiAttribute[] => { const metricConfigs = { rows_read: { label: 'Rows Read', format: '' }, query_latency: { label: 'Query Latency', format: 'ms' }, @@ -154,10 +200,27 @@ export const QueryMetricExplorer = ({ startTime, endTime }: QueryMetricExplorerP }) } + // Add selected query attribute if available + if (selectedQuery && selectedQueryAverage !== undefined) { + attributes.push({ + attribute: 'selected', + label: 'Selected', + format: 'ms', + provider: 'query-insights' as any, + color: { + light: '#dc2626', // Bright red color for selected query + dark: '#ef4444', + }, + strokeDasharray: '5 5', // Dashed line + type: 'line', + strokeWidth: 4, // Even thicker line for more prominence + }) + } + return attributes } - return [ + const attributes: MultiAttribute[] = [ { attribute: selectedMetric, label: config.label, @@ -165,7 +228,26 @@ export const QueryMetricExplorer = ({ startTime, endTime }: QueryMetricExplorerP provider: 'query-insights' as any, }, ] - } + + // Add selected query attribute if available + if (selectedQuery && selectedQueryAverage !== undefined) { + attributes.push({ + attribute: 'selected', + label: 'Selected', + format: config.format, + provider: 'query-insights' as any, + color: { + light: '#dc2626', // Bright red color for selected query + dark: '#ef4444', + }, + strokeDasharray: '5 5', // Dashed line + type: 'line', + strokeWidth: 4, // Even thicker line for more prominence + }) + } + + return attributes + }, [selectedMetric, safeVisiblePercentiles, selectedQuery]) // Calculate average P95 for query latency const averageP95 = useMemo(() => { @@ -179,7 +261,7 @@ export const QueryMetricExplorer = ({ startTime, endTime }: QueryMetricExplorerP // Transform data for the chart const chartData = useMemo(() => { if (!metricsData || metricsData.length === 0) { - console.log('QueryMetricExplorer: No metrics data available') + // console.log('QueryMetricExplorer: No metrics data available') return { data: [], format: '', @@ -188,12 +270,12 @@ export const QueryMetricExplorer = ({ startTime, endTime }: QueryMetricExplorerP } } - console.log('QueryMetricExplorer: Processing metrics data:', { - metricsData, - selectedMetric, - dataLength: metricsData.length, - firstItem: metricsData[0], - }) + // console.log('QueryMetricExplorer: Processing metrics data:', { + // metricsData, + // selectedMetric, + // dataLength: metricsData.length, + // firstItem: metricsData[0], + // }) const transformed = metricsData.map((item) => { // Convert timestamp to ISO string format as expected by ChartData @@ -226,6 +308,31 @@ export const QueryMetricExplorer = ({ startTime, endTime }: QueryMetricExplorerP } }) + // Add selected query data if available + if (selectedQuery && selectedQueryAverage !== undefined) { + // Add the selected query average as a constant line across all data points + const transformedWithSelected = transformed.map((item) => ({ + ...item, + selected: selectedQueryAverage, + })) + transformed.splice(0, transformed.length, ...transformedWithSelected) + + // Debug: Check if selected query data was added + console.log('Chart Data Merge Debug:', { + selectedQueryId: selectedQuery?.query_id, + selectedQueryAverage, + transformedLength: transformed.length, + hasSelectedData: transformed.some((item) => item.selected !== undefined), + sampleTransformedItem: transformed[0], + chartAttributes: getChartAttributes.map((attr) => ({ + attribute: attr.attribute, + label: attr.label, + type: attr.type, + })), + hasSelectedAttribute: getChartAttributes.some((attr) => attr.attribute === 'selected'), + }) + } + // Calculate totals for the ChartData format const total = transformed.reduce((sum, item) => { if (selectedMetric === 'query_latency') { @@ -244,23 +351,29 @@ export const QueryMetricExplorer = ({ startTime, endTime }: QueryMetricExplorerP ? { p95: total } // Use p95 as the main metric for query latency : { [selectedMetric]: total } - console.log('QueryMetricExplorer Chart Data:', { - originalData: metricsData, - transformedData: transformed, - selectedMetric, - dataLength: transformed.length, - visiblePercentiles, - total, - totalGrouped, - }) + // console.log('QueryMetricExplorer Chart Data:', { + // originalData: metricsData, + // transformedData: transformed, + // selectedMetric, + // dataLength: transformed.length, + // visiblePercentiles, + // total, + // totalGrouped, + // selectedQuery: selectedQuery?.query_id, + // selectedQueryDataLength: selectedQueryData.length, + // selectedQueryData: selectedQueryData, + // selectedQueryLatency: selectedQueryLatency, + // selectedQueryCalls: selectedQueryCalls, + // selectedQueryRows: selectedQueryRows, + // }) return { data: transformed, - format: getChartAttributes()[0].format || '', + format: getChartAttributes[0].format || '', total, totalGrouped, } - }, [metricsData, selectedMetric, safeVisiblePercentiles]) + }, [metricsData, selectedMetric, safeVisiblePercentiles, selectedQuery, selectedQueryAverage]) // Mock updateDateRange function for LogChartHandler const updateDateRange = () => { @@ -268,6 +381,38 @@ export const QueryMetricExplorer = ({ startTime, endTime }: QueryMetricExplorerP console.log('updateDateRange called - not implemented in QueryMetricExplorer') } + // Handle query selection from child component + const handleQuerySelect = useCallback( + (query: InsightsQuery | undefined) => { + // console.log('QueryMetricExplorer: handleQuerySelect called', { + // newQuery: query?.query_id, + // currentSelectedQuery: selectedQuery?.query_id, + // currentSelectedQueryId: selectedQueryId, + // willUpdate: + // query?.query_id !== selectedQuery?.query_id || query?.query_id !== selectedQueryId, + // timestamp: new Date().toISOString(), + // }) + setSelectedQuery(query) + setSelectedQueryId(query?.query_id) + }, + [] // No dependencies to prevent unnecessary recreations + ) + + // Clear selected query + const clearSelectedQuery = useCallback(() => { + // console.log('QueryMetricExplorer: Clearing selected query', { + // currentSelectedQuery: selectedQuery?.query_id, + // currentSelectedQueryId: selectedQueryId, + // }) + setSelectedQuery(undefined) + setSelectedQueryId(undefined) + }, []) // No dependencies to prevent unnecessary recreations + + // Reset selection when date range changes + useEffect(() => { + clearSelectedQuery() + }, [effectiveStartTime, effectiveEndTime]) + return (
@@ -309,6 +454,18 @@ export const QueryMetricExplorer = ({ startTime, endTime }: QueryMetricExplorerP QPS + {selectedQuery && ( +
+
+ Query {selectedQuery.query_id} highlighted + +
+ )} @@ -320,16 +477,32 @@ export const QueryMetricExplorer = ({ startTime, endTime }: QueryMetricExplorerP
) : chartData.data.length > 0 ? ( <> + {(() => { + console.log('Chart Data Final Debug:', { + chartDataLength: chartData.data.length, + firstDataPoint: chartData.data[0], + attributes: getChartAttributes.map((attr) => attr.attribute), + selectedQuery: selectedQuery?.query_id, + // Check if selected query data is in the final chart data + hasSelectedQueryData: chartData.data.some( + (item) => item.selected !== undefined + ), + selectedQueryDataPoints: chartData.data.filter( + (item) => item.selected !== undefined + ).length, + }) + return null + })()} - + ) diff --git a/apps/studio/components/interfaces/QueryInsights/QueryQuickGlance.tsx b/apps/studio/components/interfaces/QueryInsights/QueryQuickGlance.tsx index 1873eead9ce..658d60c4524 100644 --- a/apps/studio/components/interfaces/QueryInsights/QueryQuickGlance.tsx +++ b/apps/studio/components/interfaces/QueryInsights/QueryQuickGlance.tsx @@ -25,26 +25,29 @@ export const QueryQuickGlance = ({ startTime, endTime }: QueryQuickGlanceProps) return { startTime: fallbackStartTime, endTime: fallbackEndTime } }, [startTime, endTime]) - // Debug logging - console.log('QueryQuickGlance Debug:', { - props: { startTime, endTime }, - effective: { startTime: effectiveStartTime, endTime: effectiveEndTime }, - project: { ref: project?.ref, hasConnectionString: !!project?.connectionString }, - }) + // Debug logging (commented out to reduce console noise) + // console.log('QueryQuickGlance Debug:', { + // props: { startTime, endTime }, + // effective: { startTime: effectiveStartTime, endTime: effectiveEndTime }, + // project: { ref: project?.ref, hasConnectionString: !!project?.connectionString }, + // projectRefUndefined: !project?.ref, + // }) const { data: glanceData, isLoading, error, - } = useInsightsGlanceQuery(project?.ref, effectiveStartTime, effectiveEndTime) - - // Debug logging for glance results - console.log('QueryQuickGlance Results:', { - glanceData, - isLoading, - error, + } = useInsightsGlanceQuery(project?.ref, effectiveStartTime, effectiveEndTime, { + enabled: !!project?.ref, }) + // Debug logging for glance results (commented out to reduce console noise) + // console.log('QueryQuickGlance Results:', { + // glanceData, + // isLoading, + // error, + // }) + const cards = useMemo(() => { if (!glanceData) return [] diff --git a/apps/studio/components/interfaces/QueryInsights/QueryRowExplorer.tsx b/apps/studio/components/interfaces/QueryInsights/QueryRowExplorer.tsx index 4f9e2d4307b..181cd109880 100644 --- a/apps/studio/components/interfaces/QueryInsights/QueryRowExplorer.tsx +++ b/apps/studio/components/interfaces/QueryInsights/QueryRowExplorer.tsx @@ -1,22 +1,12 @@ -import { Search, TextSearch, X } from 'lucide-react' +import { Search, TextSearch } from 'lucide-react' import { useRouter } from 'next/router' -import { useEffect, useRef, useState } from 'react' +import { useEffect, useRef, useState, useMemo } from 'react' import DataGrid, { DataGridHandle, Row } from 'react-data-grid' import { LOCAL_STORAGE_KEYS, useParams } from 'common' import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject' import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage' -import { - Button, - ResizableHandle, - ResizablePanel, - ResizablePanelGroup, - TabsContent_Shadcn_, - TabsList_Shadcn_, - TabsTrigger_Shadcn_, - Tabs_Shadcn_, - cn, -} from 'ui' +import { cn } from 'ui' import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader' import { Input } from 'ui-patterns/DataInputs/Input' import { FilterPopover } from 'components/ui/FilterPopover' @@ -24,45 +14,52 @@ import { useInsightsQueriesQuery, type InsightsQuery, } from 'data/query-insights/insights-queries-query' -import { - useInsightsSingleQueryLatency, - useInsightsSingleQueryCalls, - useInsightsSingleQueryRows, - useInsightsSingleQueryRowsWritten, -} from 'data/query-insights/insights-single-ql-query' import { ColumnConfiguration, QUERY_INSIGHTS_TABLE_COLUMNS } from './QueryInsights.constants' import { formatQueryInsightsColumns } from './QueryInsights.utils' interface QueryRowExplorerProps { startTime: string endTime: string + onQuerySelect?: (query: InsightsQuery | undefined) => void + selectedQueryId?: number } -export const QueryRowExplorer = ({ startTime, endTime }: QueryRowExplorerProps) => { +export const QueryRowExplorer = ({ + startTime, + endTime, + onQuerySelect, + selectedQueryId, +}: QueryRowExplorerProps) => { const router = useRouter() const gridRef = useRef(null) const { ref } = useParams() const { data: project } = useSelectedProjectQuery() - const { data: queries, isLoading, error } = useInsightsQueriesQuery(ref, startTime, endTime) - - // Debug logging - console.log('QueryRowExplorer Debug:', { - ref, - startTime, - endTime, - queries, + const { + data: queries, isLoading, error, - queriesLength: queries?.length, + } = useInsightsQueriesQuery(ref, startTime, endTime, { + enabled: !!ref, }) + // Debug logging (commented out to reduce console noise) + // console.log('QueryRowExplorer Debug:', { + // ref, + // startTime, + // endTime, + // queries, + // isLoading, + // error, + // queriesLength: queries?.length, + // refUndefined: !ref, + // }) + const [sort, setSort] = useState<{ column: string; order: 'asc' | 'desc' } | undefined>({ column: 'badness_score', order: 'desc', }) const [selectedRow, setSelectedRow] = useState() - const [view, setView] = useState<'details' | 'indexes' | 'metrics'>('details') const [filterText, setFilterText] = useState('') const [selectedColumns, setSelectedColumns] = useState([]) @@ -156,50 +153,24 @@ export const QueryRowExplorer = ({ startTime, endTime }: QueryRowExplorerProps) ? sortedData.filter((query) => query.query.toLowerCase().includes(filterText.toLowerCase())) : sortedData - const selectedQuery = selectedRow !== undefined ? filteredData[selectedRow] : undefined + const selectedQuery = useMemo(() => { + return selectedRow !== undefined ? filteredData[selectedRow] : undefined + }, [selectedRow, filteredData]) - // Single query metrics hooks - const { data: singleQueryLatency } = useInsightsSingleQueryLatency( - ref, - startTime, - endTime, - selectedQuery?.query_id?.toString() - ) - - const { data: singleQueryCalls } = useInsightsSingleQueryCalls( - ref, - startTime, - endTime, - selectedQuery?.query_id?.toString() - ) - - const { data: singleQueryRows } = useInsightsSingleQueryRows( - ref, - startTime, - endTime, - selectedQuery?.query_id?.toString() - ) - - const { data: singleQueryRowsWritten } = useInsightsSingleQueryRowsWritten( - ref, - startTime, - endTime, - selectedQuery?.query_id?.toString() - ) - - // Debug logging for table data - console.log('QueryRowExplorer Table Debug:', { - queries, - reportData, - reportDataLength: reportData.length, - sortedDataLength: sortedData.length, - filteredDataLength: filteredData.length, - filterText, - isLoading, - error, - firstRow: filteredData[0], - }) + // Update selectedRow when selectedQueryId changes from parent + useEffect(() => { + if (selectedQueryId !== undefined) { + const index = filteredData.findIndex((query) => query.query_id === selectedQueryId) + if (index !== -1) { + setSelectedRow(index) + gridRef.current?.scrollToCell({ idx: 0, rowIdx: index }) + } + } else { + setSelectedRow(undefined) + } + }, [selectedQueryId, filteredData]) + // Reset selection when date range changes useEffect(() => { setSelectedRow(undefined) }, [startTime, endTime]) @@ -264,346 +235,75 @@ export const QueryRowExplorer = ({ startTime, endTime }: QueryRowExplorerProps) /> - - - { - console.log('DataGrid rows changed:', newRows.length) - }} - rowClass={(_, idx) => { - const isSelected = idx === selectedRow - return [ - `${isSelected ? 'bg-surface-300 dark:bg-surface-300' : 'bg-200'} cursor-pointer`, - `${isSelected ? '[&>div:first-child]:border-l-4 border-l-secondary [&>div]:border-l-foreground' : ''}`, - '[&>.rdg-cell]:border-box [&>.rdg-cell]:outline-none [&>.rdg-cell]:shadow-none', - '[&>.rdg-cell:first-child>div]:ml-4', - ].join(' ') - }} - renderers={{ - renderRow(idx, props) { - return ( - { - if (typeof idx === 'number' && idx >= 0) { +
+ { + // console.log('DataGrid rows changed:', newRows.length) + }} + rowClass={(_, idx) => { + const isSelected = idx === selectedRow + return [ + `${isSelected ? 'bg-surface-300 dark:bg-surface-300' : 'bg-200'} cursor-pointer`, + `${isSelected ? '[&>div:first-child]:border-l-4 border-l-secondary [&>div]:border-l-foreground' : ''}`, + '[&>.rdg-cell]:border-box [&>.rdg-cell]:outline-none [&>.rdg-cell]:shadow-none', + '[&>.rdg-cell:first-child>div]:ml-4', + ].join(' ') + }} + renderers={{ + renderRow(idx, props) { + return ( + { + if (typeof idx === 'number' && idx >= 0 && idx < filteredData.length) { + const query = filteredData[idx] + const isAlreadySelected = selectedQuery?.query_id === query.query_id + + // If the query is already selected, deselect it + if (isAlreadySelected) { + setSelectedRow(undefined) + onQuerySelect?.(undefined) + } else { + // Otherwise, select the new query setSelectedRow(idx) + onQuerySelect?.(query) gridRef.current?.scrollToCell({ idx: 0, rowIdx: idx }) } - }} - /> - ) - }, - noRowsFallback: isLoading ? ( -
- + } + }} + /> + ) + }, + noRowsFallback: isLoading ? ( +
+ +
+ ) : ( +
+ +
+

+ {filterText ? 'No queries found' : 'No queries detected'} +

+

+ {filterText + ? `No queries match "${filterText}" in the selected time range` + : 'There are no queries that match the criteria in the selected time range'} +

- ) : ( -
- -
-

- {filterText ? 'No queries found' : 'No queries detected'} -

-

- {filterText - ? `No queries match "${filterText}" in the selected time range` - : 'There are no queries that match the criteria in the selected time range'} -

-
-
- ), - }} - /> - - {selectedRow !== undefined && selectedQuery && ( - <> - - -
+ ), + }} + /> +
) } diff --git a/apps/studio/data/query-insights/insights-single-ql-query.ts b/apps/studio/data/query-insights/insights-single-ql-query.ts index 1fb31f4e3c5..c1941ec48d9 100644 --- a/apps/studio/data/query-insights/insights-single-ql-query.ts +++ b/apps/studio/data/query-insights/insights-single-ql-query.ts @@ -102,10 +102,14 @@ export function useInsightsSingleQueryLatency( sql: getSingleQueryLatencySql(queryId, startTime, endTime), }) - console.log('Chart data points:', result) + // console.log('Chart data points:', result) return result as InsightsMetric[] }, enabled: !!queryId && !!projectRef, + staleTime: 5 * 60 * 1000, // Cache for 5 minutes + cacheTime: 10 * 60 * 1000, // Keep in cache for 10 minutes + refetchOnWindowFocus: false, // Don't refetch on window focus + refetchOnMount: false, // Don't refetch on mount if data exists ...options, }) } @@ -124,17 +128,21 @@ export function useInsightsSingleQueryRows( if (!queryId) return [] const sql = getSingleQueryRowsSql(queryId, startTime, endTime) - console.log('[useInsightsSingleQueryRows] Executing SQL:', sql) + // console.log('[useInsightsSingleQueryRows] Executing SQL:', sql) const { result } = await executeSql({ projectRef, sql, }) - console.log('[useInsightsSingleQueryRows] Result:', result) + // console.log('[useInsightsSingleQueryRows] Result:', result) return result as InsightsMetric[] }, enabled: !!queryId && !!projectRef, + staleTime: 5 * 60 * 1000, // Cache for 5 minutes + cacheTime: 10 * 60 * 1000, // Keep in cache for 10 minutes + refetchOnWindowFocus: false, // Don't refetch on window focus + refetchOnMount: false, // Don't refetch on mount if data exists ...options, }) } @@ -160,17 +168,21 @@ export function useInsightsSingleQueryRowsWritten( if (!queryId) return [] const sql = getSingleQueryRowsWrittenSql(queryId, startTime, endTime) - console.log('[useInsightsSingleQueryRowsWritten] Executing SQL:', sql) + // console.log('[useInsightsSingleQueryRowsWritten] Executing SQL:', sql) const { result } = await executeSql({ projectRef, sql, }) - console.log('[useInsightsSingleQueryRowsWritten] Result:', result) + // console.log('[useInsightsSingleQueryRowsWritten] Result:', result) return result as InsightsMetric[] }, enabled: !!queryId && !!projectRef, + staleTime: 5 * 60 * 1000, // Cache for 5 minutes + cacheTime: 10 * 60 * 1000, // Keep in cache for 10 minutes + refetchOnWindowFocus: false, // Don't refetch on window focus + refetchOnMount: false, // Don't refetch on mount if data exists ...options, }) } @@ -196,6 +208,10 @@ export function useInsightsSingleQueryCalls( return result as InsightsMetric[] }, enabled: !!queryId && !!projectRef, + staleTime: 5 * 60 * 1000, // Cache for 5 minutes + cacheTime: 10 * 60 * 1000, // Keep in cache for 10 minutes + refetchOnWindowFocus: false, // Don't refetch on window focus + refetchOnMount: false, // Don't refetch on mount if data exists ...options, }) }