How to control mutation cache duration

[Noitidart]

It seems all mutations are cached in queryClient.getMutationCache indefinitely. Is it possible to control how long it stays for? I provide a mutationKey.

[TkDodo]

I don't think we have a cacheTime for mutations

[Noitidart]

Ah hahaha at mutation devtools! Thanks very much for your collaboration with me!

Just some brainstorm questions:

What is point of mutation cache if when another useMutation mounts, it doesn't reuse that entry in cache? (ideally there is a way to reuse mutation by mutationKey, that was my initial expectation, but this is probably unrelated to the current talk)

If no point to the cache, then onSuccess callback of .mutate can call just fine right, with or without cache?

[TkDodo]

What is point of mutation cache if when another useMutation mounts, it doesn't reuse that entry in cache? (ideally there is a way to reuse mutation by mutationKey, that was my initial expectation, but this is probably unrelated to the current talk)

there is an open issue for that, but i don’t think is that easy: #2304

If no point to the cache, then onSuccess callback of .mutate can call just fine right, with or without cache?

What I wanted to say is that callbacks on useMutation are always executed, even if the last observer is already unmounted. Callbacks on mutate are only executed if the observer is still mounted at the time when the execution should happen. I’ve written about that here: https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire

so my fear is that if we garbage collect as soon as the last observer unsubscribes, we would break that feature and potentially callbacks on useMutation would also be skipped..

[Noitidart]

Oh darn I see if last observer is gone, callbacks will skip. The only reason I needed useMutation is because it has nice state for loading, error, idle, status. If not for this, then useMutation is nothing special right?

Anyway to useQuery but pass in parameters for the query? Like:

const foo = useQuery();

foo.refetch({ with these params })

Is it possible to remove single entry from MutationCache? I think I only see remove all or none.

[TkDodo]

Anyway to useQuery but pass in parameters for the query?

You need to use local state and put the params into the query key, but that's a different discussion please.

Is it possible to remove single entry from MutationCache

queryClient.getMutationCache().remove(queryClient.getMutationCache().find(...))

[Noitidart]

Thanks so much for answering these while Im mixing the chat up. Really appreciate it!

I'm thinking maybe do that remove part in every mutate callback, what do you think? So that allows useMutation and then mutate callback to fire?

[Noitidart]

Thank you @TkDodo for this! If anyone comes to this topic there is a mutation cache time feature now! - #2963

[CapitaineToinon]

For anyone finding this answer today and wondering why the option seems to be gone, it has been renamed to gcTime in version 5

https://tanstack.com/query/latest/docs/framework/vue/guides/migrating-to-v5#rename-cachetime-to-gctime