-
-
Notifications
You must be signed in to change notification settings - Fork 53
Description
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
-
Define models
- Example:
User, with fieldsid,first_name,last_name, etc.
- Example:
-
Create data
- Example: Create a
Userwithid: 5,first_name: 'John', last_name: 'Doe'.
- Example: Create a
-
Retrieve data
- Example: Fetch the user data using
User.api().get(...).
- Example: Fetch the user data using
-
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, }); } - Example: Delete a user using
-
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.
- In the UI, observe that the user data is first set to a truncated state like
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",