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

children

field which is array of comments.
I create a copy of the

post

post

object, add the new comment to its

children

children

field, and then pass the whole thing to

mutate

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>

// 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()

post()

again, like with a

console.log

console.log

SolidJS•2y ago•

3 replies

Xzayler

Mutating a resource

children

children

field which is array of comments.
I create a copy of the

post

post

object, add the new comment to its

children

children

field, and then pass the whole thing to

mutate

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>

// 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()

post()

again, like with a

console.log

console.log

Mutating a resource

Similar Threads

Mutating a resource

Similar Threads

Similar Threads

Similar Threads