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
User
withid: 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",