ehance sql query with offset + limit

latticexyz · Feb 6, 2025 · 506bbfd · 506bbfd
1 parent 07a4fb2
commit 506bbfd
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 71 deletions.
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useParams } from "next/navigation";
-import { parseAsInteger, parseAsString, useQueryState } from "nuqs";
+import { parseAsString, useQueryState } from "nuqs";
 import { Hex } from "viem";
 import { useEffect, useState } from "react";
 import { useChain } from "../../../../hooks/useChain";
@@ -21,48 +21,20 @@ export function Explorer() {
   const [query, setQuery] = useQueryState("query", parseAsString.withDefault(""));
   const [selectedTableId] = useQueryState("tableId");
   const prevSelectedTableId = usePrevious(selectedTableId);
-  const [page] = useQueryState("page", parseAsInteger.withDefault(0));
-  const [pageSize] = useQueryState("pageSize", parseAsInteger.withDefault(5));
-
   const { data: tables } = useTablesQuery();
   const table = tables?.find(({ tableId }) => tableId === selectedTableId);
 
   useEffect(() => {
     if (table && (!query || prevSelectedTableId !== selectedTableId)) {
       const tableName = constructTableName(table, worldAddress as Hex, chainId);
       if (indexer.type === "sqlite") {
-        setQuery(`SELECT * FROM "${tableName}" LIMIT ${pageSize} OFFSET ${page * pageSize};`);
-      } else {
-        const columns = Object.keys(table.schema).map((column) => `"${column}"`);
-        setQuery(`SELECT ${columns.join(", ")} FROM ${tableName} LIMIT ${pageSize} OFFSET ${page * pageSize};`);
-      }
-    }
-  }, [
-    chainId,
-    setQuery,
-    selectedTableId,
-    table,
-    worldAddress,
-    prevSelectedTableId,
-    query,
-    indexer.type,
-    page,
-    pageSize,
-  ]);
-
-  // Add new effect to handle pagination changes
-  useEffect(() => {
-    if (table) {
-      // TODO: this repeats, fix
-      const tableName = constructTableName(table, worldAddress as Hex, chainId);
-      if (indexer.type === "sqlite") {
-        setQuery(`SELECT * FROM "${tableName}" LIMIT ${pageSize} OFFSET ${page * pageSize};`);
+        setQuery(`SELECT * FROM "${tableName}";`);
       } else {
         const columns = Object.keys(table.schema).map((column) => `"${column}"`);
-        setQuery(`SELECT ${columns.join(", ")} FROM ${tableName} LIMIT ${pageSize} OFFSET ${page * pageSize};`);
+        setQuery(`SELECT ${columns.join(", ")} FROM ${tableName};`);
       }
     }
-  }, [page, pageSize, table, worldAddress, chainId, indexer.type, setQuery]);
+  }, [chainId, setQuery, selectedTableId, table, worldAddress, prevSelectedTableId, query, indexer.type]);
 
   return (
     <div className="space-y-4">

diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx
@@ -52,7 +52,6 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
   const handleSubmit = form.handleSubmit((data) => {
     if (validateQuery(data.query)) {
       setQuery(data.query);
-
       setIsUserTriggeredRefetch(true);
       refetch().finally(() => setIsUserTriggeredRefetch(false));
     }
@@ -62,34 +61,6 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
     form.reset({ query });
   }, [query, form]);
 
-  // useEffect(() => {
-  //   const offset = page * pageSize;
-  //   const limit = pageSize;
-  //   const decodedQuery = decodeURIComponent(query);
-
-  //   const ast = sqlParser.astify(decodedQuery);
-  //   console.log(ast);
-
-  //   // Only modify if we have a valid AST array with at least one query
-  //   if ("limit" in ast) {
-  //     ast.limit = {
-  //       seperator: "offset",
-  //       value: [
-  //         { type: "number", value: limit },
-  //         { type: "number", value: offset },
-  //       ],
-  //     };
-
-  //     // Generate the new SQL query from the modified AST
-  //     const updatedQuery = sqlParser.sqlify(ast, {
-  //       database: "Postgresql",
-  //     });
-
-  //     // TODO: temporary fix for double-quotes while testing
-  //     setQuery(updatedQuery.replace('"world__FunctionSelector"', "world__FunctionSelector"));
-  //   }
-  // }, [table, page, pageSize, setQuery, query]);
-
   const updateHeight = () => {
     if (editorRef.current) {
       const contentHeight = Math.min(200, editorRef.current.getContentHeight());
@@ -129,10 +100,7 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
                       id: "executeSQL",
                       label: "Execute SQL command",
                       keybindings: [KeyMod.CtrlCmd | KeyCode.Enter],
-                      run: () => {
-                        console.log("EXECUTING SQL COMMAND");
-                        handleSubmit();
-                      },
+                      run: handleSubmit,
                     });
 
                     updateHeight();

diff --git a/...es/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx b/...es/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx
@@ -47,9 +47,6 @@ export function TablesViewer({ table, query, isLiveQuery }: Props) {
   const { data: tableData, isPending, isError, error } = useTableDataQuery({ table, query, isLiveQuery });
   const [globalFilter, setGlobalFilter] = useQueryState("filter", parseAsString.withDefault(""));
   const [sorting, setSorting] = useQueryState("sort", parseAsJson<SortingState>().withDefault(initialSortingState));
-
-  console.log("tableData", tableData);
-
   const [, setPage] = useQueryState("page", parseAsInteger.withDefault(0));
   const [, setPageSize] = useQueryState("pageSize", parseAsInteger.withDefault(10));
   const [pagination, setPagination] = useState({
@@ -215,7 +212,7 @@ export function TablesViewer({ table, query, isLiveQuery }: Props) {
             <SelectValue>{pagination.pageSize}</SelectValue>
           </SelectTrigger>
           <SelectContent>
-            {[5, 10, 20, 30, 40, 50].map((pageSize) => (
+            {[5, 10, 20, 30, 40, 50, 100].map((pageSize) => (
               <SelectItem key={pageSize} value={pageSize.toString()}>
                 {pageSize}
               </SelectItem>

diff --git a/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts b/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts
@@ -1,4 +1,6 @@
 import { useParams } from "next/navigation";
+import { Parser } from "node-sql-parser";
+import { parseAsInteger, useQueryState } from "nuqs";
 import { Hex, stringify } from "viem";
 import { Table } from "@latticexyz/config";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
@@ -19,16 +21,33 @@ export type TData = {
   queryDuration: number;
 };
 
+const sqlParser = new Parser();
+
 export function useTableDataQuery({ table, query, isLiveQuery }: Props) {
   const { chainName, worldAddress } = useParams();
   const { id: chainId } = useChain();
   const decodedQuery = decodeURIComponent(query ?? "");
+  const [page] = useQueryState("page", parseAsInteger.withDefault(0));
+  const [pageSize] = useQueryState("pageSize", parseAsInteger.withDefault(5));
 
   return useQuery<DozerResponse & { queryDuration: number }, Error, TData | undefined>({
-    queryKey: ["tableData", chainName, worldAddress, decodedQuery],
+    queryKey: ["tableData", chainName, worldAddress, decodedQuery, page, pageSize],
     queryFn: async () => {
       const startTime = performance.now();
       const indexer = indexerForChainId(chainId);
+      const offset = page * pageSize;
+      const limit = pageSize;
+      const ast = sqlParser.astify(decodedQuery);
+
+      let formattedQuery = decodedQuery;
+      if (!("limit" in ast) || !ast.limit) {
+        formattedQuery = `${formattedQuery} LIMIT ${limit}`;
+      }
+
+      if (!("offset" in ast) || !ast.offset) {
+        formattedQuery = `${formattedQuery} OFFSET ${offset}`;
+      }
+
       const response = await fetch(indexer.url, {
         method: "POST",
         headers: {
@@ -37,7 +56,7 @@ export function useTableDataQuery({ table, query, isLiveQuery }: Props) {
         body: stringify([
           {
             address: worldAddress as Hex,
-            query: decodedQuery,
+            query: formattedQuery,
           },
         ]),
       });