From af725304e133f95b0b0eb827fdf7283e54ac8342 Mon Sep 17 00:00:00 2001
From: Karolis Ramanauskas <hello@karolisram.com>
Date: Mon, 14 Oct 2024 17:43:27 +0300
Subject: [PATCH] feat(explorer): show explore table error message (#3286)

Co-authored-by: Kevin Ingersoll <kingersoll@gmail.com>
---
 .changeset/hot-buckets-draw.md                |  5 +++
 .../[worldAddress]/explore/Explorer.tsx       |  4 +-
 .../[worldAddress]/explore/TablesViewer.tsx   | 45 +++++++++++++------
 .../(explorer)/queries/useTableDataQuery.ts   | 12 ++++-
 4 files changed, 47 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/hot-buckets-draw.md

diff --git a/.changeset/hot-buckets-draw.md b/.changeset/hot-buckets-draw.md
new file mode 100644
index 0000000000..dbf9b59742
--- /dev/null
+++ b/.changeset/hot-buckets-draw.md
@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Display error messages for failed queries within the Explore tab's table viewer.
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
index 189f859ca1..e408a7d9e0 100644
--- a/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx
+++ b/packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/Explorer.tsx
@@ -6,7 +6,6 @@ import { Hex } from "viem";
 import { useEffect } from "react";
 import { useChain } from "../../../../hooks/useChain";
 import { usePrevious } from "../../../../hooks/usePrevious";
-import { useTableDataQuery } from "../../../../queries/useTableDataQuery";
 import { useTablesQuery } from "../../../../queries/useTablesQuery";
 import { constructTableName } from "../../../../utils/constructTableName";
 import { indexerForChainId } from "../../../../utils/indexerForChainId";
@@ -24,7 +23,6 @@ export function Explorer() {
 
   const { data: tables } = useTablesQuery();
   const table = tables?.find(({ tableId }) => tableId === selectedTableId);
-  const { data: tableData, isLoading, isFetched } = useTableDataQuery({ table, query });
 
   useEffect(() => {
     if (table && (!query || prevSelectedTableId !== selectedTableId)) {
@@ -42,7 +40,7 @@ export function Explorer() {
     <>
       {indexer.type !== "sqlite" && <SQLEditor />}
       <TableSelector tables={tables} />
-      <TablesViewer table={table} tableData={tableData} isLoading={isLoading || !isFetched} />
+      <TablesViewer table={table} query={query} />
     </>
   );
 }
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 ec2d8d47ea..3d558c0539 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
@@ -1,4 +1,4 @@
-import { ArrowUpDownIcon, LoaderIcon } from "lucide-react";
+import { ArrowUpDownIcon, LoaderIcon, TriangleAlertIcon } from "lucide-react";
 import { parseAsJson, parseAsString, useQueryState } from "nuqs";
 import { useMemo } from "react";
 import { Schema, Table as TableType } from "@latticexyz/config";
@@ -17,21 +17,23 @@ import { internalNamespaces } from "../../../../../../common";
 import { Button } from "../../../../../../components/ui/Button";
 import { Input } from "../../../../../../components/ui/Input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../../components/ui/Table";
-import { TableData } from "../../../../queries/useTableDataQuery";
+import { cn } from "../../../../../../utils";
+import { TableData, useTableDataQuery } from "../../../../queries/useTableDataQuery";
 import { EditableTableCell } from "./EditableTableCell";
 
 const initialSortingState: SortingState = [];
 const initialRows: TableData["rows"] = [];
 
-export function TablesViewer({
-  table,
-  tableData,
-  isLoading,
-}: {
-  table?: TableType;
-  tableData?: TableData;
-  isLoading: boolean;
-}) {
+export function TablesViewer({ table, query }: { table?: TableType; query?: string }) {
+  const {
+    data: tableData,
+    isLoading: isTableDataLoading,
+    isFetched,
+    isError,
+    error,
+  } = useTableDataQuery({ table, query });
+  const isLoading = isTableDataLoading || !isFetched;
+
   const [globalFilter, setGlobalFilter] = useQueryState("filter", parseAsString.withDefault(""));
   const [sorting, setSorting] = useQueryState("sort", parseAsJson<SortingState>().withDefault(initialSortingState));
 
@@ -109,7 +111,11 @@ export function TablesViewer({
         />
       </div>
 
-      <div className="rounded-md border">
+      <div
+        className={cn("rounded-md border", {
+          "border-red-400": isError,
+        })}
+      >
         {isLoading && (
           <div className="flex h-24 items-center justify-center">
             <LoaderIcon className="h-5 w-5 animate-spin" />
@@ -144,8 +150,19 @@ export function TablesViewer({
                   ))
                 ) : (
                   <TableRow>
-                    <TableCell colSpan={tableColumns.length} className="h-24 text-center">
-                      No results.
+                    <TableCell
+                      colSpan={tableColumns.length}
+                      className={cn("h-24 text-center", {
+                        "text-red-400": isError,
+                      })}
+                    >
+                      {isError ? (
+                        <div className="flex items-center justify-center gap-x-2">
+                          <TriangleAlertIcon /> Query error: {error.message}
+                        </div>
+                      ) : (
+                        "No results."
+                      )}
                     </TableCell>
                   </TableRow>
                 )}
diff --git a/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts b/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts
index 32b9621e9e..c4f42886fa 100644
--- a/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts
+++ b/packages/explorer/src/app/(explorer)/queries/useTableDataQuery.ts
@@ -37,7 +37,12 @@ export function useTableDataQuery({ table, query }: Props) {
         ]),
       });
 
-      return response.json();
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.msg || "Network response was not ok");
+      }
+
+      return data;
     },
     select: (data: DozerResponse) => {
       if (!table || !data?.result?.[0]) return;
@@ -58,6 +63,9 @@ export function useTableDataQuery({ table, query }: Props) {
       };
     },
     enabled: !!table && !!query,
-    refetchInterval: 1_000,
+    refetchInterval: (query) => {
+      if (query.state.error) return false;
+      return 1000;
+    },
   });
 }