fix(explorer): fetch from sqlite indexer in production (#3679)

Author: karooolis

.changeset/forty-icons-eat.md

@@ -0,0 +1,5 @@
+---
+"@latticexyz/explorer": patch
+---
+
+Fixed fetching data from `@latticexyz/store-indexer` `/q` API endpoint in production builds.

packages/explorer/src/app/(explorer)/[chainName]/Providers.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { ReactNode } from "react";
+import "@rainbow-me/rainbowkit/styles.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+export function Providers({ children }: { children: ReactNode }) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}

packages/explorer/src/app/(explorer)/[chainName]/layout.tsx

@@ -2,6 +2,7 @@
 
 import { notFound } from "next/navigation";
 import { isValidChainName } from "../../../common";
+import { Providers } from "./Providers";
 
 type Props = {
   params: {
@@ -15,5 +16,5 @@ export default function ChainLayout({ params: { chainName }, children }: Props)
     return notFound();
   }
 
-  return children;
+  return <Providers>{children}</Providers>;
 }

packages/explorer/src/app/(explorer)/[chainName]/worlds/WorldsForm.tsx

@@ -24,7 +24,12 @@ const formSchema = z.object({
     .transform((value): Address => value as Address),
 });
 
-export function WorldsForm({ worlds }: { worlds: Address[] }) {
+type Props = {
+  worlds: Address[];
+  isLoading: boolean;
+};
+
+export function WorldsForm({ worlds, isLoading }: Props) {
   const router = useRouter();
   const { chainName } = useParams();
   const [open, setOpen] = useState(false);
@@ -78,14 +83,15 @@ export function WorldsForm({ worlds }: { worlds: Address[] }) {
                           setOpen(false);
                         }}
                         onFocus={handleOpenOptions}
-                        placeholder="Enter world address..."
+                        placeholder={isLoading ? "Loading worlds..." : "Enter world address..."}
                         // Need to manually trigger form submission as CommandPrimitive.Input captures Enter key events
                         onKeyDown={(e) => {
                           if (!open && e.key === "Enter") {
                             e.preventDefault();
                             form.handleSubmit(onSubmit)();
                           }
                         }}
+                        disabled={isLoading}
                       >
                         <Input className="h-12" />
                       </CommandPrimitive.Input>
@@ -130,14 +136,14 @@ export function WorldsForm({ worlds }: { worlds: Address[] }) {
             </div>
 
             <div className="flex w-full items-center gap-x-2">
-              <Button type="submit" className="flex-1 uppercase" variant="default">
+              <Button type="submit" className="flex-1 uppercase" variant="default" disabled={isLoading}>
                 Explore the world
               </Button>
               <Button
                 className="flex-1 uppercase"
                 variant="secondary"
                 onClick={onLuckyWorld}
-                disabled={worlds.length === 0}
+                disabled={worlds.length === 0 || isLoading}
               >
                 I&apos;m feeling lucky
               </Button>

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

@@ -5,10 +5,10 @@ import { useQueryState } from "nuqs";
 import { Hex } from "viem";
 import { useEffect, useState } from "react";
 import { useChain } from "../../../../hooks/useChain";
+import { useIndexerForChainId } from "../../../../hooks/useIndexerForChainId";
 import { usePrevious } from "../../../../hooks/usePrevious";
 import { useTablesQuery } from "../../../../queries/useTablesQuery";
 import { constructTableName } from "../../../../utils/constructTableName";
-import { indexerForChainId } from "../../../../utils/indexerForChainId";
 import { SQLEditor } from "./SQLEditor";
 import { TableSelector } from "./TableSelector";
 import { TablesViewer } from "./TablesViewer";
@@ -18,7 +18,8 @@ import { useSQLQueryState } from "./hooks/useSQLQueryState";
 export function Explorer() {
   const { worldAddress } = useParams();
   const { id: chainId } = useChain();
-  const indexer = indexerForChainId(chainId);
+  const indexer = useIndexerForChainId(chainId);
+
   const [isLiveQuery, setIsLiveQuery] = useState(indexer.type === "sqlite");
   const [{ pageSize }, setPagination] = usePaginationState();
   const [query, setQuery] = useSQLQueryState();
@@ -29,7 +30,7 @@ export function Explorer() {
 
   useEffect(() => {
     if (table && (!query || prevSelectedTableId !== selectedTableId)) {
-      const tableName = constructTableName(table, worldAddress as Hex, chainId);
+      const tableName = constructTableName(table, worldAddress as Hex, indexer.type);
       if (indexer.type === "sqlite") {
         setQuery(`SELECT * FROM "${tableName}" WHERE __isDeleted = 0;`);
       } else {

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

@@ -16,6 +16,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "../../../../../../components/ui/Popover";
 import { cn } from "../../../../../../utils";
 import { useChain } from "../../../../hooks/useChain";
+import { useIndexerForChainId } from "../../../../hooks/useIndexerForChainId";
 import { constructTableName } from "../../../../utils/constructTableName";
 
 function TableSelectorItem({ table, selected, asOption }: { table: Table; selected: boolean; asOption?: boolean }) {
@@ -33,6 +34,7 @@ function TableSelectorItem({ table, selected, asOption }: { table: Table; select
 export function TableSelector({ tables }: { tables?: Table[] }) {
   const { worldAddress } = useParams();
   const { id: chainId } = useChain();
+  const indexer = useIndexerForChainId(chainId);
   const [selectedTableId, setTableId] = useQueryState("tableId");
   const [open, setOpen] = useState(false);
   const [searchValue, setSearchValue] = useState("");
@@ -47,12 +49,12 @@ export function TableSelector({ tables }: { tables?: Table[] }) {
   useLayoutEffect(() => {
     if (open && selectedTableId && selectedTableConfig) {
       setTimeout(() => {
-        const selectedTableId = constructTableName(selectedTableConfig, worldAddress as Hex, chainId);
+        const selectedTableId = constructTableName(selectedTableConfig, worldAddress as Hex, indexer.type);
         const selectedElement = document.querySelector(`[data-value="${selectedTableId}"]`);
         selectedElement?.scrollIntoView({ behavior: "instant", block: "center" });
       }, 0);
     }
-  }, [chainId, open, selectedTableConfig, selectedTableId, worldAddress]);
+  }, [chainId, indexer.type, open, selectedTableConfig, selectedTableId, worldAddress]);
 
   return (
     <div className="w-full">
@@ -93,7 +95,7 @@ export function TableSelector({ tables }: { tables?: Table[] }) {
                   return (
                     <CommandItem
                       key={table.tableId}
-                      value={constructTableName(table, worldAddress as Hex, chainId)}
+                      value={constructTableName(table, worldAddress as Hex, indexer.type)}
                       onSelect={() => {
                         setTableId(table.tableId);
                         setOpen(false);

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

@@ -30,8 +30,8 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../../components/ui/Table";
 import { cn } from "../../../../../../utils";
 import { useChain } from "../../../../hooks/useChain";
+import { useIndexerForChainId } from "../../../../hooks/useIndexerForChainId";
 import { TData, TDataRow, useTableDataQuery } from "../../../../queries/useTableDataQuery";
-import { indexerForChainId } from "../../../../utils/indexerForChainId";
 import { ExportButton } from "./ExportButton";
 import { PAGE_SIZE_OPTIONS } from "./consts";
 import { defaultColumn } from "./defaultColumn";
@@ -58,7 +58,7 @@ type Props = {
 
 export function TablesViewer({ table, isLiveQuery }: Props) {
   const { id: chainId } = useChain();
-  const indexer = indexerForChainId(chainId);
+  const indexer = useIndexerForChainId(chainId);
   const [query, setQuery] = useSQLQueryState();
   const [globalFilter, setGlobalFilter] = useQueryState("filter", parseAsString.withDefault(""));
   const [sorting, setSorting] = useQueryState("sort", parseAsJson<SortingState>().withDefault(initialSortingState));

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryAutocomplete.ts

@@ -4,18 +4,20 @@ import { Address } from "viem";
 import { useMemo } from "react";
 import { Table } from "@latticexyz/config";
 import { useChain } from "../../../../hooks/useChain";
+import { useIndexerForChainId } from "../../../../hooks/useIndexerForChainId";
 import { constructTableName } from "../../../../utils/constructTableName";
 
 export function useQueryAutocomplete(table?: Table) {
-  const { id: chainId } = useChain();
   const { worldAddress } = useParams<{ worldAddress: Address }>();
+  const { id: chainId } = useChain();
+  const indexer = useIndexerForChainId(chainId);
 
   return useMemo(() => {
     if (!table || !worldAddress || !chainId) return null;
 
-    const tableName = constructTableName(table, worldAddress as Address, chainId);
+    const tableName = constructTableName(table, worldAddress as Address, indexer.type);
     const columnNames = Object.keys(table.schema);
 
     return new SQLAutocomplete(SQLDialect.PLpgSQL, [tableName], columnNames);
-  }, [table, worldAddress, chainId]);
+  }, [table, worldAddress, chainId, indexer.type]);
 }

packages/explorer/src/app/(explorer)/[chainName]/worlds/[worldAddress]/explore/useQueryValidator.ts

@@ -5,6 +5,7 @@ import { useCallback } from "react";
 import { Table } from "@latticexyz/config";
 import { useMonaco } from "@monaco-editor/react";
 import { useChain } from "../../../../hooks/useChain";
+import { useIndexerForChainId } from "../../../../hooks/useIndexerForChainId";
 import { constructTableName } from "../../../../utils/constructTableName";
 import { useMonacoErrorMarker } from "./useMonacoErrorMarker";
 
@@ -47,6 +48,7 @@ export function useQueryValidator(table?: Table) {
   const monaco = useMonaco();
   const { worldAddress } = useParams();
   const { id: chainId } = useChain();
+  const indexer = useIndexerForChainId(chainId);
   const setErrorMarker = useMonacoErrorMarker();
 
   return useCallback(
@@ -73,7 +75,7 @@ export function useQueryValidator(table?: Table) {
           for (const tableInfo of ast.from) {
             if ("table" in tableInfo) {
               const selectedTableName = tableInfo.table;
-              const tableName = constructTableName(table, worldAddress as Address, chainId);
+              const tableName = constructTableName(table, worldAddress as Address, indexer.type);
 
               if (selectedTableName !== tableName) {
                 setErrorMarker({
@@ -106,6 +108,6 @@ export function useQueryValidator(table?: Table) {
         return false;
       }
     },
-    [monaco, table, setErrorMarker, worldAddress, chainId],
+    [monaco, table, setErrorMarker, worldAddress, indexer.type],
   );
 }

packages/explorer/src/app/(explorer)/[chainName]/worlds/page.tsx

@@ -1,60 +1,26 @@
-import { headers } from "next/headers";
+"use client";
+
 import { redirect } from "next/navigation";
-import { Address } from "viem";
-import { supportedChainName, supportedChains } from "../../../../common";
-import { indexerForChainId } from "../../utils/indexerForChainId";
+import { supportedChainName } from "../../../../common";
+import { useWorldsQuery } from "../../queries/useWorldsQuery";
 import { WorldsForm } from "./WorldsForm";
 
-type ApiResponse = {
-  items: {
-    address: {
-      hash: Address;
-    };
-  }[];
-};
-
-async function fetchWorlds(chainName: supportedChainName): Promise<Address[]> {
-  const chain = supportedChains[chainName];
-  const indexer = indexerForChainId(chain.id);
-  let worldsApiUrl: string | null = null;
-
-  if (indexer.type === "sqlite") {
-    const headersList = headers();
-    const host = headersList.get("host") || "";
-    const protocol = headersList.get("x-forwarded-proto") || "http";
-    const baseUrl = `${protocol}://${host}`;
-    worldsApiUrl = `${baseUrl}/api/sqlite-indexer/worlds`;
-  } else {
-    const blockExplorerUrl = "blockExplorers" in chain && chain.blockExplorers?.default.url;
-    if (blockExplorerUrl) {
-      worldsApiUrl = `${blockExplorerUrl}/api/v2/mud/worlds`;
-    }
-  }
-
-  if (!worldsApiUrl) {
-    return [];
-  }
-
-  try {
-    const response = await fetch(worldsApiUrl);
-    const data: ApiResponse = await response.json();
-    return data.items.map((world) => world.address.hash);
-  } catch (error) {
-    console.error(error);
-    return [];
-  }
-}
-
 type Props = {
   params: {
     chainName: supportedChainName;
   };
 };
 
-export default async function WorldsPage({ params: { chainName } }: Props) {
-  const worlds = await fetchWorlds(chainName);
+export default function WorldsPage({ params: { chainName } }: Props) {
+  const { data, isLoading, error } = useWorldsQuery();
+  if (error) {
+    throw error;
+  }
+
+  const worlds = data?.worlds || [];
   if (worlds.length === 1) {
-    return redirect(`/${chainName}/worlds/${worlds[0]}`);
+    redirect(`/${chainName}/worlds/${worlds[0]}`);
   }
-  return <WorldsForm worlds={worlds} />;
+
+  return <WorldsForm worlds={worlds} isLoading={isLoading} />;
 }