From 32649080323d2a27cdf4a189917a70b958d062da Mon Sep 17 00:00:00 2001
From: Karolis Ramanauskas <hello@karolisram.com>
Date: Tue, 21 Jan 2025 20:38:17 +0200
Subject: [PATCH] feat(explorer): enable re-executing query (#3471)

---
 .changeset/olive-countries-visit.md                          | 5 +++++
 .../[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx  | 3 ++-
 .../worlds/[worldAddress]/explore/TablesViewer.tsx           | 3 ++-
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/olive-countries-visit.md

diff --git a/.changeset/olive-countries-visit.md b/.changeset/olive-countries-visit.md
new file mode 100644
index 0000000000..b1985b3d5c
--- /dev/null
+++ b/.changeset/olive-countries-visit.md
@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Previously, queries could only be executed if they had changed, as data fetching was tied to query updates. Now, it’s possible to trigger a new table data fetch explicitly, regardless of whether the query has changed.
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
index 249327a804..d0b63705d1 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/SQLEditor.tsx
@@ -28,7 +28,7 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
   const [isFocused, setIsFocused] = useState(false);
   const [query, setQuery] = useQueryState("query", { defaultValue: "" });
   const validateQuery = useQueryValidator(table);
-  const { data: tableData } = useTableDataQuery({
+  const { data: tableData, refetch } = useTableDataQuery({
     table,
     query,
     isLiveQuery,
@@ -45,6 +45,7 @@ export function SQLEditor({ table, isLiveQuery, setIsLiveQuery }: Props) {
   const handleSubmit = form.handleSubmit((data) => {
     if (validateQuery(data.query)) {
       setQuery(data.query);
+      refetch();
     }
   });
 
diff --git a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx
index 4ccb86e2cf..f555174d3c 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/TablesViewer.tsx
@@ -40,11 +40,12 @@ export function TablesViewer({ table, query, isLiveQuery }: Props) {
   const {
     data: tableData,
     isLoading: isTDataLoading,
+    isRefetching,
     isFetched,
     isError,
     error,
   } = useTableDataQuery({ table, query, isLiveQuery });
-  const isLoading = isTDataLoading || !isFetched;
+  const isLoading = isTDataLoading || isRefetching || !isFetched;
   const [globalFilter, setGlobalFilter] = useQueryState("filter", parseAsString.withDefault(""));
   const [sorting, setSorting] = useQueryState("sort", parseAsJson<SortingState>().withDefault(initialSortingState));