SolidJS•17mo ago

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>
    );
}

8 Replies

Raqueebuddin Aziz•17mo ago

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]

MiabreadOP•17mo 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•17mo ago

Whats the error? Also what do you see if you console.log students

createEffect(() => console.log(students()))

createEffect(() => console.log(students()))

MiabreadOP•17mo ago

students is not a function logging students directly says it's undefined

Raqueebuddin Aziz•17mo ago

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>
    );
}

MiabreadOP•17mo 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•16mo ago

Hello everyone! I had a similar issue I could fixing by using a <Show> wrapper! Thanks @raqueebuddinaziz

Carlo Nyte•15mo ago

Was this ever solved?

Gaming

Programming

useRouteData returning undefined