useMutation cacheTime not work

[scc02]

Describe the bug

In my understanding, after setting cacheTime, the data should return the value from the previous request, rather than undefined.

Your minimal, reproducible example

https://github.com/ShiChenCong/useMutation-cacheTime-demo

Steps to reproduce

1. reproduce repo
2. pnpm install
3. pnpm run dev
4. click button
5. log undefined
6. log [1,2,3]
7. click button again
8. log undefined(this step, In my understanding, should log [1,2,3] directly)
9. log [1,2,3]

Expected behavior

return previous value rather undefined

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

macOS

TanStack Query version

4.24.10

TypeScript version

No response

Additional context

reproduce repo https://github.com/ShiChenCong/useMutation-cacheTime-demo, and mutation did not show in the devtool too.

[TkDodo]

no, that's just a misunderstanding of how useMutation works. Every time you call mutate by clicking the button, a new entry in the mutationCache is created. cacheTime just decides how long that entry will stay in the cache after you've unmounted the component

[scc02]

@TkDodo Im confuse about the purpose of cacheTime in mutation

[TkDodo]

cacheTime just decides how long that entry will stay in the cache after you've unmounted the component

is that explanation not helpful? cacheTime is about garbage collection, which is why we've renamed it to gcTime in v5. usually, you don't need to care about it...

[scc02]

@TkDodo so, there is no way that mutation can cache data

[TkDodo]

it does cache, but each call to mutate is a different cache entry:

const { mutate } = useMutation({
  mutationFn: updateName
})

mutate('hello')
mutate('world')

creates two cache entries, one where the variables are hello and one where they are world. it's two different things, like as if you're switching between two cache keys.

I think I can better help if you're describing the problem you're trying to solve rather than asking a specific question about caching mutations

[scc02]

Thank you for your kindness , I’d like to cache data like useQuery in useMutation. when fetch data again ,return previous cache data first , and then fetch new data

[TkDodo]

okay but that's not how mutations work, sorry. Each invocation is a separate thing. Also, "I want to cache data in useMutation" is not your problem - it's a potential solution that you think will solve your problem...

[scc02]

@TkDodo After looking at some articles, I found that I misunderstood, when I want to cache data, I should use useQuery, even if it is the post。

[dcatoday-cloud9]

@TkDodo I'm trying to get a cache-able callback function returning a promise. Is this supported by your library? What is actually being cached here if not the data returned from the promise?

My use case is to call the mutateAsync with a value 'hello' and return the response of an api call, the next time I call it with 'hello' I would expect to get the cached response. Then when another value is passed 'goodbye' I would expect a different cache entry to be created and a new api call to be made with different response.

I'll illustrate:

const a = await mutateAsync('hello');
// makes a call and returns 'hi'

const b = await mutateAsync('goodbye');
// makes a call and returns 'bye'

const c = await mutateAsync('hello');
// finds entry in cache and returns 'hi'

If this is not the intended behavior then I am not sure what the purpose of the cache would be, am I missing anything?

[TkDodo]

mutations don't cache like that because mutations are imperative. You would sure get that behaviour if you use const data = await queryClient.fetchQuery(...), given that you pass a sufficient staleTime to it.

https://tanstack.com/query/v5/docs/reference/QueryClient#queryclientfetchquery

[dcatoday-cloud9]

Thanks @TkDodo this looks like what I was incorrectly trying to do with useMutation. I’ll go in that direction. Out of curiosity I am wondering what is getting cached with the mutation. Is it just a record of the calls? If there’s further reading I’d be grateful.

[TkDodo]

the mutation is cached alongside its state (pending / success / error), it has callbacks that will still run even if the component was already unmounted when it finishes (needed for invalidation), you can read in other components with useMutationState etc