React Query refetches deleted item
Watch this video for more context: https://www.loom.com/share/a6df236d6bce464aa93ec717e39d5203
23 Replies
optimistic-gold•3y ago
At 0:35 LN29, you invalidate all the queries under
["boards"] which comes from boardKeys.all.
Therefore, you have invalidated the following as well:
I'm not sure of this, but I think when invalidated, it'll try to refetch everything (recently or currently being accessed) under the ["boards"] parent key.
@TkDodo 🔮 would have to confirm this logic. If so, then it tries to refetch that id = 437 key as well.
You could possibly prevent the refetch of the deleted id, by removing that key from the cache before invalidating all the queries under ["boards"].
https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientremovequeriesQueryClient | TanStack Query Docs
QueryClient
The QueryClient can be used to interact with a cache:
magic-beigeOP•3y ago
@Sean Cassiere Thanks for helping out. I went ahead and implement removeQueries but I get the same result
optimistic-gold•3y ago
Using the debugger, could you confirm if the query has been removed from the devtools before the invalidation.
Basically you are looking for the before and after states.
magic-beigeOP•3y ago
Let me make a quick video
magic-beigeOP•3y ago
optimistic-gold•3y ago
Would you mind putting a debugger pause in between line 28 and 29. So, between removing the key and invalidating the queries. And looking at the react-query devtools then.
A screenshot should suffice.
This is in the onSuccess I mean
Basically what we are looking for is whether, or not react-query has actually removed the id key before the invalidation.
I'm also, wondering if the fact that the invalidation is being done before the navigation matters. Because, at that stage, you'd still be on the
deletedId page, and your components below would still require data from it.magic-beigeOP•3y ago
I'm at the debugger between line 28 and 29, how do I open devtools
optimistic-gold•3y ago
I admit, I did not foresee that little snag... Maybe have the devtools open whilst doing the delete.
magic-beigeOP•3y ago
Here you go
magic-beigeOP•3y ago
I think the issue is the navigate
foreign-sapphire•3y ago
Did you check the value of the key supposedly removed? Just to make it is the expected one
optimistic-gold•3y ago
Could just be it
Worth a look also
magic-beigeOP•3y ago
I moved it outside of the onsuccess call and it didn't give me the problem
magic-beigeOP•3y ago
optimistic-gold•3y ago
location, location, location... that's all it is sometimes I guess'
magic-beigeOP•3y ago
lol
Hey everybody, this guy might have a future in real estate!
optimistic-gold•3y ago
:t3ggParty:
magic-beigeOP•3y ago
I'm sure if this is a problem, but it's fetching the previous board before deleting the current board and then it deletes the current board and fetches the previous board again
magic-beigeOP•3y ago
*not sure
optimistic-gold•3y ago
I doubt it'll really be a problem...
Worse case scenario you have an extra API call, in a use-case which shouldn't happen too often (unless people delete boards often).
magic-beigeOP•3y ago
I see
Thank you for the help Sean, I appreciate it.
optimistic-gold•3y ago
No sweat, happy coding!
magic-beigeOP•3y ago
@Sean Cassiere I found the real issue. For invalidateQueries I had to pass it an object with the queryKey and exact:true for it to not fetch the deleted board
