plugin-axios icon indicating copy to clipboard operation
plugin-axios copied to clipboard

Entity Briefly Enters a Truncated State Before Deletion When Using Vuex-ORM Axios Plugin when i dont add delete option

Open ivan006 opened this issue 2 years ago • 0 comments

Describe the bug

When a delete request is made using the Vuex-ORM Axios plugin, the entity in the Vuex store is first updated to a "truncated" state, with fields set to default or null values, before it is removed from the store. This leads to a jarring and confusing UI experience, where the user sees the entity in this truncated state briefly before it disappears.

Steps to reproduce the bug

  1. Define models

    • Example: User, with fields id, first_name, last_name, etc.
  2. Create data

    • Example: Create a User with id: 5, first_name: 'John', last_name: 'Doe'.
  3. Retrieve data

    • Example: Fetch the user data using User.api().get(...).
  4. Delete data

    • Example: Delete a user using User.api().delete('/api/users/5').
        static Delete(entityId) {
         return this.api().delete(`/users/${entityId}`, {
             baseURL: "http://example.test/api/v4",
             headers: {
                 ...Mixin.methods.DefaultHeaders(),
             },
             /// delete: entityId,
         });
     }
    
  5. See error

    • In the UI, observe that the user data is first set to a truncated state like { "$id": "$uid3", "id": "$uid3", "first_name": "", "last_name": "", ... } before being deleted.

Expected behavior

When a delete request is made, I expect that the entity not deleted (because I didn't add delete: entityId) until the request is complete (which happens) without first transitioning to a truncated state (doesn't happen it does go through this state which is weird). The deletion should happen smoothly without showing an intermediate, confusing state to the users.

Versions

"@vuex-orm/core": "^0.36.3",
"@vuex-orm/plugin-axios": "^0.9.3",

ivan006 avatar Aug 15 '23 15:08 ivan006