SolidJSS
SolidJS•2y ago•
3 replies
Xzayler

Mutating a resource

The usecase is that I have comments on a post, and when a new comment is made, I want it to instantly appear on the page without requiring back-end confirmation.

My page is set up ina way where I get a post from the server which has a children field which is array of comments.
I create a copy of the post object, add the new comment to its children field, and then pass the whole thing to mutate as an arg. However it seems that mutating isn't reactive. The resource value does change (I can test it by console logging) but it doesn't change anything on the page.

I have a function like 
// inside a component:
const [post, {mutate, refetch}] = createResource(...)

function addCommment(comment: string) {
  const p = ...
  ...
  mutate(p)
}

return
  <For each={post() ? post()!.children : []}>
    {(item) => <Comment comment={item}/>}
  </For>


It works until first render but when calling the addComment function in another component, the data isn't updated in te html, but it is mutated when I call post() again, like with a console.log.
Was this page helpful?