I'm having really interesting issue. I have a data which comes from Graphql. I wanna add a object in an array that is in an array.

But i can't do it. I have a error that is the object is not extensible.

Let me give an example of my data:

{
  "data": {
    "board": {
      "id": "1",
      "title": "Grocieries",
      "color": "teal",
      "lists": [
        {
          "id": "1",
          "title": "To-Do",
          "cards": [
            {
              "id": "1",
              "title": "Write novel"
            },
            {
              "id": "2",
              "title": "Buy food"
            },
            {
              "id": "3",
              "title": "Paint a picture"
            }
          ]
        },
        {
          "id": "2",
          "title": "In progress",
          "cards": [
            {
              "id": "4",
              "title": "Buy groceries"
            },
            {
              "id": "5",
              "title": "Pay the bills"
            },
            {
              "id": "6",
              "title": "Get the car fixed"
            },
            {
              "id": "7",
              "title": "Create a course"
            }
          ]
        },
        {
          "id": "3",
          "title": "Done",
          "cards": [
            {
              "id": "8",
              "title": "Get the car fixed"
            },
            {
              "id": "9",
              "title": "Write novel"
            },
            {
              "id": "30",
              "title": "Buy fruits"
            },
            {
              "id": "31",
              "title": "Buy car"
            }
          ]
        }
      ]
    }
  }
}

Let me explain what i want to do:

I want to add an object in cards array which is inside of the list item which has id 1.

Actually it's not hard to do it programmatically. But i have that error:

Error Image

My code:

<script>
import CardAdd from '../graphql/mutations/CardAdd';
import BoardQuery from '../graphql/queries/BoardWithListsAndCards';
export default {
    methods: {
        cardAdd(){
            this.$apollo.mutate({
                mutation: CardAdd,
                variables: {
                    title: "Mutation added",
                    order: 1,
                    listId: 1,
                    ownerId: 1
                },
                update(store, { data: { cardAdd } }){
                    let data = store.readQuery({
                        query: BoardQuery,
                        variables: {
                            id: 1
                        }
                    });
                    data.board.lists.find(list => list.id == 1).cards.push(cardAdd);
                }
            });
        }
    }
}
</script>

Note: cardAdd is the object that i want to add in cards array.

I also tried to add with index.

Thank you already

CodePudding user response：

Make a copy of data before you try to push to it.

let data = store.readQuery({
  query: BoardQuery,
  variables: { id: 1 }
});
let data2 = JSON.parse(JSON.stringify(data2)); // deep copy
data2.board.lists.find(list => list.id == 1).cards.push(cardAdd);

TBH though, this approach is a bad direction. You're mutating some data but then altering the value returned from the mutation. Your mutation should return the data you need and then you should be able to use that directly.

CodePudding user response：

Let me share the final solution to help others:

let data = store.readQuery({
query: BoardQuery,
variables: {
      id: 1
}
});
let data2 = JSON.parse(JSON.stringify(data));
data2.board.lists.find(list => list.id == 1).cards.push(cardAdd);
store.writeQuery({ query: BoardQuery, data: data2 });