SQLEditor: Use queryRef to call onChange (#209)

* Use queryRef to call onChange

* Update src/components/QueryEditor.tsx

Co-authored-by: Isabella Siu <[email protected]>

Co-authored-by: Isabella Siu <[email protected]>

Author: idastambuk

src/components/QueryEditor.tsx

@@ -165,7 +165,7 @@ export function QueryEditor(props: Props) {
         <SQLEditor
           query={query}
           onRunQuery={props.onRunQuery}
-          onChange={(rawQuery) => props.onChange({ ...props.query, rawQuery })}
+          onChange={props.onChange}
           datasource={props.datasource}
         />
       </div>

src/components/SQLEditor.tsx

@@ -9,7 +9,7 @@ import timestreamLanguageDefinition from 'language/definition';
 interface RawEditorProps {
   query: TimestreamQuery;
   onRunQuery: () => void;
-  onChange: (q: string) => void;
+  onChange: (query: TimestreamQuery) => void;
   datasource: DataSource;
 }
 
@@ -19,6 +19,10 @@ export default function SQLEditor({ query, datasource, onRunQuery, onChange }: R
     queryRef.current = query;
   }, [query]);
 
+  const onChangeRawQuery = (rawQuery: string) => {
+    onChange({ ...queryRef.current, rawQuery });
+  };
+
   const getDatabases = useCallback(async () => {
     const databases: string[] = await datasource.postResource('databases').catch(() => []);
     return databases.map((database) => ({ name: database, completion: database }));
@@ -67,7 +71,7 @@ export default function SQLEditor({ query, datasource, onRunQuery, onChange }: R
     <SQLCodeEditor
       query={query.rawQuery ?? ''}
       onBlur={() => onRunQuery()}
-      onChange={(rawQuery) => onChange(rawQuery)}
+      onChange={onChangeRawQuery}
       language={{
         ...timestreamLanguageDefinition,
         completionProvider,