GraphQL vue apolloのクエリと突然変異同じビュー

Question

私はApolloとVueでGraphQLを使用し始めているので、 "ばかげた"質問かもしれませんが、どうやって行うのか分かりません。

どのように私は、同じビュー内で、クエリは一つのオブジェクトを取得し、変異

を使用して、それを更新するために行うことができますのは、私はシンプルなスキーマ

type Product { 
    id: ID! 
    title: String! 
    description: String 
} 

そしてVUEコンポーネント

を持っているとしましょう

<script> 

    // GraphQL query 
    const ProductQuery = gql ` 
    query($id: ID){ 
     Product(id: $id) 
     { 
     id 
     title 
     description 
     } 
    } 
    `; 

    const UpdateProductQuery = gql ` 
    mutation updateProduct($id: ID!, $title: String!, $description: String) { 
     updateProduct(
     id: $id, 
     title: $title, 
     description: $description, 
    ) { 
     id 
     } 
    } 
    `; 

export default { 
    data() { 
     return { 
     Product: {}, 
     }; 
    }, 
    apollo: { 
     Product: { 
      query: ProductQuery, 
      variables() { 
        id: 1234, 
      }; 
     }, 
    }, 
    methods: { 
     updateProduct() { 

      this.$apollo.mutate({ 
      mutation: UpdateProductQuery, 
      variables: { 
       id: this.Product.id, 
       title: this.Product.title, 
       description: this.Product.description, 
      }, 
      }) 
     } 
    } 
}; 
</script> 

ここでテンプレート部分をどのように書きますか？ Productオブジェクトを入力内のvモデルにリンクすることはできますか？

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

ありがとうございました。

Answer 1

私は最終的にクエリのデータが不変であることを知りました。そのため、私はそれらを更新できません。

解決策は、Object.assignまたはlodash cloneDeepを使用して新しいオブジェクトを作成することです。

Answer 2

あなたは間違いなく正しい軌道にいる！ 私が気付くことの1つは、ProductがあなたのJSでは大文字ではありますが、あなたのテンプレートでは大文字ではないということです。だから、そのようなあなたのテンプレートを更新し、次のいずれか

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

...または（私は個人的に好む）あなたのJSにproduct小文字を作ります。

また、この場合はreactive parametersを使用する必要があります。 variablesは、オブジェクトではなく関数である必要があります。

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