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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
hotshoe
hotshoe2y 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
Building a SolidJS App With SolidStart From Scratch
hotshoe
hotshoe2y 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
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Want results from more Discord servers?
Add your server
More Posts