Fixing Valueset editor refetching bug #10741
Conversation
WalkthroughThe Changes
Sequence Diagram(s)sequenceDiagram
participant V as ValueSetEditor
participant Q as QueryClient
participant S as Server
V->>S: Trigger update mutation
S-->>V: Mutation success
V->>Q: Invalidate cache (remove queries ["valueset", slug])
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@Jacobjeevan @rithviknishad The cause for this bug was that after updating a valueset the cache was not cleared. To address this root cause I added removeQueries so that on update mutation the cache gets cleared. Its only after updating that the valueset gets refetched. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/ValueSet/ValueSetEditor.tsx (1)
50-54: Consider optimizing the update success flow.While the cache invalidation is correctly implemented, the current order of operations might not be optimal for UX. The cache is invalidated after showing the success toast but before navigation, which means we're cleaning up data that won't be immediately used due to the navigation.
Consider this order for better UX:
onSuccess: () => { toast.success("ValueSet updated successfully"); - queryClient.removeQueries({ queryKey: ["valueset", slug] }); navigate(`/admin/valuesets`); + queryClient.removeQueries({ queryKey: ["valueset", slug] }); },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/ValueSet/ValueSetEditor.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (3)
src/components/ValueSet/ValueSetEditor.tsx (3)
1-1: LGTM! Clean import addition.The
useQueryClienthook is appropriately imported alongside related React Query hooks.
26-26: LGTM! Proper query client initialization.The
queryClientis correctly initialized at the component's top level using theuseQueryClienthook.
26-54: Great implementation of the refetching fix!The changes effectively address the ValueSet editor refetching bug by properly managing the cache invalidation after updates. The implementation follows React Query best practices and ensures data consistency.
|
LGTM |
|
@hrit2773 Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit