SolidJS•3y ago•

77 replies

[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()));

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_);

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$

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

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

routeData

as well.

Solution

When I was accessing data, I had it wrapped with

<Show>

<Show>

component and I was only showing data, when

data.loading

data.loading

was false.
Wrapping it with

<Suspense>

<Suspense>

was the solution.

SolidJS•3y ago•

77 replies

arazorda

[Solved] Reactivity problem when refreshing the page

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

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_);

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$

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

createResource

routeData

routeData

as well.

Solution

When I was accessing data, I had it wrapped with

<Show>

<Show>

component and I was only showing data, when

data.loading

data.loading

was false.
Wrapping it with

<Suspense>

<Suspense>

was the solution.

[Solved] Reactivity problem when refreshing the page

Similar Threads

[Solved] Reactivity problem when refreshing the page

Similar Threads

Similar Threads

Similar Threads