This is my first try on building a web app, so there might be an obvious answer but I have been struggling for some hours now. Thank you in advance.
This is the code for the page this is about:
import { createServerData$ } from "solid-start/server";
import { PrismaClient } from "@prisma/client";
import { For, createEffect, createSignal, onMount } from "solid-js";
import { useRouteData } from "solid-start";
export function routeData(){
const users = createServerData$(async ()=>{
const prisma = new PrismaClient();
const allusers = await prisma.user.findMany();
console.log("all Users: ", allusers);
await prisma.$disconnect();
return allusers;
});
return users;
}
export default function Home(){
const [users, setUsers] = createSignal();
const [dataLoad, setDataLoad] = createSignal(false);
const data = useRouteData<typeof routeData>();
createEffect(()=>{
console.log("Loading Status:"+ data.state);
if(data.state !== 'ready') return;
if(data() === null){
console.log("No Data");
}else{
console.log("data loaded");
setDataLoad(true);
console.log(data()?.toString());
}
});
return ...
I am fetching the data in the routeData() function from the server and load the data using useRouteData(). I set up an Effect to keep track of the loading Status. My assumption was that the status should at first be pending, then change and therefore trigger the effect again so it logs my data.
This does not happen though. If I open the page in my browser, i get the following console output:
Loading Status:pending
However, if i click on a link and move to another route, and then move again to the page I am talking about, i get the following output which is the one I was hoping for:
Loading Status:pending
Loading Status:ready
data loaded
[object Object],[object Object]
It would be a great help to me to understand what is going on there.
I have been trying to track down what happens using console logs as you can see above. But I can't make sense of them and am more confused now than before.
