Confusion with suspense and nested routeData

I have two pages relying on the same data, so I put them in routes

app/page1

app/page1

and

app/page2

app/page2

. My goal is to have route data for the

app

app

route forwarded to the two pages. The idea is to have a

routes/app.tsx

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

app/page1.tsx

and

app/page2.tsx

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

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

SolidJS•3y ago

Nathan

Confusion with suspense and nested routeData

I have two pages relying on the same data, so I put them in routes

app/page1

app/page1

and

app/page2

app/page2

. My goal is to have route data for the

app

app

route forwarded to the two pages. The idea is to have a

routes/app.tsx

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

app/page1.tsx

and

app/page2.tsx

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

app.tsx

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

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

Confusion with suspense and nested routeData

Similar Threads

Confusion with suspense and nested routeData

Similar Threads

Similar Threads

Similar Threads