1
import { useQuery } from "vue-query";
const { isLoading, data /* read only */, error, isError, refetch } = useQuery("todo", todo)

I just found out data returned by vue-query is read only. Vue-query is similary project to React-query. You can find it here.
If I do data.todoList.push(newTodo) then I got the following warning

[Vue warn] Set operation on key "xxx" failed: target is readonly

My question is 1) How do I change the value returned by vue-query? 2) If I need to change the returned data, what is the best way to do it?

Nicolas S.Xu
  • 13,794
  • 31
  • 84
  • 129
  • I don't know Vue at all, but why do you need to mutate it? Can't you just do `[...data.todoList, newTodo]`? – Guillaume Brunerie Jan 19 '23 at 20:36
  • [...data.todoList, newTodo] does not work, same warning, no effect. I am not familiar with correct pattern for vue-query. Why they make the returned data read only? – Nicolas S.Xu Jan 19 '23 at 20:42

1 Answers1

2

it is intentional to NOT be able to change the returned content, see github issue.

just save/copy the returned data into a reactive variable and modify it as u wish.

zangab
  • 428
  • 2
  • 5