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

[AlexanderZhou39]

Mind if I trouble you with a follow up question? I'm also in the process of figuring out server-side data-fetching.

If I wanted to do some custom OGP meta tags based on the route data, I would need the data to be fetched first before rendering the page.

Is there a way to go about that currently with solid-start? Something like Next's getServerSideProps

[KyleRicardo]

Thanks a lot for your detailed reply!

I may know how to deal with the data now. I can use optional chaining for this, like:

<div>{data()?.[0]?.name}</div>

This may solve my problem. Not quite elegant though.

This isn't clear to me at a glance, and I don't really care to figure out

As for this problem, I found the description in the docs:

loading, error, and latest are reactive getters and can be tracked.

But they don't seem to be reactive. Is it a bug or something? @ryansolid CC?

---

or just use <Suspense/>

And speak of which, how can I use <Suspense> here at this scene?

Afaik, there is already a <Suspense> around the <Routes> in root.tsx:

<Body>
  <Suspense>
    <ErrorBoundary>
      <nav class="bg-sky-800">
        <ul class="container flex items-center p-3 text-gray-200">
          <li class={`border-b-2 ${active("/")} mx-1.5 sm:mx-6`}>
            <A href="/">Home</A>
          </li>
          <li class={`border-b-2 ${active("/about")} mx-1.5 sm:mx-6`}>
            <A href="/about">About</A>
          </li>
        </ul>
      </nav>
      <Routes>
        <FileRoutes />
      </Routes>
    </ErrorBoundary>
  </Suspense>
  <Scripts />
</Body>

Did it work at all? Or should I use another <Suspense> in my component?

[KyleRicardo]

Today I'm trying to figure out how to elegantly fallback to loading indicator when the data is not ready. I tried to use Show as you said, but it just don't work. I will paste the code here:

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

export function routeData() {
  return createRouteData(async () => {
    const response = await fetch('http://localhost:8080/dummy')
    return (await response.json())
  })
}

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

The api I used is a simple json api I build with Golang(Gin), like this:

func DummyRequest(c *gin.Context) {
	time.Sleep(10 * time.Second)
	common.SuccessResp(c, "ok")
}

It will sleep 10s (to simulate slow network status) and then return a json:

{
    "code": 200,
    "message": "success",
    "data": "ok"
}

So, when I go to browser and visit the solid-start page, firstly I have to wait 10s before anything show up. After 10s, I see ok directly and no Loading before it.
If I refresh the page, the favicon spinned up for 10s before anything happened. Still no Loading, or rather, no fallback.

Sorry to bother again, but what should I do? Still can't find a way to fallback. @boehs