S
SolidJS10mo ago
Sergei

How to trigger update on resource update?

Do I need to pair each resource with signal to add item to the list that's originally loaded as resource?
7 Replies
deluksic
deluksic10mo ago
We would need code to see what you did. Are you using mutate?
Sergei
Sergei10mo ago
Basically I load list of items from REST API: const [list, setList] = createResource(async () => await (creates an array of objects here)) then I have a button to add new item. The handler makes POST of the item and then tried to add it to the list: try { await item.post() list().push(item) } catch (err) { setErr(err) } And adding item to the list did not trigger update. Perhaps I need to call setList() But then the above seems to be incorrect. I can only have const [list] = createResource(async () => await (...)) thus, there is no setList() function.
Sergei
Sergei10mo ago
It appears I may have to study how https://www.solidjs.com/tutorial/stores_mutation works.
SolidJS
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.
Sergei
Sergei10mo ago
ok, I switched to store, but I still don't get update: const [list, setList] = createStore<EmailListItem[]>([]) const [listResource] = createResource(async () => await ... this loads array of objects) createEffect(async () => { if (!listResource.loading) { setList(listResource) } }) // click event handler const onAddToList: JSX.EventHandlerUnion<HTMLFormElement, Event & { submitter: HTMLElement}>|undefined = async (ev) => { ev.preventDefault() try { await item.post() listResource().push(item) // setList(listResource) } catch (err) { setErr(err) } } And then rendering code: <For each={list}>{(listItem, idx) => <p class="item">{listItem.name}</p> }
Sergei
Sergei10mo ago
I think I figured it out. I basically had to follow https://www.solidjs.com/tutorial/stores_createstore?solved Thank you. That little comment pointed me into the right direction.
SolidJS
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.
deluksic
deluksic10mo ago
hmm, in general having the separation between resource and store like that is not a good idea, because you have to manually synchronize them. Maybe a better approach will be to use the store as a backing signal for your resource, see storage option https://www.solidjs.com/docs/latest/api#createresource this way, the resource fetches into the store directly, and then you can use the mutate option to update the list as necessary. Note that there's a second return value from resource
const [resource, { mutate }] = createResource(...)
const [resource, { mutate }] = createResource(...)
Sergei
Sergei10mo ago
Thank you. I followed your advice.