diff --git a/.changeset/dirty-carrots-peel.md b/.changeset/dirty-carrots-peel.md new file mode 100644 index 00000000..d77ea0f9 --- /dev/null +++ b/.changeset/dirty-carrots-peel.md @@ -0,0 +1,5 @@ +--- +"@hyperdx/app": patch +--- + + fix: chartpage querying too on every keystroke after initial query diff --git a/packages/app/src/components/DBEditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm.tsx index d482d8cf..4689ea3a 100644 --- a/packages/app/src/components/DBEditTimeChartForm.tsx +++ b/packages/app/src/components/DBEditTimeChartForm.tsx @@ -406,8 +406,8 @@ export default function EditTimeChartForm({ setChartConfig(form); if (tableSource != null) { const isSelectEmpty = !form.select || form.select.length === 0; // select is string or array - setQueriedConfig({ - ...structuredClone(form), + const newConfig = { + ...form, from: tableSource.from, timestampValueExpression: tableSource.timestampValueExpression, dateRange, @@ -417,7 +417,14 @@ export default function EditTimeChartForm({ select: isSelectEmpty ? tableSource.defaultTableSelectExpression || '' : form.select, - }); + }; + setQueriedConfig( + // WARNING: DON'T JUST ASSIGN OBJECTS OR DO SPREAD OPERATOR STUFF WHEN + // YOUR STATE IS AN OBJECT. YOU'RE COPYING BY REFERENCE WHICH MIGHT + // ACCIDENTALLY CAUSE A useQuery SOMEWHERE TO FIRE A REQUEST EVERYTIME + // AN INPUT CHANGES. USE structuredClone TO PERFORM A DEEP COPY INSTEAD + structuredClone(newConfig), + ); } })(); }, [handleSubmit, setChartConfig, setQueriedConfig, tableSource, dateRange]);