Getting random behavior from cache(), createAsync() and signals
The "age" doesn't increase every time when I click the button.
See: https://stackblitz.com/edit/github-fk8exj-t61ngj?file=app.config.ts,src%2Froutes%2F[...404].tsx,src%2Froutes%2Findex.tsx,src%2Fapp.css
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
-
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 seeingI 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.
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 dataOk, 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)
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
Looks much better, glad the signal isn't needed. Thanks!
The only thing that could look better, IMO, is this:
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.
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
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):
But I don't complain. It will refresh the user from the database.
The act of calling the action will automatically invalidate all existing caches