feat(explorer): enable re-executing query (#3471)

.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.

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();
     }
   });
 

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));