Why dose createServerData$ return undefined

I am learning solid start, i am having some issues getting routeData and createServerData to work correctly, the below example prints Test: undefined where it should return Test: { Foo: "Bar" }
export function routeData() {
const user = createServerData$(async (_, { request }) => {
return {
Foo: "Bar",
};
});

return user;
}

export default function HeaderLayout() {
const user = useRouteData<typeof routeData>();
console.log("Test: ", user);
....
export function routeData() {
const user = createServerData$(async (_, { request }) => {
return {
Foo: "Bar",
};
});

return user;
}

export default function HeaderLayout() {
const user = useRouteData<typeof routeData>();
console.log("Test: ", user);
....
3 Replies
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Kasper
Kasper2y ago
I looked at it, but can't see how it applies. I tied making it part of the html but it just returns "here:" <li>Here: {user?.Foo}</li> My HeaderLayout is not a page, but a component. Can't a component use routdate?
REEEEE
REEEEE2y ago
The user route data will be undefined initially and since components aren't rerendered in Solid, you'll get undefined console logged at first put the console log in a createEffect or in the jsx to see the output
createEffect(() => {
console.log("Test: ", user());
})
createEffect(() => {
console.log("Test: ", user());
})
OR
<Show when={user()}>
<h1> {user()?.Foo} </h1>
</Show>
<Show when={user()}>
<h1> {user()?.Foo} </h1>
</Show>