[Vuejs]-GraphQL vue apollo query and mutation same view

by

0👍

✅

Ok I finally found out that data from the query is immutable, that’s why I can’t update them.

The solution is to create a new object using Object.assign or lodash cloneDeep.

0👍

You’re definitely on the right track!
One thing I notice is that Product is capitalized in your JS, but not in your template. So either update your template like so:

<template>
  <section>
    <input v-model="Product.title"></input>
    <input v-model="Product.description"></input>
    <button @click="updateProduct">Update</button>
  </section>
</template>

…or make product lowercase in your JS (which I personally prefer).

Also, I believe you need to use reactive parameters in this case. variables will need to be a function rather than an object.

variables() {
  return {
    id: this.Product.id,
    title: this.Product.title,
    description: this.Product.description
  }
}

Leave a comment