使用 vue-apollo 创建编辑表单时避免缓存问题

Question

我正在处理我的第一个 vue-apollo 项目，我想知道创建编辑表单的最佳方式是什么。我似乎无法在网上找到任何示例。

现在我正在这样查询我的用户数据：

export default {
  data() {
    return {
      user: {
        id: '',
        name: '',
        email: '',
      },
    }
  },
  apollo: {
    user: {
      query: USER_QUERY,
    },
  },
}

像这样的简单形式：

<form @submit.prevent="submitForm">
  <label>Name</label>
  <input type="text" v-model="user.name" />

  <label>Email</label>
  <input type="text" v-model="user.email" />

  <button type="submit">Submit</button>
  <button type="button" @click="cancel">Cancel</button>
</form>

问题是，当我编辑表单然后关闭它时，当我 return 到表单时，GraphQL 缓存 return 编辑了我的编辑。这是因为我的输入直接绑定到我的 GraphQL 查询使用 v-model 编辑的对象 return。我可以想到两件事来避免这种情况：

创建数据的副本 return 通过查询（并将其称为 user 和 userData？），并将 v-model 绑定到该对象的键。但这让我很烦恼，我需要创建一个重复变量并将数据放在两个地方。
或者完全禁用此 GraphQL 查询的缓存。

感觉好像缺少更明显的解决方案。当我使用 REST 时，有一个表单 class 处理基于此的所有表单交互：

https://medium.com/@jeffochoa/vuejs-laravel-object-oriented-forms-f971cb50b7ab

也许可以用类似的方法解决？使用 Vue/Apollo/GraphQL 构建（编辑）表单的首选方法是什么？

Answer 1

我只能告诉你我喜欢的方式。在最基本的情况下，我会做这样的事情...

UserForm.vue

<template>
<form @submit.prevent="submitForm">
  <label>Name</label>
  <input type="text" v-model="proposedName" />

  <button type="submit">Submit</button>
  <button type="button" @click="cancel">Cancel</button>
</form>
</template>

<script>
import MyUserQuery from '/wherever/MyUserQuery.gql'
import MyUserMutation from '/wherever/MyUserMutation.gql'

export default {
  data() {
    return: {
      proposedName: ''
    }
  },

  methods: {
    submitForm() {
      this.$apollo.mutate({
        mutation: MyUserMutation,
        variables: {
          name: this.proposedName
        }
      })

      this.proposedName = ''
    }
  },

  apollo: {
    user: {
      query: MyUserQuery,
      result({data}) {
        this.proposedName = data.user.name
      }
    }
  }
}
</script>

我的 proposedVariable 内容很冗长，但我发现它让我不会混淆表单数据和 Apollo 数据。我相信其他人有其他策略。

Answer 2

Javascript 对象存储为引用。当您将对象分配给另一个变量时，您只是将对象的内存地址分配给该变量。

So, in the result object, you should avoid direct assignment and use JSON.parse like:

this.proposedName = JSON.parse(JSON.stringify(data.user.name))

使用 vue-apollo 创建编辑表单时避免缓存问题

Avoid caching problems when creating an edit form with vue-apollo

vue.js

graphql

vue-apollo