How can I separate cache operations and side effects in a custom mutation hook?

[denisborovikov]

I'm thinking, how I can separate some cache operations and side effects in a custom mutation hook.

Now if both hook and mutation function have onSuccess handler, only hook's handler will be executed.

function App() {
  const [mutate] = useMutation(() => "", {
    onSuccess: () => console.log("useMutation") // will not fire
  });

  function handleClick() {
    mutate({
      onSuccess: () => console.log("mutate") // will fire
    });
  }

  return <button onClick={handleClick}>Mutate</button>;
}

I want to update cache on every mutation and also have side effects on some mutations like url redirect.

The way to make it possible as I can see now is to execute both handlers.

function useCustomMutation() {
  return useMutation(() => "", {
    // Update cache data on every mutation of this type
    onSuccess: data => queryCache.setQueryData(...)
  });
}

function App() {
  const [mutate] = useCustomMutation();


  function handleRedirectClick() {
    mutate({
      // Execute any side effects on some mutations
      onSuccess: () => history.push(...)
    });
  }

  function handleMutateClick() {
    mutate();
  }
  
  return (
    <>
      <button onClick={handleMutateClick}>Mutate</button>
      <button onClick={handleRedirectClick}>Mutate and redirect</button>
    </>
  );
}

What do you think? Maybe there's a better idea?

[tannerlinsley]

Hmm. Good point. So you're saying instead of having them override the hook-level one, they should add on to it (so both would execute)

[tannerlinsley]

I just published a fix for this. My original intention was the functionality you are describing, so I consider this a bug. In the latest version, if both options are defined, they will both fire with the mutate-level handler first, then the hook-level handler.

[denisborovikov]

This sounds awesome! Thanks again for the great library!

[denisborovikov]

I'm trying the new version 1.0.35, but there are no changes yet https://codesandbox.io/s/delicate-feather-cr8c5

[tannerlinsley]

mutate takes a mutation variable as the first argument, then the config. You are only passing the config.

[denisborovikov]

Shoot, my bad.