SolidJS•9mo ago

Confusion with suspense and nested routeData

I have two pages relying on the same data, so I put them in routes app/page1 and app/page2. My goal is to have route data for the app route forwarded to the two pages. The idea is to have a routes/app.tsx that looks something like this:

export const routeData = () => 
  createServerData$(async (_, event) => ...)

const App = () => {
  const data = useRouteData()

  return 
    <>
      <Sidebar />
      <Outlet />
    </>
}
export default App

export const routeData = () => 
  createServerData$(async (_, event) => ...)

const App = () => {
  const data = useRouteData()

  return 
    <>
      <Sidebar />
      <Outlet />
    </>
}
export default App

Then, in each of app/page1.tsx and app/page2.tsx,

export const routeData = ({data}) = createRouteData(() => data())

const Page = () => {
  const rawData = useRouteData()
  return <Component rawData={rawData} />
}

export default Page

export const routeData = ({data}) = createRouteData(() => data())

const Page = () => {
  const rawData = useRouteData()
  return <Component rawData={rawData} />
}

export default Page

I'm having a couple issues. First of all, in order to get anything to load, I needed to shove the following hack into app.tsx:

<Suspense>
  {`${data()`}
</Suspense>

<Suspense>
  {`${data()`}
</Suspense>

Secondly, while Page1 works on initial page load, Page2 does not, and I struggle to find a difference in the data loading between them. ~~Moreover, while Page2 shows the resource stuck on loading on initial page load, the <Suspense> isn't rendering the fallback.~~ Finally, if I load Page2, then navigate to the working Page1, then navigate back, everything is loaded. There seems to be something I'm not getting about routeData, suspense, and resources. Can anybody help me out?

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Confusion with suspense and nested routeData