feat(explorer): pause/resume live query (#3445)

Author: karooolis

.changeset/fair-rocks-exercise.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+SQL live queries in the Explore view table can now be paused and resumed.

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

@@ -3,7 +3,7 @@
 import { useParams } from "next/navigation";
 import { parseAsString, useQueryState } from "nuqs";
 import { Hex } from "viem";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useChain } from "../../../../hooks/useChain";
 import { usePrevious } from "../../../../hooks/usePrevious";
 import { useTablesQuery } from "../../../../queries/useTablesQuery";
@@ -17,6 +17,7 @@ export function Explorer() {
   const { worldAddress } = useParams();
   const { id: chainId } = useChain();
   const indexer = indexerForChainId(chainId);
+  const [isLiveQuery, setIsLiveQuery] = useState(true);
   const [query, setQuery] = useQueryState("query", parseAsString.withDefault(""));
   const [selectedTableId] = useQueryState("tableId");
   const prevSelectedTableId = usePrevious(selectedTableId);
@@ -40,8 +41,10 @@ export function Explorer() {
   return (
     <div className="space-y-4">
       <TableSelector tables={tables} />
-      {indexer.type !== "sqlite" && <SQLEditor table={table} />}
-      <TablesViewer table={table} query={query} />
+      {indexer.type !== "sqlite" && (
+        <SQLEditor table={table} isLiveQuery={isLiveQuery} setIsLiveQuery={setIsLiveQuery} />
+      )}
+      <TablesViewer table={table} query={query} isLiveQuery={isLiveQuery} />
     </div>
   );
 }

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { CommandIcon, CornerDownLeft } from "lucide-react";
+import { CommandIcon, CornerDownLeft, PauseIcon, PlayIcon } from "lucide-react";
 import { KeyCode, KeyMod, editor } from "monaco-editor/esm/vs/editor/editor.api";
 import { useQueryState } from "nuqs";
 import { useEffect, useRef, useState } from "react";
@@ -16,9 +16,11 @@ import { useQueryValidator } from "./useQueryValidator";
 
 type Props = {
   table?: Table;
+  isLiveQuery: boolean;
+  setIsLiveQuery: (isLiveQuery: boolean) => void;
 };
 
-export function SQLEditor({ table }: Props) {
+export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [isFocused, setIsFocused] = useState(false);
@@ -105,7 +107,16 @@ export function SQLEditor({ table }: Props) {
           ) : null}
         </div>
 
-        <div className="flex justify-end">
+        <div className="flex justify-end gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setIsLiveQuery(!isLiveQuery)}
+            title={isLiveQuery ? "Pause live query" : "Start live query"}
+          >
+            {isLiveQuery ? <PlayIcon className="h-4 w-4" /> : <PauseIcon className="h-4 w-4" />}
+          </Button>
+
           <Button className="flex gap-2 pl-4 pr-3" type="submit">
             Run
             <span className="flex items-center gap-0.5 text-white/60">

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

@@ -26,8 +26,20 @@ import { typeSortingFn } from "./utils/typeSortingFn";
 const initialSortingState: SortingState = [];
 const initialRows: TData["rows"] = [];
 
-export function TablesViewer({ table, query }: { table?: TableType; query?: string }) {
-  const { data: tableData, isLoading: isTDataLoading, isFetched, isError, error } = useTableDataQuery({ table, query });
+type Props = {
+  table?: TableType;
+  query?: string;
+  isLiveQuery: boolean;
+};
+
+export function TablesViewer({ table, query, isLiveQuery }: Props) {
+  const {
+    data: tableData,
+    isLoading: isTDataLoading,
+    isFetched,
+    isError,
+    error,
+  } = useTableDataQuery({ table, query, isLiveQuery });
   const isLoading = isTDataLoading || !isFetched;
   const [globalFilter, setGlobalFilter] = useQueryState("filter", parseAsString.withDefault(""));
   const [sorting, setSorting] = useQueryState("sort", parseAsJson<SortingState>().withDefault(initialSortingState));

packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts

@@ -9,6 +9,7 @@ import { indexerForChainId } from "../utils/indexerForChainId";
 type Props = {
   table: Table | undefined;
   query: string | undefined;
+  isLiveQuery: boolean;
 };
 
 export type TDataRow = Record<string, unknown>;
@@ -17,7 +18,7 @@ export type TData = {
   rows: TDataRow[];
 };
 
-export function useTableDataQuery({ table, query }: Props) {
+export function useTableDataQuery({ table, query, isLiveQuery }: Props) {
   const { chainName, worldAddress } = useParams();
   const { id: chainId } = useChain();
   const decodedQuery = decodeURIComponent(query ?? "");
@@ -81,6 +82,7 @@ export function useTableDataQuery({ table, query }: Props) {
     enabled: !!table && !!query,
     refetchInterval: (query) => {
       if (query.state.error) return false;
+      else if (isLiveQuery) return false;
       return 1000;
     },
   });