GraphQL vue apollo查询和mutation同视图
GraphQL vue apollo query and mutation same view
我刚开始将 GraphQL 与 Apollo 和 Vue 结合使用,所以这可能是一个 "stupid" 问题,但我不知道该怎么做。
如何在同一个视图中执行查询以获取一个对象,并使用突变更新它
假设我有一个简单的模式
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>
现在模板部分应该怎么写?我可以 link 产品对象到输入中的 v 模型吗?
<template>
<section>
<input v-model="product.title"></input>
<input v-model="product.description"></input>
<button @click="updateProduct">Update</button>
</section>
</template>
感谢您的帮助。
您绝对是在正确的轨道上!
我注意到的一件事是 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
}
}
好的,我终于发现查询中的数据是不可变的,这就是我无法更新它们的原因。
解决方案是使用 Object.assign 或 lodash cloneDeep 创建一个新对象。
我刚开始将 GraphQL 与 Apollo 和 Vue 结合使用,所以这可能是一个 "stupid" 问题,但我不知道该怎么做。
如何在同一个视图中执行查询以获取一个对象,并使用突变更新它
假设我有一个简单的模式
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>
现在模板部分应该怎么写?我可以 link 产品对象到输入中的 v 模型吗?
<template>
<section>
<input v-model="product.title"></input>
<input v-model="product.description"></input>
<button @click="updateProduct">Update</button>
</section>
</template>
感谢您的帮助。
您绝对是在正确的轨道上!
我注意到的一件事是 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
}
}
好的,我终于发现查询中的数据是不可变的,这就是我无法更新它们的原因。
解决方案是使用 Object.assign 或 lodash cloneDeep 创建一个新对象。