Vue Apollo查询不会覆盖本地数据

Question

我有一个使用import（）动态呈现内容的模式。模态具有一种形式，该形式的字段由查询填充。数据正确显示。如果我修改数据并关闭模式并返回到它，则我的更改仍然存在。

因此，几乎就像在组件的初始呈现后查询未运行。我想破坏所做的任何更改。

这里是组件

<template>
  <div class="modal-content">

    <loader v-if="$apollo.loading"
      :width="100"
      :height="100"></loader>

    <div class="modal-header justify-content-center">
      <button type="button"
        class="close"
        @click="closeModal()">
        <i class="nc-icon nc-simple-remove"></i>
      </button>
      <h4 class="title title-up">Edit User</h4>
    </div>

    <div class="modal-body">
      <form>

        <fg-input
          label="Name"
          v-model="user.name"
          v-validate="modelValidations.name"
          :error="getError('name')"
          name="name"
          type="text">
        </fg-input>

        <fg-input
          label="Email"
          v-model="user.email"
          v-validate="modelValidations.email"
          :error="getError('email')"
          name="email"
          type="email">
        </fg-input>

        <fg-input
          label="Role">
          <el-select class="select-default"
                    v-model="user.role"
                    placeholder="Select Role">
            <el-option v-for="option in roles"
                      class="select-default"
                      :value="option.name"
                      :label="option.name"
                      :key="option.name">
            </el-option>
          </el-select>
        </fg-input>

        <fg-input
          label="Active">
          <p-switch v-model="user.active" type="success" on-text="ON" off-text="OFF" ref="active"></p-switch>
        </fg-input>

      </form>
    </div>

    <div class="modal-footer">
      <div class="left-side">
        <p-button type="neutral" @click="validate()">Submit</p-button>
      </div>
      <div class="divider"></div>
      <div class="right-side">
        <p-button type="neutral" @click.native="closeModal()">Close</p-button>
      </div>
    </div>
  </div>
</template>

  //Components
  import {Switch} from '@/components/UIComponents'

  //Mixins
  import {notification} from '@/mixins/notification.js'
  import {validation} from '@/mixins/form-validation.js'
  import {userValidation} from '@/mixins/users/user-validation.js'

  //Queries
  import editUser from '@/queries/users/edit-user-mutation.gql'
  import users from '@/queries/users/users-query.gql'
  import getUser from '@/queries/users/user-query.gql'
  import getRoles from '@/queries/roles/roles-query.gql'

    export default {
        name: 'edit-user',
        components: {
          [Switch.name]: Switch
        },
        mixins: [notification, validation, userValidation],
        props: {
          'modalData': {
            required: true
          }
        },
        data(){
          return {
            user: {
              id: -1,
              name: '',
              active: false,
              role: '',
              email: ''
            },
            roles: []
          }
        },
        apollo: {
          user: {
            query: getUser,
            variables() {
              return {
                id: this.modalData
              }
            },
            fetchPolicy: 'cache-and-network',

            //Error
            error(error) {
              console.log(error)
              this.notification('danger', this.messages.error)
            }

          },
          roles: {
            query: getRoles,

            //Error
            error(error) {
              console.log(error)
              this.notification('danger', this.messages.error)
            }
          }
        },
        created() {
          console.log('EditUser Created')
        },
        destroyed() {
          console.log('EditUser Destroyed')
        },
        methods: {
          submit() {
            this.$apollo.mutate({
              mutation: editUser,
              variables: this.user,
            })
            .then(response => {
              this.notification('success', this.messages.success)
              this.closeModal()
            })
            .catch(error => {
              console.log(error)
              this.notification('danger', this.messages.error)
            })
          },
          closeModal() {

            //Reset local data
            //this.resetLocal()

            this.$emit('close')

          }
        }
      }

Answer 1

您可以在每次创建组件时通过添加一个<aside class="sidebar"> <nav class="sidebar__top"></nav> <nav class="sidebar__bottom"></nav> </aside>钩子来重新获取查询：

created

在这里，created() { this.$apollo.queries.user.refetch(); } 是查询的名称，它是user对象中的标识符。