SolidJSS
SolidJS•3y ago•
77 replies
arazorda

[Solved] Reactivity problem when refreshing the page

I've got a route, where I'm fetching data with server$ function, which sits inside createResource and it works fine, when I'm navigating. But when I'm refreshing, I can see that it fetches on the server, but Resource doesn't get updated on client side. What am I doing wrong?

const [data] = fetchFolders();
createEffect(() => console.log(data()));


this is the client side, which doesn't log fetched data when reloading.

this is the server side

const fetchFolders_ = server$(async () => 
    await fetch("url")
        .then(res => res.json()
    ));

export const fetchFolders = () => createResource(fetchFolders_);


Basically what I'm trying to achieve is that, I only want to export from server with already server$ wrapped functions and since I'm making an api call from server, I want it to be cached, I'll use solid-query or solid-cache for it. In this example, to make it simple, I'm using createResource and as mentioned, everything works fine when I'm navigating to the page where I have that logic, but if I refresh, promise doesn't get resolved and it's always in loading state, but on server side, I can see that promise resolved. This happens with routeData as well.

Solution

When I was accessing data, I had it wrapped with 
<Show>
 component and I was only showing data, when data.loading was false.
Wrapping it with <Suspense> was the solution.
Was this page helpful?