S
SolidJS13mo ago
Miabread

useRouteData returning undefined

hi I'm trying to get the example from https://start.solidjs.com/core-concepts/data-loading to work but instead I always get this error I've tried wrapping it in Show or doing if (!students) return; but that causes hot module reloading to not work at all because I think it's never actually loading properly client side
import { For, Accessor, createResource } from 'solid-js';
import { useRouteData, createRouteData } from 'solid-start';

type Student = { name: string; house: string };

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

export default function Page() {
const students = useRouteData<typeof routeData>();

return (
<ul>
<For each={students()}>{(student) => <li>{student.name}</li>}</For>
</ul>
);
}
import { For, Accessor, createResource } from 'solid-js';
import { useRouteData, createRouteData } from 'solid-start';

type Student = { name: string; house: string };

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

export default function Page() {
const students = useRouteData<typeof routeData>();

return (
<ul>
<For each={students()}>{(student) => <li>{student.name}</li>}</For>
</ul>
);
}
No description
8 Replies
Raqueebuddin Aziz
you forgot to destructure students var like this
const [students] = useRouteData<typeof routeData>();
const [students] = useRouteData<typeof routeData>();
something to keep in mind is everything reactive in solidjs has a tuple form [read, write]
Miabread
Miabread12mo ago
nope I'm using createRouteData which supposedly returns it's data directly createResource is the one that would return a tuple, and I tried that one too the call to useRouteData is directly returning undefined in either case anyways if I deconstruct it throws an error
Raqueebuddin Aziz
Whats the error? Also what do you see if you console.log students
createEffect(() => console.log(students()))
createEffect(() => console.log(students()))
Miabread
Miabread12mo ago
students is not a function logging students directly says it's undefined
Raqueebuddin Aziz
Try wrapping the whole thing in a show block just to see if that works
export default function Page() {
const students = useRouteData<typeof routeData>();

return (
<Show when={students}>
<ul>
<For each={students()}>{(student) => <li>{student.name}</li>}</For>
</ul>
</Show>
);
}
export default function Page() {
const students = useRouteData<typeof routeData>();

return (
<Show when={students}>
<ul>
<For each={students()}>{(student) => <li>{student.name}</li>}</For>
</ul>
</Show>
);
}
Miabread
Miabread12mo ago
that's one of the original things I tried it does work, but hmr stops working for anything inside the show block the console says it tries to hmr but nothing on the page actually updates and this only happens when it's wrapped in that show
jmgarciadev
jmgarciadev12mo ago
Hello everyone! I had a similar issue I could fixing by using a <Show> wrapper! Thanks @raqueebuddinaziz
Carlo Nyte
Carlo Nyte11mo ago
Was this ever solved?
Want results from more Discord servers?
Add your server
More Posts
Nested ErrorBoundary not usedHeya, I'm trying to wrap my head around handling errors with createResource and SolidJS router... Are there any performance implications with using the style prop?As the title says I'm wondering if there are any performance implications with using the style prop.Losing reactivity in production build due to multi-project setup lib <--> appSo Im having an issue that my `createEffect()` is not being triggered. Everything works as expected page not found when navigating to routeshi guys, first time posting here. i'm getting this weird error when navigating to a specific route solid-transition-group leads to reactivity warning inside test casesHey folks, we just started using solid-transition-group and as soon as the `<Transition />`-componeIf I'm using createResource, why would I use Suspense?For example if I have ```javascript function Loader() { const [resource] = createResource(fetchResCan you use the reactive object from useSearchParams as a source signal for createResource?I've used the property of the reactive object returned from useSearchParams as a source signal for cIssue with event delegation and a native libraryHey folks, I am currently trying to integrate a command palette library into our app. I tried varSearch params reactivity in route's data loader functionI've got a problem with search params in route's data function. Basically I've got something like inHow to pass key into createRouteData function inside useRouteData ?Is this even possible ? I can't understand the docs