Remove Queries does not always work

[mrdja026]

Hi folks,

I have encountered the following problem. First of all let's see if I got all the facts right. Since the documentation on removeQueries is kind of lacking. When we invalidate queries the queries that are cached will be marked as stale and will be prefetched, right? So when we useMutations to delete something from the database that we previously got via useQuery with some queryKey without removal of that query from the query cache it will query the backend and I will get 400 error. Did I get this part right?

Assuming that I did. On my project, I am dealing with tree-like structures that contain multiple workspaces that contain multiple X that may or may not contain multiple Y.

Deletion of the project on the backend is done recursively as it should, but every entity (project, workspace, X,Y) I have in my query cache, so when I delete the project I assume that I should also remove queries for the given entities because if I don't it will throw me an error when I invalidate Queries on success function of the delete mutation.

And that works like in 7/10 times. The majority of times the cache is removed, and the invalidate query will not cause the refetch of something that is deleted on the DB, but sometimes it does.

Did I totally misunderstand the concept of remove/invalidate Queries and onSucess functions in useMutation hook?
And if someone has some insights I am glad to hear it.
Tnx

[TkDodo]

When we invalidate queries the queries that are cached will be marked as stale and will be prefetched, right?

active queries will be refetched, inactive ones will be marked as stale.

So when we useMutations to delete something from the database that we previously got via useQuery with some queryKey without removal of that query from the query cache it will query the backend and I will get 400 error.

Only if the query is actively used. I guess if you have ['user', { id: 20 }] in your QueryCache and you delete user with id 20 somehow, you probably won't need that Query anymore, but you also won't have a useQuery that tries to read and request that Query...

I would usually just let the Query sit in the cache and let it be garbage collected after cacheTime has ellapased.

[TkDodo]

oh and if the query is actively used, removeQueries will remove the cache entry, but a re-render will bring it right back (because useQuery) will try and get it for you.

So either way, I would:

• only remove something that isn't actively used
• but at at that point, you don't really need to remove it
• if you remove something that is actively used - that's not a good idea because any re-render will make another request.

it's best to look at the devtools to see what is actively used and what isn't.