Fetch data after an update

Question

VueJS + Quasar + Pinia + Axios Single page application

I have an entity called user with 4 endpoints associated:

• GET /users
• POST /user
• PUT /user/{id}
• DELETE /user/{id}

When I load my page I call the GET and I save the response slice of users inside a store (userStore)

Post and Put returns the created/updated user in the body of the response

Is it a good practice to manually update the slice of users in the store after calling one of these endpoints, or is better to call the GET immediatly after ?

Answer 1

If you own the API or can be sure about the behavior of what PUT/POST methods return, you can use local state manipulation. Those endpoints should return the same value as what the GET endpoint returns inside. Otherwise, you might end up with incomplete or wrong data on the local state.

By mutating the state locally without making an extra GET request, the user can immediately see the change in the browser. It will also be kinder to your server and the user's data usage.

However, if creating the resource(user, in this case) was a really common operation accessible by lots of users, then calling the GET endpoint to return a slice would be better since it would have more chance to include the new ones that are created by other users. But, in that case, listening to real-time events(i.e. using WebSockets) would be even better to ensure everyone gets accurate and new data in real-time.