You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Opening log side panel will cause SELECT * query to run twice #1400
When you go to the search page and click on a row, the side panel will run the exact same SELECT * ... query twice instead of just once, even though we should be deduping queries via cache.
Fixed duplicate SELECT * queries in log side panel ✅
Root Cause Analysis
Found the issue! When opening the log side panel, the SELECT * query was being executed 2-3 times instead of once due to multiple components independently calling the useRowData hook:
DBRowSidePanel (parent component) - line 105
RowDataPanel (when "Column Values" tab is active) - line 191
RowOverviewPanel (when "Overview" tab is active) - line 31
The Problem:
useRowData passes a custom queryKey: ['row_side_panel', rowId, source] to useQueriedChartConfig
However, useQueriedChartConfigignores the provided queryKey and always generates its own: [config, options?.enableQueryChunking ?? false] (line 212 in useChartConfig.tsx)
Since the config objects are created separately in each component's render cycle, they're not referentially equal
This causes TanStack Query to treat them as different queries, resulting in duplicate SELECT * queries
Solution Implemented
Modified the architecture to fetch data only once in the parent component and pass it down to children:
Modified RowOverviewPanel: Added optional rowData prop. When provided, it uses the prop data instead of fetching (passes null as rowId to prevent fetch)
Modified RowDataPanel: Added optional rowData prop. When provided, it uses the prop data instead of fetching (passes null as rowId to prevent fetch)
Modified DBRowSidePanel: Now passes the fetched rowData to both child components
This ensures that only one SELECT * query runs when the side panel opens, regardless of which tab is active.
Files Changed
packages/app/src/components/DBRowSidePanel.tsx - Pass rowData to child components
I was unable to run the linting commands (yarn run lint:fix) as they require approval beyond my current permissions. The changes follow TypeScript best practices and maintain consistency with the existing codebase patterns. Please run the following commands locally if needed:
cd packages/app && yarn run lint:fix
cd packages/api && yarn run lint:fix
cd packages/common-utils && yarn lint:fix
yarn run lint
I'd like to take this one. #3568 keeps a found row fresh in the useRowData cache, so the side panel's tab reuses the row the panel just loaded and opening a row runs one SELECT * instead of two. A different row or source still runs the query, and a row that was not found is looked up again. Happy to adjust the approach if you had something else in mind.
Activity
MikeShi42 commentedon Nov 21, 2025
@claude please help me investigate this issue, you'll need to start from packages/app/src/components/DBRowSidePanel.tsx
claude commentedon Nov 21, 2025
Claude finished @MikeShi42's task —— View job •
claude/issue-1400-20251121-2055• Create PR ➔Fixed duplicate SELECT * queries in log side panel ✅
Root Cause Analysis
Found the issue! When opening the log side panel, the SELECT * query was being executed 2-3 times instead of once due to multiple components independently calling the
useRowDatahook:The Problem:
useRowDatapasses a customqueryKey: ['row_side_panel', rowId, source]touseQueriedChartConfiguseQueriedChartConfigignores the provided queryKey and always generates its own:[config, options?.enableQueryChunking ?? false](line 212 in useChartConfig.tsx)configobjects are created separately in each component's render cycle, they're not referentially equalSolution Implemented
Modified the architecture to fetch data only once in the parent component and pass it down to children:
RowOverviewPanel: Added optionalrowDataprop. When provided, it uses the prop data instead of fetching (passesnullas rowId to prevent fetch)RowDataPanel: Added optionalrowDataprop. When provided, it uses the prop data instead of fetching (passesnullas rowId to prevent fetch)DBRowSidePanel: Now passes the fetchedrowDatato both child componentsThis ensures that only one SELECT * query runs when the side panel opens, regardless of which tab is active.
Files Changed
packages/app/src/components/DBRowSidePanel.tsx- Pass rowData to child componentspackages/app/src/components/DBRowOverviewPanel.tsx- Accept optional rowData proppackages/app/src/components/DBRowDataPanel.tsx- Accept optional rowData propNote on Linting
I was unable to run the linting commands (
yarn run lint:fix) as they require approval beyond my current permissions. The changes follow TypeScript best practices and maintain consistency with the existing codebase patterns. Please run the following commands locally if needed:fix: prevent duplicate SELECT * queries when opening log side panel
feat(app): add an option to show MATERIALIZED and ALIAS columns in th…
fix(app): run the row side panel query once per opened row
BilalAtique commentedon Nov 5, 2026
I'd like to take this one. #3568 keeps a found row fresh in the
useRowDatacache, so the side panel's tab reuses the row the panel just loaded and opening a row runs oneSELECT *instead of two. A different row or source still runs the query, and a row that was not found is looked up again. Happy to adjust the approach if you had something else in mind.fix(app): run the row side panel query once per opened row (ClickHous…