SolidJS•16mo ago

createServerData$ question

Hi, In example page below, why do I need to call data() in the export page function for the data to load (or to enable reactivity)? It's not blocking me, but curious if I'm doing something wrong, and seems like it should be unnecessary, esp. since data is referenced in the templated section. Thanks!

import { useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";
import { Show } from "solid-js";
import { sleep } from "~/lib/utils";
type Test = {
    a: string;
};
export function routeData() {
    console.log("getting route data");
    return createServerData$(async () => {
        await sleep(2000);
        const t: Test = { a: "hello" };
        return t;
    });
}

export default () => {
    // const params = useParams();
    const data = useRouteData<typeof routeData>();
    data(); // <== Page won't update unless call data here.
    return (
        <Show when={!data.loading} fallback={<div>loading...</div>}>
            <div>test-page</div>
            <pre>{data()?.a}</pre>
        </Show>
    );
};

import { useRouteData } from "solid-start";
import { createServerData$ } from "solid-start/server";
import { Show } from "solid-js";
import { sleep } from "~/lib/utils";
type Test = {
    a: string;
};
export function routeData() {
    console.log("getting route data");
    return createServerData$(async () => {
        await sleep(2000);
        const t: Test = { a: "hello" };
        return t;
    });
}

export default () => {
    // const params = useParams();
    const data = useRouteData<typeof routeData>();
    data(); // <== Page won't update unless call data here.
    return (
        <Show when={!data.loading} fallback={<div>loading...</div>}>
            <div>test-page</div>
            <pre>{data()?.a}</pre>
        </Show>
    );
};

4 Replies

Unknown User•16mo ago

Message Not Public

hotshoe•16mo ago

I find it depends. If, instead, I return an array and iterate over it in For loop, then works as as I'd expect (i.e., without needing to call data()). Or, if I change the above example o return an int, then also works as expected. The docs are pretty light on showing how to apply data route data (presumably because it requires little/no explanation) When searching for createServerData examples, I came across this post where author states

An important thing to note here is that we had to call user() at the beginning of the component. We need to do that because the route data doesn't get fetched until we call it explicitly.

https://tahazsh.com/blog/building-a-solidjs-app-from-scratch/ This seems like an odd pattern to me, if true, and, again, I'm not finding it to be universally true.

Taha Shashtari

Building a SolidJS App With SolidStart From Scratch

hotshoe•16mo ago

I stand corrected, I need to call data() at the start of my component every time, else I get flaky behavior. If I run npm start on refreshed build in stead of npm dev then the data renders only sometimes (e.g., if I refresh page multiple times, renders around 10% of the time). So is it correct to have to call the data returned by getRouteData before using it inside the component and, if so, why? Seems like something the framework should handle.

Unknown User•16mo ago

Message Not Public

Gaming

Programming

createServerData$ question