Why is the data readonly?

[valentsea]

I have a situation where I get the data from the server, transform and send it back. But the data is readonly. Can you explain why and maybe add an option { readonly: false } to the useQuery function?

[valentsea]

Ok, I understood why it's readonly. vue-query is fetching and updating data and changes that a user makes will be lost after updating. But anyway I made a solution for my problem:

// useData.js
import { ref, watch } from 'vue'

export const useData = (refData) => {
  const editableData = ref(null)

  if (refData && refData.value) {
    editableData.value = clone(refData.value)
  }

  watch(
    () => refData.value,
    (newVal) => {
      editableData.value = clone(newVal)
    },
  )

  return editableData
}

const clone = (value) => {
  return JSON.parse(JSON.stringify(value))
}

Usage:

const { isLoading, data } = useTodosQuery()
const todos= useData(data)

I think later I will add something like ignored field while updating to save some fields like is_selected and so on.