How to use cache value immediately after mutation?

[alexander-ye]

Hello all (and if you are maintainer, thank you!).

I have a question about using cache values immediately after mutate calls within things like callbacks.

I want to do something like this with mutations:

const { refetch } = useSomeQuery(id);
const queryClient = useQueryClient();

const fetchAndDoSomething = async () => {
    const response = await refetch();
    doSomethingWith(response.data);
}

where fetchAndDoSomething might be triggered by a button click.

I would like to do the same thing with mutations, but I'm not sure how to return anything from a mutation function.

So I do something like this:

const { mutate } = useMutation(someMutationThatUpdatesQueryCacheOnSettled);

const queryClient = useQueryClient();

const fetchAndDoSomething = async () => {
    const response = await mutate();
    const data = queryClient.getQueryData(MyQueryKey)
    doSomethingWith(data);
}

I notice that when I write with this pattern (mutate + set query cache data, and then try to get the runtime value of the data from the queryClient), I always end up calling doSomethingWith on stale data (values from the previous render), even though I expect queryClient.getQueryData to return the runtime value. (Maybe this isn't actually what's going on, but it's my best interpretation of the behavior I'm seeing.)

The only ways I have gotten this to work have been to:

1. Use a subscriber (seems like it's more expensive than approach 2)

const { mutate } = useMutation(someMutation);
const queryClient = useQueryClient();

const fetchAndDoSomething = async () => {
    await mutate();
    const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
       if (event.query.queryKey.toString() === queryKey.toString() && event.type === 'updated') {
          unsubscribe();
          if (event.query.state.status === 'success') {
              doSomethingWith(event.query.state.data);
          }
    }
  });
}

2. Use an effect (not ergonomic, seems silly)

const [doSomething, setDoSomething] = useState(false);

const { mutate } = useMutation(someMutation);
const { data } = useQuery(QueryKeyMutationUpdates);
const queryClient = useQueryClient();

const fetchAndDoSomething = async () => {
    await mutate();
    setDoSomething(true);
}

useEffect(() => {
    if (!data || !doSomething) return;
    doSomethingWithData(data);
    setDoSomething(false);
}, [data, doSomething]);

3. Create a new/wrapper useMutation hook with all the same parameters, but to add doSomethingWithData to the onSettled callback. (This seems like the best way so far, but I'm not sure if there is a better/recommended way).

Maybe I'm missing something (something as simple as returning a value from mutate, which I don't know how to do), but I'm hoping there's a more ergonomic way to do this that doesn't incur an observer or render cost. I also want to clarify that I do not want this doSomethingWithData to fire every time I mutate, just on an instance of calling this mutation.

Thanks!

[alexander-ye]

Edit:
Use mutateAsync.

Prev answer:
I'm silly. You can pass a callback function to the wrapper function.

(I am a little concerned about stale closures and whether you need to pass the mutation function into the mutation key array, but the function I'm writing "lives" outside of React so doesn't rely on state variables—hence the desire to get runtime values)