fix(explorer): validate sql queries (#3793)

Author: karooolis

.changeset/poor-pianos-retire.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+SQL queries in the tables viewer are now validated before execution, with errors highlighted and described directly in the editor.

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx

@@ -76,6 +76,17 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
     form.reset({ query });
   }, [query, form]);
 
+  useEffect(() => {
+    if (editorRef.current) {
+      editorRef.current.addAction({
+        id: "executeSQL",
+        label: "Execute SQL command",
+        keybindings: [KeyMod.CtrlCmd | KeyCode.Enter],
+        run: () => handleSubmit(),
+      });
+    }
+  }, [handleSubmit]);
+
   const updateHeight = () => {
     if (editorRef.current) {
       const contentHeight = Math.min(200, editorRef.current.getContentHeight());
@@ -121,13 +132,6 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
                     });
                     monaco.editor.setTheme("custom-vs-dark");
 
-                    editor.addAction({
-                      id: "executeSQL",
-                      label: "Execute SQL command",
-                      keybindings: [KeyMod.CtrlCmd | KeyCode.Enter],
-                      run: () => handleSubmit(),
-                    });
-
                     updateHeight();
                     editor.onDidContentSizeChange(updateHeight);
                     editor.onDidFocusEditorText(() => setIsFocused(true));

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/utils/getLimitOffset.ts

@@ -6,27 +6,32 @@ const opt = {
 };
 
 export function getLimitOffset(query: string) {
-  const decodedQuery = decodeURIComponent(query);
-  let ast = sqlParser.astify(decodedQuery, opt);
-  if (Array.isArray(ast) && ast.length > 0) {
-    const astFirst = ast[0];
-    if (astFirst) {
-      ast = astFirst;
+  try {
+    const decodedQuery = decodeURIComponent(query);
+    let ast = sqlParser.astify(decodedQuery, opt);
+    if (Array.isArray(ast) && ast.length > 0) {
+      const astFirst = ast[0];
+      if (astFirst) {
+        ast = astFirst;
+      }
     }
-  }
 
-  let limit = null;
-  let offset = null;
+    let limit = null;
+    let offset = null;
 
-  if ("limit" in ast) {
-    // If limit has a separator "offset", it contains both limit and offset values. Otherwise, only limit is set.
-    if (ast.limit?.seperator === "offset") {
-      limit = ast.limit?.value?.[0]?.value;
-      offset = ast.limit?.value?.[1]?.value;
-    } else {
-      limit = ast.limit?.value?.[0]?.value;
+    if ("limit" in ast) {
+      // If limit has a separator "offset", it contains both limit and offset values. Otherwise, only limit is set.
+      if (ast.limit?.seperator === "offset") {
+        limit = ast.limit?.value?.[0]?.value;
+        offset = ast.limit?.value?.[1]?.value;
+      } else {
+        limit = ast.limit?.value?.[0]?.value;
+      }
     }
-  }
 
-  return { limit, offset };
+    return { limit, offset };
+  } catch (error) {
+    console.error("Error parsing query:", error);
+    return { limit: null, offset: null };
+  }
 }