How to update a list after mutating one of its records?

[johhansantana]

Hello,

I've seen how the edit route works for you to do something like

const updated = await updateTodo({
  where: { id: todo.id },
  data: { text },
})
mutate(updated)

This will basically update the initial query payload updating our UI.

However, with a list I assume it would be different when updating a single record from the list.

For example:

const [uncompletedTodos, { mutate: mutateUncompletedTodo }] = useQuery(getTodos, {
  orderBy: { id: "desc" },
  where: { completed: false },
})

const [completedTodos, { mutate: mutateCompletedTodo }] = useQuery(getTodos, {
  orderBy: { updatedAt: "desc" },
  where: { completed: true },
})

If I try to do the same update as the first code snippet, it will not be compatible since the returned data is a single object and the original query is an array of objects.

I have a couple of ideas on how to mutate the list but I was wondering if there's something more "blitz" on how to do that after a mutation?

I'm guessing one can do refetch() but I think this can be achieved without having to request new data again.

Thanks!

[flybayer]

@johhansantana great question! We currently don't have anything special for this.

So you'll need to update the array and then call mutate(completedTodos) and mutate(uncompletedTodos).

I think immer would probably be useful here to create the new array data. Something like this:

import produce from "immer"

const newUncompletedTodos = produce(uncompletedTodos, draft => {
   draft.splice(indexOfCompletedTodo, 1)
})
mutate(newUncompletedTodos)