-
Notifications
You must be signed in to change notification settings - Fork 271
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[OPIK-448] [FE] UI on editing feedback score is slow #727
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code looks very clean and it's great to have optimistic update for these mutations!
For next PR let's add the .cancelQueries
call so we don't have to deal with some edge cases here
// make optimistic update for compare experiments | ||
setExperimentsCompareCache(queryClient, traceParams, deleteMutation); | ||
|
||
if (params.spanId) { | ||
// make optimistic update for spans | ||
setSpansCache( | ||
queryClient, | ||
{ | ||
traceId: params.traceId, | ||
spanId: params.spanId, | ||
}, | ||
deleteMutation, | ||
); | ||
} else { | ||
// make optimistic update for traces | ||
setTracesCache(queryClient, traceParams, deleteMutation); | ||
|
||
// make optimistic update for trace | ||
setTraceCache(queryClient, traceParams, deleteMutation); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very clean code, love it!
@@ -41,23 +55,51 @@ const useTraceFeedbackScoreDeleteMutation = () => { | |||
variant: "destructive", | |||
}); | |||
}, | |||
onMutate: async (params: UseTraceFeedbackScoreDeleteMutationParams) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We have to add the queryClient.cancelQueries(...)
step here -> https://tanstack.com/query/v5/docs/framework/react/guides/optimistic-updates#updating-a-single-todo
If not we could face some race conditions like:
- You start the mutation
A
-> makes optimistic update (update cache) -> triggers request - Mutation
A
finishes and it's running theonSettled
callback (refetch) - You make another mutation
B
-> makes optimistic update (A
+B
updates in the cache ✅ ) -> triggers request - Mutation
A
finishes the refetch -> updates the cache withA
change (reverts last mutation from an old server-state) ❌ - Eventually mutation
B
finishes the refetch -> updates the cache andA
+B
changes are in the cache ✅
So with cancellation of the queries step we remove the misleading old state of the step 4
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, you are right. Thanks for flagging this scenario. I have created a new PR with suggested improvements.
Details
Add the optimistic update for all cases when the user sets/ edits /deletes the feedback score
Issues
Resolves #694
Testing
Documentation