How to avoid re-fetching query after resource is deleted
The user is on a page with multiple items (query
Now the user deletes the currently selected item which triggers a mutation in a child component.
1. The mutation hook then invalidates
2. The child component uses the separate
3. The parent component removes the id from the search params and React Router re-renders the page without item details.
The problem is that the deleted item query
The query invalidation is necessary because the list of items should be re-fetched (and we don't want to have deleted data in the cache).
What's a good approach to handle such a case?
["items"]) and has one items selected that shows more details (query ["items", id]) and the selected id is stored in the URL as search param.Now the user deletes the currently selected item which triggers a mutation in a child component.
1. The mutation hook then invalidates
["items"] in the onSuccess callback. 2. The child component uses the separate
onSuccess callback of the mutate function to let the parent know that the resource was deleted.3. The parent component removes the id from the search params and React Router re-renders the page without item details.
The problem is that the deleted item query
["items", id] will be re-fetched before the router has re-rendered the page, resulting in a 404.The query invalidation is necessary because the list of items should be re-fetched (and we don't want to have deleted data in the cache).
What's a good approach to handle such a case?
