I'm currently in a situation where I'm questioning the best way to handle this situation with RTKQuery:
I have a table that displays a set of data. In this table, you have the possibility to select a single item that lets you view further details on a map. The application also has the functionality of creating new entries in this table. So, logically, when you are creating a new entry, you don't want to see the details of the previously selected entry on the map. Currently, I achieve this with a boolean in a piece of redux state that I'm also using in other components; let's call it isCreateMode.
Here is the code:
Map.tsx:
<Map>
{!isCreateMode && <ComponentThatShowsTheSelectedEntryDetails />}
</Map>
The problem with this code is that whenever I decide to cancel the addition of a new entry to the table or proceed with the creation of it, I will set isCreateMode to false, and then the previously selected data shows the details on the map.
How can I remove the data from the query when I set isCreateMode to true, so that when it returns to false, the map doesn't show the previously selected details?
I've tried to use api.util.updateQueryData('tagToBeInvalidated', undefined, () => undefined) but it didn't work. I've also tried to use api.util.invalidateTags, but this obviously triggers a refetch with the latest argument, so it's not good for my situation.
I think that duplicating the state in a useState to have easier control isn't the best solution, so I'm trying to avoid it.
After some research, I managed to resolve the issue by using a mutation instead of a query. I knew that with a mutation comes a reset state function, but I didn't want to use it since I thought that using a mutation for things that aren't create, update, or delete APIs was not the right thing to do. However, after searching, I've discovered that it is totally fine to do that for handling side-effect such in my case.
I wonder if there are also other ways to handle this.