Vue Apollo Query 不覆盖本地数据

Posted 2023-03-10

【中文标题】Vue Apollo Query 不覆盖本地数据

【英文标题】：Vue Apollo Query not overwritting local data

【发布时间】：2019-03-29 13:40:45

【问题描述】：

我有一个使用 import() 动态呈现内容的模式。 modal 有一个表单，它的字段由 Query 填充。数据显示正确。如果我修改数据并关闭模式并返回它，我的更改仍然存在。

因此，几乎就像在组件初始渲染后查询没有运行一样。我想销毁所做的任何更改。

这里是组件

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

    <loader v-if="$apollo.loading"
      :
      :></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')

          
        
      

【问题讨论】：

我需要用 Apollo 缓存值覆盖数据属性吗？我可能可以在mounted() 钩子中做到这一点。您可能会认为，由于向组件中添加了查询，因此每次创建组件时都会运行

【参考方案1】：

您可以通过添加created 钩子在每次创建组件时重新获取查询：

created() 
    this.$apollo.queries.user.refetch();

这里，user 是查询的名称，它是您的 apollo: 对象中的标识符。