What is the correct way to use `useRouteData`

[KyleRicardo]

I'm following the official guide of Data loading, but I don't use For to show the data. I directly use the data instead:

import { createRouteData, useRouteData } from 'solid-start'

export function routeData() {
  return createRouteData(async () => {
    const response = await fetch('https://hogwarts.deno.dev/students')
    return (await response.json())
  })
}

export default function About() {
  const data = useRouteData<typeof routeData>()
  return (
    <main class="text-center mx-auto text-gray-700 p-4">
      <div>{data()}</div>
    </main>
  )
}

I went to my browser and refresh the page. The content was Undefined Undefined at first, and then became [object Object][object Object] after about 1 second. Why the page is rendered even before the data is ready? Is this the expected behavior?

To make things even worse, when I changed {data()} to {data()[0]}, the page crashed with error TypeError: Cannot read properties of undefined (reading '0') and never came back.

Ok, I thought that was because the data was not ready so I definitely cannot use [0] to get the indexed data.

Fair enough. Then I checked out the other parts of the guide, and found createRouteData. At the end of the page, I got to know I can get the status of the fetching, by access data.loading data.state and data.latest etc. So I changed my code again:

export default function RouteTest() {
  const data = useRouteData<typeof routeData>()
  return (
    <main class="text-center mx-auto text-gray-700 p-4">
      <Show when={data.loading} fallback={<div>{data.latest}</div>} >
        <div>loading</div>
      </Show>
    </main>
  )
}

I refreshed the page and found there was always loading. If I check the data.state, it is always pending, too. So frustrating and wierd.

So, what is the correct way to use this? I really need some help here.

[boehs]

Why the page is rendered even before the data is ready

Performance! That's kinda the whole point of this! 😁 It means that your users see a page instantly

Is this the expected behavior?

^^^^

---

What you didn't ask... What is wrong with the code?

I went to my browser and refresh the page. The content was Undefined Undefined at first, and then became [object Object][object Object] after about 1 second.

It is undefined because the content is still loading, and I suspect becomes [object Object][object Object] because it's an array, and well you just can't convert an object to a string like that. That's why we use <For/>

String([{"name":"Harry Potter"},{"name":"Ron Weasley"}])
// '[object Object],[object Object]'

To make things even worse, when I changed {data()} to {data()[0]}, the page crashed with error TypeError: Cannot read properties of undefined (reading '0') and never came back.

undefined[0]
// Uncaught TypeError: Cannot read properties of undefined (reading '0')

The error is what it says. You try to access a property of something that is undefined (because the data is loading), which is an error in javascript

Ok, I thought that was because the data was not ready so I definitely cannot use [0] to get the indexed data.

Good

Fair enough. Then I checked out the other parts of the guide, and found createRouteData. At the end of the page, I got to know I can get the status of the fetching, by access data.loading data.state and data.latest etc. So I changed my code again:

This isn't clear to me at a glance, and I don't really care to figure out, but I'll say you can write it like

      <Show when={data()} fallback={<div>Loading...</div>} >
        <div>{data()[0].name}</div>
      </Show>

or just use <Suspense/>