use query inside navigation

src/lib/utils.js

@@ -0,0 +1,2 @@
+
+export class NotFoundError extends Error {}

src/pages/index/index.jsx

@@ -1,16 +1,27 @@
 import { Route } from "@tanstack/react-router"
 import rootRoute from "../root"
-import { useQuery } from "@tanstack/react-query";
+import { queryOptions } from "@tanstack/react-query";
 import { MapsList } from "./MapsList";
 import mapApi from "../../api";
 
-export function IndexPage() {
+const fetchPortal = async () => {
+  const map = await mapApi
+    .get(`portals/${window.PORTAL_KEY}/`)
+
+  if (!map) {
+    throw new NotFoundError(`Portal not found!`)
+  }
+
+  return map
+}
 
-  const { isPending, error, data } = useQuery({
-    queryKey: ['portal'],
-    queryFn: () =>
-      mapApi.get(`portals/${window.PORTAL_KEY}/`),
-  })
+const portalOptions = () => queryOptions({
+  queryKey: ['portals'],
+  queryFn: fetchPortal,
+})
+
+export function IndexPage() {
+  // const query = useSuspenseQuery(portalOptions())
 
   return (
     <div className="wrapper">
@@ -25,4 +36,6 @@ export const indexRoute = new Route({
   getParentRoute: () => rootRoute,
   component: IndexPage,
   path: '/',
+  loader: ({ context: { queryClient }}) => 
+    queryClient.ensureQueryData(portalOptions())
 })

src/pages/viewer/index.jsx

@@ -5,10 +5,8 @@ import Map from "./components/Map";
 import MapContextProvider from "./components/MapContextProvider";
 import Metadata from "./components/Metadata";
 import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
-import axios from "axios";
 import mapApi from "../../api";
-
-class NotFoundError extends Error {}
+import { NotFoundError } from "../../lib/utils";
 
 const fetchMap = async (mapSlug) => {
   const map = await mapApi
@@ -58,7 +56,7 @@ export function Viewer() {
       <div id="app-wrap" style={{ display: 'flex' }}>
         <div id="sidebar">
           <Metadata {...map.data} />
-          <Layers data={map.data.layers} />
+          <Layers layers={map.data.layers} />
         </div>
         <Map {...map.data} />
       </div>