Composition API: Why are nested properties of objects in state readonly?

[zunnzunn]

I have a simple store written using the Composition API (/w Typescript) which holds a list of persons:

export const usePersonStore = defineStore("personStore", () => {
  const state = reactive({
	personList: [] as Person[]
  })

  const addPerson = (person: Person) => {
     state.personList.push(person)
  }

  return {
   personList,
   addPerson
  }
})

However, simply calling addPerson gives me the following error:

can't define array index property past the end of an array with non-writable length

The problem is not limited to the array itself. The persons' properties in the array also cannot be modified. E.g. doing personList.value[0].name = "foo" will yield an error saying that name is readonly. Is this a bug worth opening an issue for or am I missing something out?

Edit: Just a side note: completely re-initializing the entire array works though, e.g. state.personList.value = [...]

[zunnzunn]

Ok, my bad. I am using the Apollo GraphQL Client in the project and I assign the result of a GraphQL query to state.personList, thus making it readonly, since query results are immutable in Apollo Client 3.
Case closed.

[vincentbattez]

I have same problem with Apollo Graphql and Pinia. What did you do to modify the Pinia store ?

[zunnzunn]

The issue wasn't with Pinia. It was with the Apollo client. Unfortunately, I don't have the solution at hand. You will have to look up yourself how to override the default-behavior of query results being readonly.