S
SolidJS2mo ago
ile

Getting random behavior from cache(), createAsync() and signals

StackBlitz
Solid-start With Tailwindcss Example (forked) - StackBlitz
Run official live example code for Solid-start With Tailwindcss, created by Solidjs on StackBlitz
9 Replies
Brendonovich
Brendonovich2mo ago
- data isn't reactive at all. The simplest equivalent that would be reactive is a store, but you're sidestepping the cache/action system entirely and just writing the value directly. The more correct way to do this would be for setNewData to be wrapped in action so that getUser is invalidated, which will cause user to re-run - cache and action shouldn't be used inside components, though that's not related to what you're seeing
ile
ile2mo ago
I see, ok. I used ChatGPT for help, so it probably didn't know any better than I do. One strange thing is that I see the age changing once to 36 for example.
Brendonovich
Brendonovich2mo ago
cache has an expiry of 10-15 seconds, i'm guessing it happens once the cache expires Also I've realised that the actual main reason it isn't reactive is because getUser returns the same object reference each time, so solid doesn't think that anything changes If you switch to createAsyncStore it should work, since solid will treat the result as a new value each time, whereas createAsync is just a signal that expects to handle immutable data
ile
ile2mo ago
Ok, I changed it to createAsyncStore, but the strange thing is that it starts to work after about 10 seconds. After 10 seconds it works like I would expect it to, but before 10 seconds the age doesn't increase. (If you do a hard refresh you probably see the change ... not sure if a refresh is needed)
Brendonovich
Brendonovich2mo ago
Yeah not sure what's up with that, I'd recommend doing something like this instead https://stackblitz.com/edit/github-fk8exj-y1o8gb?file=src%2Froutes%2Findex.tsx,src%2Froutes%2Fdata.ts
StackBlitz
Solid-start With Tailwindcss Example (forked) - StackBlitz
Run official live example code for Solid-start With Tailwindcss, created by Solidjs on StackBlitz
ile
ile2mo ago
Looks much better, glad the signal isn't needed. Thanks! The only thing that could look better, IMO, is this:
return { ...data };
return { ...data };
I think this means that if the data comes from the database, it has to be "spread". That's not how one normally gets data from the database.
Brendonovich
Brendonovich2mo ago
The difference with a database is that the object you get from the database will be unique each time That spread is just simulating that behaviour
ile
ile2mo ago
I wouldn't have guessed this useAction myself, the docs are quite minimal there at the time. https://docs.solidjs.com/solid-router/reference/data-apis/action#useaction I instantly went for cache validation/cache.set. Also I'm a bit confused why this is all I need (empty action):
const refreshUser = useAction(action(async () => {}));
const refreshUser = useAction(action(async () => {}));
But I don't complain. It will refresh the user from the database.
Brendonovich
Brendonovich2mo ago
The act of calling the action will automatically invalidate all existing caches