invalidateQueries function cause to close the modal
Recently i started to use react query to my application in react and i noticed that invalidateQueries function close my modal.
I will explain:
I have a task list in my app that in every item i attach function to open modal to delete this item.
I press the delete button on the modal and run some code in "onSuccess" function without close the modal ,but when it comes to "onSettled" function its run the "invalidateQueries" and dispose the modal from the screen(modalStatus state still set to true). How do I fix it so that it does not cause the model to disappear from the screen?
11 Replies
ambitious-aqua•3y ago
What's the question?
graceful-beigeOP•3y ago
How do I fix it so that it does not cause the modal to disappear from the screen?
ambitious-aqua•3y ago
Why should invalidateQueries make the modal disappear?
graceful-beigeOP•3y ago
I don't know why it makes the modal disappear.. that's why I need help because I couldn't figure it out
Basically, to close the model I need to put the onClose function in the code
But as you can see it is not written so it is not clear why it closes the modal.
If I delete the invalidate Queries then the modal does not close after the click
rival-black•3y ago
Could be some extra re renders / unmount / mount following invalidation due to default staleTime set to 0. A codesandbox to reproduce seems required here. Does not seem related to RQ to me.
graceful-beigeOP•3y ago
You can see that when i press the delete button its run mutate function and dispose the modal from the screen, Although i dont run closeModal function
https://codesandbox.io/s/awesome-napier-5e96mr?file=/src/useDeleteTak.jsx:621-680
matan40100
CodeSandbox
reacy query - CodeSandbox
reacy query by matan40100 using @tanstack/react-query, @tanstack/react-query-devtools, immer, react, react-dom, react-redux, react-scripts, redux
ambitious-aqua•3y ago
so when I'm playing around with that sandbox, it's not the
invalidateQueries that is responsible, but the onSuccess.
- comment out onSettled - dialog still closes after clicking delete
- comment out onSuccess - dialog stays open after clicking delete
so whatever you do in onSuccess (it seems like you delete something from somewhere?) is responsible for making the dialog close ...
seems like you remove the item in question from the list - but the item in the li is also what is rendering the actual dialog, so the dialog unmounts
yep, Modal is rendered inside Item, and if Item doesn't render anymore, neither does the modal. This has nothing todo with anything react-query does 🙂graceful-beigeOP•3y ago
Thanks you for the response i will check this is my orignal code.
I have another question, what is the best way to update data in
setQueryData function?
From what I understand I cannot directly update the data I receive from `setQueryData, like what i did in this example:
ambitious-aqua•3y ago
do immutable updates 🙂
graceful-beigeOP•3y ago
immer library its ok to use?
ambitious-aqua•3y ago
sure