Access variables for an ongoing mutation globally

[lgenzelis]

I know I can do this:
const { variables, mutate } = useMutation(myAsyncFunction, { mutationKey });
and variables will give me the variables with which mutate was invoked the last time (or undefined if it hasn't been invoked yet). However, that only works in the component performing the mutation itself.

Also, currently we have a useIsMutating hook that lets us know, from anywhere in the app, whether a given mutation is running or not. Is there something analogous for the mutation variables?

Currently, I'm doing a very hacky thing to access those variables, so, if there is an official way to do it, I'd love to know about it 🙂 :

function useMutationData(mutationKey: unknown[]) {
  let ongoingMutationVariables: unknown;
  const isMutationInProgress = !!useIsMutating({
    predicate: ({ options }) => {
      if (JSON.stringify(options.mutationKey) === JSON.stringify(mutationKey)) {
        ongoingMutationVariables = options.variables;
        return true;
      }
      return false;
    },
  });
  return { isMutationInProgress, ongoingMutationVariables };
}

[TkDodo]

it's not the worst hack tbh, if you would store it on a ref / on a state variable. also, you can combine mutationKey and predicate to get rid of the JSON.stringify, as the predicate function is only called for already matching keys:

function useMutationData(mutationKey: unknown[]) {
  const [variables, setVariables] = React.useState()
  const isMutationInProgress = !!useIsMutating({
    mutationKey,
    predicate: ({ options }) => {
        setVariables(options.variables)
        return true
    },
  });
  return { isMutationInProgress, variables };
}

but yes, it's a bit weird to use the predicate function to store a side-effect. You can of course also just subscribe to the queryCache manually and store variables like we store the amount of running mutations:

https://github.com/tannerlinsley/react-query/blob/d4b6afc3448b2bfce44f14573f8f3f2baa0fb2ab/src/reactjs/useIsMutating.ts#L34-L43

setting state is easier if that state is referentially stable, like a number. If you setState on an object like variables or even the whole mutationState, it might trigger lots of re-renders unless you have referential stability (which you likely have with just variables)

[lgenzelis]

Thanks a lot @TkDodo ! 😄 I ended up going for a slightly different approach, to avoid the hack altogether, but I wouldn't have got there without your suggestion:

  const [currentVariables, setCurrentVariables] = useState();
  const isMutationInProgress = !!useIsMutating(mutationKey);

  useEffect(() => {
    if (!isMutationInProgress) {
      setCurrentVariables(undefined);
      return;
    }
    const variables = queryClient.getMutationCache().find({ mutationKey, fetching: true })?.state.variables;
    if (variables) {
      setCurrentVariables(variables);
    }
  }, [isMutationInProgress, mutationKey]);