Избегайте проблем с кэшированием при создании формы редактирования с 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>

Проблема в том, что когда я редактирую форму, а затем закрываю ее, мои изменения возвращаются в кэш GraphQL при возвращении в форму. Это потому, что мои входные данные привязаны непосредственно к объекту, возвращенному моим запросом GraphQL с v-моделью. Я могу придумать две вещи, чтобы избежать этого:

• Создайте копию данных, возвращаемых запросом (и назовите ее user и userData?), И привяжите v-модель к ключам этот объект. Но меня беспокоит, что мне нужно создать дублирующую переменную и хранить данные в двух местах.
• Или вообще отключить кэш для этого запроса GraphQL.

Такое ощущение, что я отсутствует более очевидное решение. Когда я использовал REST, у меня был класс Form, который обрабатывал все взаимодействия форм на основе этого:

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

Может быть, это можно решить аналогичным образом? Какой метод создания (редактирования) формы вы предпочитаете с помощью Vue / Apollo / GraphQL?

Answer 1

Я могу сказать вам только мой предпочтительный путь. В большинстве своем c я делаю что-то вроде этого ...

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>

My proposedVariable вещь многословна, но Я считаю, что это мешает мне запутать данные формы и данные Аполлона. Я уверен, что у других людей есть другие стратегии.